.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 16px;
    margin-bottom: 16px;
  }
}
@media (min-width: 960px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px;
  }
}

.s-span-1 {
  grid-column: auto/span 1;
}
.s-span-1 .grid {
  grid-template-columns: repeat(1, 1fr);
}

.s-span-2 {
  grid-column: auto/span 2;
}
.s-span-2 .grid {
  grid-template-columns: repeat(2, 1fr);
}

.s-span-3 {
  grid-column: auto/span 3;
}
.s-span-3 .grid {
  grid-template-columns: repeat(3, 1fr);
}

.s-span-4 {
  grid-column: auto/span 4;
}
.s-span-4 .grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 600px) {
  .s-hide {
    display: none !important;
  }
}
@media (min-width: 600px) {
  .m-span-1 {
    grid-column: auto/span 1;
  }
  .m-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-span-2 {
    grid-column: auto/span 2;
  }
  .m-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-span-3 {
    grid-column: auto/span 3;
  }
  .m-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-span-4 {
    grid-column: auto/span 4;
  }
  .m-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-span-5 {
    grid-column: auto/span 5;
  }
  .m-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-span-6 {
    grid-column: auto/span 6;
  }
  .m-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 960px) {
  .m-hide {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .span-1 {
    grid-column: auto/span 1;
  }
  .span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .span-2 {
    grid-column: auto/span 2;
  }
  .span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .span-3 {
    grid-column: auto/span 3;
  }
  .span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .span-4 {
    grid-column: auto/span 4;
  }
  .span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .span-5 {
    grid-column: auto/span 5;
  }
  .span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .span-6 {
    grid-column: auto/span 6;
  }
  .span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .span-7 {
    grid-column: auto/span 7;
  }
  .span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .span-8 {
    grid-column: auto/span 8;
  }
  .span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .span-9 {
    grid-column: auto/span 9;
  }
  .span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .span-10 {
    grid-column: auto/span 10;
  }
  .span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .span-11 {
    grid-column: auto/span 11;
  }
  .span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .span-12 {
    grid-column: auto/span 12;
  }
  .span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .l-hide {
    display: none !important;
  }
}
.hero-section {
  padding-top: 2.4rem !important;
}
.hero-section > div {
  position: relative;
  background-size: cover;
  align-items: center;
}
.hero-section > div .flexslider {
  margin-top: -2.4rem;
  overflow: hidden;
}
.hero-section > div .flexslider flex-viewport {
  max-height: 64rem;
  overflow: hidden;
}
.hero-section > div .flexslider img {
  width: 100%;
  object-fit: cover;
}
.hero-section > div .flexslider .flex-control-nav {
  text-align: center;
  margin: 0.8em;
  padding: 0;
}
.hero-section > div .flexslider .flex-control-nav li {
  margin: 0 3px;
  display: inline-block;
}
.hero-section > div .flexslider .flex-control-nav li a {
  background: #333;
  border-radius: 50px;
  height: 10px;
  width: 10px;
  display: block;
  text-indent: -99999px;
}
.hero-section > div .flexslider .flex-control-nav li a.flex-active {
  background-color: #d8232a;
}
.cta {
  display: block;
  position: absolute;
  top: 15%;
  left: 6.4rem;
  font-size: 2.8rem;
  background: rgba(255, 255, 255, 0.8);
  margin: 24px;
  padding: 24px;
  border-radius: 8px;
  font-weight: 600;
  max-width: 380px;
  z-index: 10;
}
.cta p {
  line-height: 1;
}

.slides {
    overflow:hidden;
}

.slides li {
    scale: 1.1;
}

.flex-active-slide {
   animation: zoomout 6s; 
}

@-webkit-keyframes zoomout{
	0%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1);
	}
}

@media (max-width: 600px) {
  .hero-section .cta {
    left: 0;
    top: 0;
    width: 100%;
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.8);
    margin: 0px 0px 8px 0px;
    border-radius: 0;
    padding: 16px 8px 12px 0px;
    position: relative;
    max-width: 100%;
  }
}

.intro {
  margin: 0 auto;
  font-size: 2rem;
  line-height: 1.4;
  background: #e6e6e6;
  padding: 3em;
  margin-top: 24px;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .intro {
    font-size: 1.6rem;
    padding: 24px;
  }
}

.main--wrapper.project-section {
  padding-top: 4.8rem;
}
.main--wrapper.project-section .img--wrapper {
  width: 100%;
}
.main--wrapper.project-section .img--wrapper img {
  width: 100%;
  height: auto;
}
.main--wrapper.project-section li {
  line-height: 1.5;
}

.sidebar-page .sidebar li {
  padding-right: 1.6rem;
}
.sidebar-page .sidebar li label {
  cursor: pointer;
  display: flex;
  padding: 1.2rem 0;
  font-weight: 500;
  border-bottom: 1px solid #ccc;
}
.sidebar-page .rte {
  display: flex;
  flex-direction: column-reverse;
}
.sidebar-page .rte > p {
  display: none;
}

.shortcuts {
  padding-top: 0 !important;
}
.shortcuts li {
  padding-right: 2.4rem;
}
.shortcuts li:first-child {
  display: none;
}
.shortcuts li label {
  width: 100%;
  display: inline-block;
  padding: 1.2rem;
  background: #e6e6e6;
  cursor: pointer;
  text-align: center;
  min-height: 2.4em;
  border-bottom: 1px solid #ccc;
}

[name=section] + div {
  display: none;
}
[name=section]:checked + div {
  display: block;
}

/*============================================================================
	#General Variables
==============================================================================*/
:root {
    --ok-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --ok-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
    --ok-fw-0: 400;
    --ok-fw-1: 600;
    --ok-fw-2: 700;
    --ok-fw-3: 700;
    --ok-fs-0: 2.5rem;
    --ok-fs-1: 2rem;
    --ok-fs-2: 1.5rem;
    --ok-fs-3: 1.25rem;
    --ok-fs-4: 1rem;
    --ok-fs-5: 0.75rem;
    --ok-br: 0.25rem;
    --ok-s-0: 0;
    --ok-s-1: 0.25rem;
    --ok-s-2: 0.5rem;
    --ok-s-3: 1rem;
    --ok-s-4: 1.5rem;
    --ok-s-5: 2rem;
    --ok-s-6: 2.5rem;
    --ok-lh-body: 1.5;
    --ok-lh-heading: 1.25;
    --ok-t-hl: #ffcf30;
    --ok-accent-0: #FE0404;
    --ok-accent-1: #d8232a;
    --ok-tc-on-accent: white;
    --ok-tc-accent: #3173de;
    --ok-tc-code: #c23a30;
    --ok-tc-0: #000;
    --ok-tc-1: #747474;
    --ok-tc-2: #848484;
    --ok-bg-0: #fff;
    --ok-bg-1: #f0f0f0;
    --ok-bg-2: #ccc;
    --ok-b-0: 1px solid #cbcbcb;
    --ok-b-1: 1px solid #848484;
}
.bg0 {
    background-color: var(--ok-bg-0);
}
.bg1 {
    background-color: var(--ok-bg-1);
}
.bg2 {
    background-color: var(--ok-bg-2);
}

.p1 {
    padding: var(--ok-s-1);
}
.p2 {
    padding: var(--ok-s-2);
}
.p3 {
    padding: var(--ok-s-3);
}
.p4 {
    padding: var(--ok-s-4);
}
.p5 {
    padding: var(--ok-s-5);
}
.p6 {
    padding: var(--ok-s-6);
}

.text-center {
    text-align: center;
}

.btn,
input[type=submit] {
margin: 0 auto;
  margin-top: var(--ok-s-5);
  padding: var(--ok-s-3);
  min-width: 10em;
  max-width: 20rem;
  background-color: var(--ok-accent-1);
  color: var(--ok-tc-on-accent);
  display: block;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}


html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: var(--ok-sans);
}

body {
  padding-bottom: 0 !important;
  min-height: 100vh;
  height: 100%;
  font-size: 1.6rem;
  position: relative;
  border-left: 3px solid var(--ok-accent-0);
  display: flex;
  flex-direction: column;
}

.htmlContent {
    max-width: 90rem;
    margin: 0 auto;
}

p {
  line-height: 1.43;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

strong {
  font-weight: 500;
}

blockquote {
    background: var(--ok-bg-1);
    margin: var(--ok-s-6);
    margin-left: var(--ok-s-4);
    padding: var(--ok-s-4);
    border-left: var(--ok-b-0);
    font-style: italic;
    font-family: var(--ok-mono);
    
}

blockquote > p {
    margin: 0;
}

.main--wrapper {
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}

.top-banner {
    background-color: var(--ok-accent-0);
    color: #fff;
    padding: var(--ok-s-2);
    font-size: var(--ok-fs-2);
}

.top-banner a {
    color: #fff;
    text-decoration: none;
}

.top-banner ul {
    margin:0;
}

.phone::before {
  display: inline-block;
  content: "";
  width: 9px;
  height: 14px;
  border: 1px solid #555;
  border-top-width: 3px;
  border-bottom-width: 2px;
  border-radius: 3px;
  margin-right: 6px;
  margin-bottom: -3px;
}


@media (min-width: 600px) {

  .top-banner li {
    padding: 0;
    display: inline-block;
  }
  .top-banner li + li::before {
    content: " | ";
    padding: 10px;
  }  
}

.main-nav {
  padding-top: 1.2rem;
}
.main-nav .logo {
  margin: 0;
}
.main-nav .logo svg {
  width: 100%;
  height: auto;
}
.main-nav .main-menu--wrapper {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.main-nav .main-menu--wrapper a {
  color: #333;
  font-weight: 500;
  text-decoration: none;
}
.main-nav .main-menu--wrapper ul {
  margin: 0;
  padding-top: 1.2rem;
  margin-right: -1rem;
}
.main-nav .main-menu--wrapper ul li a {
  font-size: 1.6rem;
  padding: 0 1rem;
  position: relative;
}

@media (max-width: 600px) {
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open .main-menu--wrapper {
    position: fixed;
    width: 100%;
    top: 7rem;
    left: 0.2rem;
    right: 0.2rem;
    bottom: 0;
    background: #fff;
    display: block !important;
    padding: 2.4rem;
    z-index: 1;
  }
  body.menu-open .main-menu--wrapper ul {
    padding-top: 2.4rem;
    flex-direction: column;
  }
  body.menu-open .main-menu--wrapper ul li a {
    display: inline-block;
    padding: 1rem 0;
    font-size: 2rem !important;
  }
  body.menu-open .hero-section {
    display: none;
  }
}
.menu--toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}


.project-section header {
  margin-bottom: 1.2rem;
}
.project-section h3 {
  margin-bottom: 0.6rem;
}
.project-section a {
  text-decoration: none;
  color: #333;
}

.project-card .img--wrapper {
  width: 100%;
  padding-bottom: 61.8%;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.main-content {
    flex-grow: 2;
}

.template-page .main-content .grid {
  padding-top: 4.8rem;
}
.template-page iframe {
  width: 100%;
  height: 80vh;
}

.template-product .main-content .main--wrapper {
  padding-top: 4.8rem;
}
.template-product .product-description {
  align-items: center;
  display: flex;
  line-height: 1.5;
}
.template-product img {
  width: 100%;
}

form label {
    color: var(--ok-tc-2);
    font-size: var(--ok-fs-3);
    margin: var(--ok-s-4) 0 var(--ok-s-1) 0;
}

input, textarea {
    border: var(--ok-b-0);
    font-size: 1.6rem;
    padding: 0.4rem;
}


#kontakta-oss h4 {
  margin-bottom: 0.8rem;
}
#kontakta-oss p {
  margin: 0 0 0.4rem 0;
}
#kontakta-oss .rte img {
  float: left;
  margin-right: 0.8rem;
}

body > footer {
  text-align: center;
  margin-top: 4rem !important;
  line-height: 1.5;
  color: #333;
}
body > footer span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 12px;
}
body > footer a {
  color: #333;
  text-decoration: none;
}
body > footer .underline::before {
  width: 100%;
  left: 0;
}
body > footer .underline::after {
  right: 0;
}
body > footer .footer-links li {
  white-space: nowrap;
  padding: 10px;
}
@media (min-width: 600px) {
  body > footer .footer-links li {
    padding: 0;
    display: inline-block;
  }
  body > footer .footer-links li + li::before {
    content: " | ";
    padding: 10px;
  }
}

.underline::before {
  display: block;
  content: "";
  position: absolute;
  height: 1px;
  width: calc(100% - 2rem);
  bottom: -5px;
  left: 1rem;
  background-color: #FF0000;
}
@media (max-width: 600px) {
  .underline::before {
    width: calc(100% - 0.5rem);
    left: 0;
    bottom: 0.5rem;
  }
}

.underline::after {
  display: block;
  content: "";
  position: absolute;
  bottom: -1rem;
  right: 1rem;
  height: 12px;
  width: 100%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIxIDIxIj4KICA8cGF0aCBmaWxsPSJyZWQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTExLDAgTDExLjAwMDcwNzQsNi4wMjc1NDI2NSBDMTEuMjcxMDE2OSw2LjA1NzQ2NzAxIDExLjUzNDEwNzksNi4xMTEzMzM5NiAxMS43ODc4MTIzLDYuMTg2OTc1NTUgTDEzLjE2NTU5NjYsMi45NDA1OTU2MSBMMTQuMDg2MTAxNSwzLjMzMTMyNjc0IEwxMi43MDgyNTUzLDYuNTc4MTY4OTIgQzEyLjkxOTY3MDEsNi42OTc0NjU3MyAxMy4xMjA0NzMyLDYuODMzMzYzMjUgMTMuMzA4ODk1NCw2Ljk4NDA5MjI5IEwxNy41NzEwNjc4LDIuNzIxODI1NDEgTDE4LjI3ODE3NDYsMy40Mjg5MzIxOSBMMTQuMDE1Nzg5Niw3LjY5MDk1NzAyIEMxNC4xNjY1MjY0LDcuODc5MzcyNzYgMTQuMzAyNDMyMSw4LjA4MDE2OTg2IDE0LjQyMTczNzYsOC4yOTE1NzkxMiBMMTcuNjY4NjczMyw2LjkxMzg5ODU1IEwxOC4wNTk0MDQ0LDcuODM0NDAzNCBMMTQuODEzMjM1NCw5LjIxMjg5NTUyIEMxNC44ODg4NjY3LDkuNDY2NzE4NjkgMTQuOTQyNzAzOSw5LjcyOTkzMzc5IDE0Ljk3MjU3NjUsMTAuMDAwMzcwMyBMMjEsMTAgTDIxLDExIEwxNC45NzI0NjU1LDExLjAwMDYzNDEgQzE0Ljk0MjU1MDcsMTEuMjcwODk3MyAxNC44ODg3MDE2LDExLjUzMzk0NDcgMTQuODEzMDg0OSwxMS43ODc2MDk1IEwxOC4wNTk0MDQ0LDEzLjE2NTU5NjYgTDE3LjY2ODY3MzMsMTQuMDg2MTAxNSBMMTQuNDIyMTY2MiwxMi43MDc2NjEzIEMxNC4zMDI5MjA3LDEyLjkxOTA2MDEgMTQuMTY3MDc4NCwxMy4xMTk4NTI2IDE0LjAxNjQwNzcsMTMuMzA4MjcwMiBMMTguMjc4MTc0NiwxNy41NzEwNjc4IEwxNy41NzEwNjc4LDE4LjI3ODE3NDYgTDEzLjMwODMyNSwxNC4wMTYzNjM5IEMxMy4xMDk4MTg3LDE0LjE3NTEwNzIgMTIuODk3NTc2NCwxNC4zMTczOTE0IDEyLjY3MzY2NiwxNC40NDExNDg1IEwxNC4wMjM0MDcyLDE3LjY5OTY5NDUgTDEzLjA5OTUyNzcsMTguMDgyMzc4IEwxMS43NDk1LDE0LjgyNDI2MDkgQzExLjUwNzY1MjEsMTQuODk0MDE4NiAxMS4yNTc0MzU0LDE0Ljk0NDAzNjUgMTEuMDAwNzA3NCwxNC45NzI0NTc0IEwxMSwyMSBMMTAsMjEgTDEwLjAwMDI5NywxNC45NzI1Njg0IEM5LjcyOTYxODU3LDE0Ljk0MjY2NDYgOS40NjYxNzQ2OCwxNC44ODg3NTMyIDkuMjEyMTQxNzksMTQuODEzMDEwOCBMNy44MzQ0MDM0LDE4LjA1OTQwNDQgTDYuOTEzODk4NTUsMTcuNjY4NjczMyBMOC4yOTE2MDU4NiwxNC40MjE3NTI3IEM4LjA4MDIwOTQsMTQuMzAyNDU2NCA3Ljg3OTQyMzY1LDE0LjE2NjU2MTggNy42OTEwMTc0NiwxNC4wMTU4MzggTDMuNDI4OTMyMTksMTguMjc4MTc0NiBMMi43MjE4MjU0MSwxNy41NzEwNjc4IEw2Ljk4NDE4MTE5LDEzLjMwOTAwNjUgQzYuODMzNDU2MDksMTMuMTIwNjAxNCA2LjY5NzU2MDIyLDEyLjkxOTgxNjYgNi41NzgyNjI0NiwxMi43MDg0MjEgTDMuMzMxMzI2NzQsMTQuMDg2MTAxNSBMMi45NDA1OTU2MSwxMy4xNjU1OTY2IEw2LjE4NjcwMjc4LDExLjc4Njg5NzEgQzYuMTExMjA0NDUsMTEuNTMzNDc1MSA2LjA1NzQzMTAzLDExLjI3MDY5MTkgNi4wMjc1NDI2NSwxMS4wMDA3MDc0IEwwLDExIEwwLDEwIEw2LjAyNzQzMTU2LDEwLjAwMDI5NyBDNi4wNTczMTUxOCw5LjcyOTgwMTYgNi4xMTExNzM4Niw5LjQ2NjUzMDk4IDYuMTg2ODM1Niw5LjIxMjY1NzE1IEwyLjk0MDU5NTYxLDcuODM0NDAzNCBMMy4zMzEzMjY3NCw2LjkxMzg5ODU1IEw2LjU3ODA4OTE0LDguMjkxODg2MTIgQzYuNjk3NDUzNTIsOC4wODAzMzM3MyA2LjgzMzQzOTg3LDcuODc5NDA1OTggNi45ODQyNzU2Niw3LjY5MDg3NTQxIEwyLjcyMTgyNTQxLDMuNDI4OTMyMTkgTDMuNDI4OTMyMTksMi43MjE4MjU0MSBMNy42OTA4NzU0MSw2Ljk4NDI3NTY2IEM3Ljg4OTUwMzIyLDYuODI1MzYxNDggOC4xMDE4OTE2OSw2LjY4MjkyOTkyIDguMzI1OTY3OTYsNi41NTkwNTM4NiBMNi45NzY1OTI3NywzLjMwMDMwNTQ2IEw3LjkwMDQ3MjMxLDIuOTE3NjIyMDIgTDkuMjUwODY3MjksNi4xNzU2MzMxNiBDOS40OTI5MTY3LDYuMTA1ODM5ODEgOS43NDMzNDcyLDYuMDU1ODE4NyAxMC4wMDAyOTcsNi4wMjc0MzE1NiBMMTAsMCBMMTEsMCBaIi8+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-size: 9px;
  background-position: right;
}
@media (max-width: 600px) {
  .underline::after {
    bottom: 0;
    right: 0;
  }
}

.key-features li:first-child {
  font-weight: bold;
  font-size: 1.5em;
}

.project-card ul {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.project-card ul li:first-child {
  font-weight: bold;
}

.service-card {
    text-align: center;
    padding: 2em;
}