@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Gentium+Basic:ital,wght@0,400;0,700;1,400;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&display=swap);

.btn,
.textbtn {
  display: flex;
  width: fit-content;
  cursor: pointer;
}

.buttons,
.container .slider,
.maintance_info .info_cont.success > a,
footer.project_footer form {
  text-align: center;
}

*,
body {
  font-family: Quicksand, sans-serif;
}

h1 > a,
h1 > mark,
h2 > a,
h2 > mark,
h3 > a,
h3 > mark,
h4 > a,
h4 > mark,
h5 > a,
h5 > mark,
h6 > a,
h6 > mark {
  font-family: inherit;
  text-decoration: inherit;
  background-color: inherit;
  font-size: inherit;
}

* {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --project-main-clr: #101010;
  --grey-clr: #2c2c2c;
  --green-clr: #00412d;
  --green-clr-a: 0, 65, 45;
  --dgreen-clr: #014f32;
  --lgrey-clr: #acacac;
  --form-green: #edfffa;
  --white-clr: #ffffff;
  --black-clr: #000000;
  --input-bg-clr: #ededed;
}

input:-webkit-autofill {
  background-color: transparent;
}

.buttons.white .button,
a.backbtn {
  color: var(--grey-clr);
  background-color: var(--white-clr);
}

[data-popup] {
  position: relative;
}

[data-popup] > * {
  position: relative;
  z-index: 2;
}

[data-popup] [data-closepop] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
  z-index: 1;
}

.loading_animation.owl {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--green-clr) url("../images/owl-logo-bile.svg") center center no-repeat;
  background-size: 250px;
}

.buttons {
  padding: 3rem 0;
}

.buttons .button {
  margin: 0 auto;
  background: var(--dgreen-clr);
  border-radius: 50px;
  padding: 0.75rem 1rem;
  color: inherit;
}

.btn {
  border: none;
  padding: 1.25em 2em;
  color: var(--white-clr);
  background-color: var(--green-clr);
  border-radius: 50px;
  text-transform: uppercase;
  pointer-events: all;
}

.textbtn {
  border-radius: 3px;
  position: relative;
  font-weight: 500;
  transition: 0.2s;
  padding-right: 20px !important;
  text-decoration: none;
  color: inherit;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border: none;
  margin-left: 0;
}

.textbtn::after,
.textbtn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-10%, -50%) rotate(45deg);
  width: 4px;
  height: 4px;
  border-top: 1px var(--grey-clr) solid;
  border-right: 1px var(--grey-clr) solid;
  opacity: 1;
  transition: 0.25s;
}

.textbtn.white::after,
.textbtn.white::before {
  border-color: var(--white-clr);
}

.textbtn::before {
  right: 6px;
}

.textbtn:hover::before {
  right: 0;
}

.textbtn:hover::after {
  right: -6px;
  opacity: 0;
}

.maintance_info {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 450px;
  background: rgba(0, 0, 0, 0.301);
  z-index: 99;
}

.relpos,
a.backbtn,
article.akce_min > header {
  position: relative;
}

.maintance_info .info_cont,
.maintance_info .info_cont > * {
  padding: 1rem;
}

.maintance_info .info_cont .title {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  max-width: 80%;
}

.maintance_info .info_cont .mail-sent {
  padding: 4rem 1rem 3rem;
  background: var(--white-clr);
  text-align: center;
}

body {
  color: var(--grey-clr);
}

body.noscroll,
html.noscroll {
  overflow: hidden;
  padding-right: 20px;
}

span.icon {
  display: inline-block;
  padding: 0.3em 0.3em 0.3em 25px;
}

span.icon.phone {
  background: url("../images/phone-icon-green.svg") left center/15px no-repeat;
}

span.icon.phone-w {
  background: url("../images/phone-icon-white.svg") left center/15px no-repeat;
}

span.icon.email {
  background: url("../images/email-icon-green.svg") left center/15px no-repeat;
}

span.icon.email-w {
  background: url("../images/email-icon-white.svg") left center/15px no-repeat;
}

span.icon.date {
  background: url("../images/calendar-icon-white.svg") left center/20px no-repeat;
}

span.icon.instagram {
  background: url("../images/instagram-icon-green.svg") left top 5px/20px no-repeat;
}

span.icon.instagram-w {
  background: url("../images/instagram-icon-white.svg") left top 5px/20px no-repeat;
}

span.icon.facebook {
  background: url("../images/facebook-icon-green.svg") left top 5px/20px no-repeat;
}

span.icon.facebook-w {
  background: url("../images/facebook-icon-white.svg") left top 5px/20px no-repeat;
}

span.icon.linkedin {
  background: url("../images/linkedin-icon-green.svg") left top 5px/20px no-repeat;
}

span.icon.linkedin-w {
  background: url("../images/linkedin-icon-white.svg") left top 5px/20px no-repeat;
}

span.icon.tiktok {
  background: url("../images/tiktok-icon-green.svg") left top 5px/20px no-repeat;
}

span.icon.tiktok-w {
  background: url("../images/tiktok-icon-white.svg") left top 5px/20px no-repeat;
}

span.icon.youtube {
  background: url("../images/youtube-icon-green.svg") left top 5px/20px no-repeat;
}

span.icon.youtube-w {
  background: url("../images/youtube-icon-white.svg") left top 5px/20px no-repeat;
}

a.mobile_menu,
footer.project_footer .flex-blocks .block::before,
footer.project_footer article ul.socmedia li a::after,
footer.project_footer article ul.socmedia li::before {
  display: none;
}

a.backbtn {
  display: inline-block;
  padding: 1rem 1rem 1rem 2.5rem;
  text-decoration: none;
  margin-top: 2rem;
  -webkit-box-shadow: 0 0 22px -7px rgb(0 0 0 / 42%);
  -moz-box-shadow: 0 0 22px -7px rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 22px -7px rgb(0 0 0 / 42%);
}

a.backbtn::after,
a.backbtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  width: 5px;
  height: 5px;
  border-top: 1px var(--grey-clr) solid;
  border-right: 1px var(--grey-clr) solid;
  transform: translate(0, -50%) rotate(-135deg);
  transition: 0.2s;
}

a.backbtn::after {
  left: 28%;
  transition: 0.4s;
}

a.backbtn:hover::after,
a.backbtn:hover::before {
  left: 15%;
}

a[data-scrollto] {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
  color: inherit;
  cursor: pointer;
}

h1 > mark,
h2 > mark,
h3 > mark,
h4 > mark,
h5 > mark,
h6 > mark {
  color: inherit;
}

mark.h1 {
  background-color: transparent;
}

h4 {
  font-size: 1.35rem;
  font-weight: 400;
}

article.gdpr_article h2,
h3 {
  font-size: 2rem;
}

h2 {
  font-size: 2.5rem;
}

.emblem {
  display: flex;
  width: 150px;
  height: 140px;
  background: url("../images/header-emblem.svg") top center no-repeat;
  transition: 0.2s;
}

#procsnami .sld-block:hover,
.emblem:hover,
.sld-block:hover,
section.grid-blocks article.block:hover {
  transform: translate(0, -10px);
}

.emblem img {
  width: 85%;
  transition: 0.75s;
}

.emblem:hover img {
  transform: translate(0, -6px);
}

.content_width {
  width: 100%;
  max-width: 1600px;
}

header.document_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  font-size: 1rem;
}

header.document_header.scroll::after {
  height: 50px;
}

header.document_header.scroll nav.project_main_nav > .menuicon {
  font-size: 1.5rem;
  margin-top: 0;
  margin-left: 0;
}

header.document_header.scroll nav.project_main_nav > a.emblem {
  top: -40px !important;
}

header.document_header.scroll nav.project_main_nav > a.emblem.hovered {
  transform: translate(0, 0);
  top: 0 !important;
}

header.document_header.scroll nav.project_main_nav > a.emblem img {
  transform: translate(0, 12px);
}

header.document_header.scroll nav.project_main_nav > a.emblem.hovered img,
nav.project_main_nav .menu_cont.active {
  transform: translate(0, 0);
}

header.document_header > .overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100svh;
  background: var(--grey-clr);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

header.document_header.active > .overlay {
  opacity: 0.8;
  pointer-events: all;
  transition: 0.2s;
  cursor: pointer;
}

header.document_header.active > .overlay:hover {
  opacity: 0.4;
}

header.document_header > * {
  position: relative;
  z-index: 1;
}

header.document_header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--green-clr);
  z-index: 0;
  border-bottom: 1px var(--white-clr) solid;
  transition: 0.2s;
  transform: translate(0, -100%);
}

.animation header.document_header::after {
  animation: 0.75s ease-out 0.75s forwards loadnav;
}

@keyframes loadnav {
  from {
    transform: translate(0, -100%);
  }

  to {
    transform: translate(0, 0);
  }
}

@keyframes Emblem {
  from {
    opacity: 1;
    transform: translate(0, -75%);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes Navigation {
  from {
    opacity: 0;
    transform: translate(0, 50%);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

nav.project_main_nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

nav.project_main_nav a.emblem {
  margin-left: 0;
  transition: 0.5s;
  transform: translate(0, -100px);
  position: relative;
}

.animation nav.project_main_nav a.emblem {
  animation: 1s ease-out 0.25s forwards loademblem;
}

@keyframes loademblem {
  from {
    transform: translate(0, -100px);
  }

  to {
    transform: translate(0, 0);
  }
}

nav.project_main_nav > .menuicon {
  margin-right: 0;
  margin-top: 4px;
  position: absolute;
}

nav.project_main_nav .menuicon {
  display: flex;
  font-family: "Gentium Basic", serif;
  font-size: 2rem;
  padding: 0.5rem 40px 0.5rem 0.5rem;
  cursor: pointer;
  color: var(--white-clr);
  position: relative;
  transition: 0.55s;
  top: 0;
  right: 1.5%;
}

nav.project_main_nav .menuicon.close {
  padding-right: 0.5rem;
  padding-left: 40px;
}

nav.project_main_nav .menuicon.close span {
  position: absolute;
  top: 50%;
  left: 0;
}

nav.project_main_nav .menuicon.close span::after,
nav.project_main_nav .menuicon.close span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(0) translate(0, -50%);
  width: 20px;
  height: 2px;
  background: var(--white-clr);
  transition: 0.2s;
}

nav.project_main_nav .menuicon.close:hover span::before {
  width: 25px;
}

nav.project_main_nav .menu_cont .menuicon.close {
  margin-left: 0;
  width: 40px;
  overflow: hidden;
  color: transparent;
  height: 40px;
  user-select: none;
}

nav.project_main_nav .menu_cont .menuicon.menu {
  margin-right: 0;
  cursor: auto;
}

nav.project_main_nav .menuicon.menu span {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  width: 25px;
  height: 2px;
  background: var(--white-clr);
  transition: 0.2s;
}

nav.project_main_nav .menuicon.menu::after,
nav.project_main_nav .menuicon.menu::before {
  content: "";
  position: absolute;
  top: 35%;
  right: 5px;
  transform: translate(0, -50%);
  width: 20px;
  height: 2px;
  background: var(--white-clr);
  transition: 0.2s;
  pointer-events: none;
}

nav.project_main_nav .menuicon.menu:hover::after,
nav.project_main_nav .menuicon.menu:hover::before {
  width: 25px;
  right: 0;
}

nav.project_main_nav .menu_cont .menuicon.menu:hover::after,
nav.project_main_nav .menu_cont .menuicon.menu:hover::before {
  width: 20px;
  transform: rotate(90deg);
}

nav.project_main_nav .menu_cont .menuicon.menu:hover span {
  transform: rotate(180deg);
  background: 0 0;
}

nav.project_main_nav .menu_cont .menuicon.menu:hover span::after {
  content: "";
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translate(-90%, 0) rotate(230deg);
  width: 5px;
  height: 5px;
  border-right: 2px var(--white-clr) solid;
  border-bottom: 2px var(--white-clr) solid;
}

nav.project_main_nav .menuicon.menu::after {
  top: 66%;
}

nav.project_main_nav .menuicon .menu {
  display: flex;
  font-family: "Gentium Basic", serif;
  font-size: 2.25rem;
  padding: 0.5rem;
  cursor: pointer;
}

nav.project_main_nav .menu_cont {
  position: fixed;
  top: 0;
  right: 0;
  height: 100svh;
  width: 650px;
  background-color: var(--grey-clr);
  padding: 20px 3rem 0;
  color: var(--white-clr);
  transform: translate(100%, 0);
  transition: 0.25s;
  background: url("../images/jak-to-funguje.jpg") center center/cover no-repeat;
}

nav.project_main_nav .menu_cont::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.75;
  background: var(--black-clr);
  z-index: 1;
}

#procsnami > *,
.container > *,
article.form > *,
footer.project_footer > *,
nav.project_main_nav .menu_cont > *,
section.greensec > *,
section.jaktofunguje_clanek > .content_width {
  position: relative;
  z-index: 2;
}

section.diagram,
section.diagram > *,
section.dobrocinost_cont {
  z-index: 4;
  position: relative;
}

footer.project_footer ul.footer_nav li:last-of-type,
form.assets label span.lbl-title,
nav.project_main_nav .menu_cont .emblem {
  margin: 0;
}

nav.project_main_nav .menu_cont .header {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 0;
}

nav.project_main_nav .menu_cont ul.main_ul {
  color: var(--white-clr);
  text-align: right;
  font-family: "Gentium Basic", serif;
  margin-right: 0;
  padding-top: 80px;
}

nav.project_main_nav .menu_cont ul.main_ul * {
  font-family: inherit;
}

nav.project_main_nav .menu_cont ul.main_ul li,
section.kontakty_cont article.card ul li {
  list-style-type: none;
}

nav.project_main_nav .menu_cont ul.main_ul li a {
  display: inline-block;
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin: 0.5rem 0;
  font-size: 2.55rem;
  position: relative;
  transition: 0.2s;
  text-decoration: none;
  color: inherit;
}

nav.project_main_nav .menu_cont ul.main_ul li a:hover {
  padding-right: 20px;
}

nav.project_main_nav .menu_cont ul.main_ul li a:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: rotate(-45deg) translate(0, -50%);
  border-left: 2px var(--white-clr) solid;
  border-top: 2px var(--white-clr) solid;
  width: 5px;
  height: 5px;
  transition: 0.2s;
}

section.main_section {
  width: 100%;
  height: auto;
  position: relative;
  background-image: url("../images/owl-financial-broker-o-spolecnosti.jpg");
  background-position: top 0 center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.2s;
  padding-top: 140px;
}

section.main_section.header {
  min-height: 100svh;
}

section.main_section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--grey-clr);
  opacity: 0.75;
  z-index: 1;
}

@keyframes showCont {
  from {
    opacity: 0;
    background-position: top -15% center;
  }

  to {
    opacity: 1;
    background-position: top 0 center;
  }
}

.animation section.main_section {
  animation: 1.25s ease-out forwards showCont;
}

section.main_section#index {
  min-height: 900px;
}

section.main_section.spoluprace {
  padding-bottom: 75px;
  min-height: 900px;
}

section.main_section.spolupraceform {
  min-height: 550px;
  padding-top: 75px;
}

section.main_section article.main_article p {
  font-size: 1.15rem;
  margin-bottom: 2rem;
}

section.main_section.onas {
  background-image: url("../images/o-nas-owl-financni-poradenstvi.jpg");
  background-size: cover;
  height: auto;
  max-height: none;
  padding-bottom: 5rem;
}

section.main_section.onas.page {
  background-image: url("../images/owl-financial-broker-dan-sova-generalni-reditel.jpg");
}

.sld-block .textbtn,
section.main_section.onas .textbtn {
  margin: 0 auto;
}

section.main_section.onas::after {
  opacity: 0.87;
  background: var(--white-clr);
}

section.main_section.onas.page::after {
  opacity: 0.6;
  background: var(--green-clr);
}

section.main_section.videa {
  height: auto;
  min-height: 730px;
  background-image: url("../images/financni-poradce-video.jpg");
}

section.main_section.dobrocinost > .content_width,
section.main_section.videa > .content_width {
  align-items: flex-start;
}

section.main_section.sluzby {
  height: auto;
  min-height: 730px;
  background-image: url("../images/sluzby.jpg");
}

section.main_section.benefity {
  height: auto;
  min-height: 730px;
  background-image: url("../images/nabizene-sluzby.jpg");
}

section.main_section.green::after {
  background: var(--green-clr);
}

section.main_section.jaktofunguje {
  height: auto;
  min-height: 930px;
  background-image: url("../images/owl-danielson-header.jpg");
}

section.main_section.dobrocinost {
  height: auto;
  min-height: 900px;
  background-image: url("../images/owl-financial-broker-charita.jpg");
}

section.main_section.kontakty {
  height: auto;
  min-height: 280px;
  background-image: none;
}

section.main_section.kontakty section.odkazy {
  transform: translate(0, 50px);
  width: 100%;
}

section.main_section.kontakty section.odkazy .quick_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: inherit;
}

section.main_section.kontakty section.odkazy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  background-color: var(--green-clr);
  height: 2px;
  width: 100%;
  z-index: -1;
}

section.main_section.kontakty section.odkazy a {
  transition: 0.2s;
  display: flex;
  text-decoration: none;
  padding: 0 0.5rem;
  margin: 0;
  background-color: var(--white-clr);
}

section.main_section.kontakty section.odkazy a img {
  height: 30px;
  transition: 0.2s;
}

footer.project_footer ul.socmedia li a:hover img,
section.diagram > article.cont .block:hover > *,
section.main_section article.main_article section.quick_nav a:hover img,
section.main_section.kontakty section.odkazy a:hover img {
  transform: translate(0, -5px);
}

section.greensec > article section.video iframe,
section.main_section[data-clanek] {
  height: 550px;
}

section.main_section .cont,
section.main_section.dobrocinost > .content_width,
section.main_section.jaktofunguje > .content_width,
section.main_section.kontakty > .content_width,
section.main_section.onas > .content_width,
section.main_section.sluzby > .content_width,
section.main_section.videa > .content_width,
section.main_section[data-clanek] > .content_width {
  height: inherit;
  min-height: inherit;
}

section.main_section .cont {
  display: flex;
  max-height: inherit;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 2;
  position: relative;
  position: relative;
  z-index: 2;
}

section.main_section#index .cont {
  padding-top: 90px;
}

@keyframes HeaderArticle {
  from {
    opacity: 0;
    transform: translate(0, 12%);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

section.main_section article.main_article {
  width: 80%;
  transition: 0.1s;
  line-height: 1.5;
  transform: translate(0, 25%);
  text-align: center;
  max-width: 1130px;
  color: var(--white-clr);
}

section.main_section.onas article.main_article {
  color: var(--grey-clr);
  padding: 300px 0 2rem;
}

.animation section.main_section article.main_article {
  animation: 2s ease-out forwards HeaderArticle;
}

section.main_section article.main_article .textbtn {
  margin: 1rem auto 0;
}

.animation section.main_section article.main_article span.arrow {
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
  border-bottom: 2px var(--white-clr) solid;
  border-left: 2px var(--white-clr) solid;
  transform: rotate(-45deg);
  color: transparent;
  user-select: none;
  transition: 0.2s;
}

.container.green,
.flex-blocks .block:nth-last-of-type(odd),
article.sluzby article.form p,
header.document_header.white,
section.benefity_cont > header,
section.greensec,
section.main_section.onas.page article.main_article h1,
section.video {
  color: var(--white-clr);
}

.animation section.main_section article.main_article span.arrow:hover {
  transform: translate(0, 5px) rotate(-45deg);
}

section.benefity_cont .benefit .main ul li:last-of-type,
section.benefity_cont .benefit:last-of-type,
section.clanek_container article.clanek_body p:last-of-type,
section.dobrocinost_cont > article p:last-of-type,
section.error_404 article.content p:last-of-type,
section.main_section article.main_article p:last-of-type {
  margin-bottom: 0;
}

section.main_section article.main_article h1 {
  font-family: "Gentium Basic", serif;
  line-height: 1.3;
  font-size: 4.4rem;
  padding-bottom: 1.5rem;
}

section.main_section article.main_article span.date {
  padding: 0.5em 0.5em 0.5em 27px;
  background-image: url(../images/calendar-icon-green.svg);
  background-position: left center;
  background-size: 20px;
  background-repeat: no-repeat;
}

section.main_section article.main_article section.quick_nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--green-clr);
  margin: 2rem 0;
}

section.main_section article.main_article section.quick_nav a {
  margin: 0 0.5em 0 0;
}

section.main_section article.main_article section.quick_nav a img {
  height: 25px;
  margin: 0;
  transition: 0.2s;
}

section.articles {
  display: block;
}

section.articles article {
  margin-left: 0;
  transition: 0.25s;
  width: 100%;
  max-width: 740px;
}

section.articles article h2 {
  font-size: 2rem;
  font-size: normal;
  transition: 0.25s;
}

section.articles article p {
  padding: 0 0 1rem;
  line-height: 1.5;
  transition: 0.55s;
}

section.articles article:hover h2,
section.articles article:hover p {
  transform: translate(0.25rem, 0);
}

section.historie {
  position: relative;
  background: url("../images/historie-owl-danielson.jpg") top left/cover no-repeat;
  text-align: center;
}

section.historie::before {
  content: "";
  position: absolute;
  opacity: 0.8;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: var(--white-clr);
}

section.historie article p {
  margin-bottom: 1rem;
}

section.historie .timeline {
  -webkit-box-shadow: 0 0 43px -9px #c7c7c7;
  -moz-box-shadow: 0 0 43px -9px #c7c7c7;
  box-shadow: 0 0 43px -9px #c7c7c7;
  padding: 2.25rem;
  text-align: justify;
  line-height: 1.5;
  transform: translate(0, -2.5%);
  background-color: var(--white-clr);
  max-width: 680px;
  position: inherit;
  z-index: 2;
}

section.greensec {
  width: 100%;
  position: relative;
  background: url("../images/owl-danielson-financial-broker.jpg") top center/cover no-repeat;
}

section.greensec::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--green-clr);
  z-index: 1;
  opacity: 0.9;
}

section.greensec > article {
  text-align: center;
  padding-bottom: 2rem;
}

section.greensec > article .textbtn {
  margin: 3rem auto 0 !important;
}

section.greensec > article > header {
  padding: 5em 0;
}

section.greensec > article > header h2 {
  max-width: 45%;
}

section.greensec > article > a.btn {
  margin: 4em 0;
}

section.greensec > article section.video {
  max-width: 1130px;
  width: 90%;
  -webkit-box-shadow: 0 0 45px -7px rgba(10, 10, 10, 0.19);
  -moz-box-shadow: 0 0 45px -7px rgba(10, 10, 10, 0.19);
  box-shadow: 0 0 45px -7px rgba(10, 10, 10, 0.19);
}

section.benefity_cont .cont {
  position: relative;
  z-index: 2;
  transform: translate(0, -2rem);
  max-width: 1180px;
}

section.benefity_cont .benefit {
  width: 100%;
  margin: 0 0 3rem;
  position: relative;
  padding: 2rem 1rem 2rem calc(1rem + 10px);
  -webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  background: var(--white-clr);
}

section.benefity_cont .benefit .info-cont {
  width: 50%;
  margin: 0 auto 0 0;
}

section.benefity_cont .benefit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0%;
  width: 6px;
  background: var(--green-clr);
  transition: 0.25s;
}

section.benefity_cont .benefit:hover::before {
  height: 100%;
}

section.benefity_cont > header {
  padding: 2.5rem 1rem;
  text-align: center;
  transform: translate(0, -100%);
}

section.benefity_cont > header h2 {
  font-size: 1.55rem;
}

section.benefity_cont .benefit h3 {
  font-size: 1.45rem;
}

footer.project_footer > article:first-of-type a.btn,
section.benefity_cont .benefit .main {
  margin-top: 1rem;
}

section.benefity_cont .benefit .main ul {
  padding: 0 0 0 20px;
}

section.benefity_cont .benefit .main ul li {
  list-style-type: none;
  position: relative;
  margin-bottom: 0.5rem;
}

section.benefity_cont .benefit .main ul li::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  border-bottom: 5px var(--grey-clr) solid;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transform: translate(-150%) rotate(90deg);
}

section.benefity_cont .benefit .main ul li a {
  text-decoration: none;
  color: var(--green-clr);
}

section.benefity_cont .benefit footer {
  padding-top: 1rem;
}

section.benefity_cont .benefit footer p {
  font-size: 1.5rem;
  font-weight: 500;
}

section.benefity_cont .benefit .video-cont {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 515px;
  z-index: 3;
  overflow: hidden;
}

section.benefity_cont .benefit .video-cont iframe {
  height: 100%;
  width: 100%;
}

section.video {
  background-color: var(--green-clr);
  padding: 1.5em;
}

section.video header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 1.5em;
}

section.video header h5 {
  margin-left: 0;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: left;
}

section.video header span.date {
  margin: 0;
  display: inline-block;
  padding-left: 25px;
  background: url("../images/calendar-icon-white.svg") center left no-repeat;
}

section.video iframe {
  width: 100%;
  height: 350px;
}

article.form {
  position: relative;
  background: url("../images/proc-prave-owl-financial-broker.jpg") bottom center/cover no-repeat;
  color: var(--grey-clr);
  padding: 5rem 0;
  text-align: center;
}

article.form::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.75;
  background: var(--white-clr);
}

article.form form {
  max-width: 750px;
}

form .errorcnt {
  color: #ffa3a3;
  letter-spacing: 1px;
}

form.form.spoluprace {
  padding-bottom: 2rem;
  background-color: var(--form-green);
  padding: 0 4rem 2rem 4rem;
  max-width: 960px;
}

form.form.spoluprace input[type="text"],
form.form.spoluprace input[type="email"],
form.form.spoluprace input[type="number"],
form.form.spoluprace textarea {
  background-color: var(--white-clr) !important;
}

form.form fieldset.inputs {
  border: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.75rem;
}

form.form > h3 {
  text-align: center;
  display: block;
  width: 100%;
  padding: 2rem 0;
}

form.form fieldset .row {
  width: 100%;
  position: relative;
  user-select: none;
  font-size: 1.3rem;
  min-height: 60px;
  max-height: 60px;
}

form.form fieldset .row:last-of-type {
  grid-column: 1/-1;
}

form.form .row.textarea {
  width: 100%;
  position: relative;
  margin: 1.75rem 0;
  font-size: 1.3rem;
}

form.form fieldset.submit {
  margin-top: 2rem;
}

form.form input[type="email"],
form.form input[type="number"],
form.form input[type="text"],
form.form textarea {
  padding: 1rem;
  width: 100%;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
  border: none;
  background-color: var(--gray-clr);
  color: inherit;
  user-select: all;
  font-size: inherit;
  display: block;
  height: 100%;
  appearance: textfield;
  user-select: inherit;
}

form.form input[type="email"]::placeholder,
form.form input[type="number"]::placeholder,
form.form input[type="text"]::placeholder,
form.form textarea::placeholder {
  color: transparent;
  visibility: hidden;
}

form.form .row.textarea label,
form.form fieldset .row label {
  position: absolute;
  display: block;
  z-index: 2;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  padding: 1rem;
  pointer-events: none;
  font-size: inherit;
  font-weight: 400;
  transition: 0.2s;
}

form.form .row.textarea label {
  top: 0;
  transform: translate(0, 0);
}

form.form .row.textarea label.focused,
form.form .row.textarea textarea:focus + label {
  transform: translate(0, -50%);
  font-size: 90%;
}

form.form textarea {
  height: 300px;
  min-width: 100%;
  max-width: 100%;
  grid-column: 1/-1;
}

article.sluzby {
  width: 100%;
  position: relative;
  background: url("../images/financni-poradenstvi-owl-financial-brokerjpg.jpg") top center/cover no-repeat;
  z-index: 4;
  height: auto;
  padding-bottom: 250px;
}

article.sluzby::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 265px;
  z-index: 3;
  background: url("../images/white-shape.svg") center top/cover no-repeat;
}

article.sluzby::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: var(--green-clr);
  opacity: 0.75;
}

article.sluzby > .content_width {
  display: flex;
  transform: translate(0, -180px);
  position: relative;
  z-index: 3;
}

article.sluzby section.sluzby_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  width: 100%;
  opacity: 0;
  transform: translate(0, 25%);
}

.blocks-3,
section.roviny > .cont {
  grid-template-columns: repeat(2, 1fr);
}

.animation article.sluzby section.sluzby_container {
  animation: 0.75s ease-out 0.9s forwards showcontent;
}

@keyframes showcontent {
  from {
    opacity: 0;
    transform: translate(0, 25%);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

article.sluzby section.sluzby_container h2 {
  grid-column: 1/-1;
  color: var(--white-clr);
  transform: translate(0, -100%);
  text-align: center;
}

article.sluzby section.sluzby_container article {
  padding: 2rem;
  width: 100%;
  transition: 0.2s;
  background-color: var(--white-clr);
}

article.sluzby section.sluzby_container article:hover {
  -webkit-box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.53);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.53);
  transform: translate(0, -10px);
}

article.sluzby section.sluzby_container article h3 {
  padding-left: 50px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 30px;
}

article.sluzby section.sluzby_container article.pojisteni h3 {
  background-image: url("../images/pojiosteni.svg");
}

article.sluzby section.sluzby_container article.hypoteky h3 {
  background-image: url("../images/hypoteka.svg");
  background-size: 40px;
}

article.sluzby section.sluzby_container article.investice h3 {
  background-image: url("../images/investice.svg");
}

article.sluzby section.sluzby_container article.reality h3 {
  background-image: url("../images/nemovitost.svg");
  background-size: 40px;
}

article.sluzby section.sluzby_container article ul {
  margin-top: 1.3rem;
}

article.sluzby section.sluzby_container article ul li {
  list-style-type: none;
  position: relative;
  padding: 0.5em 0.5em 0.5em 20px;
}

article.sluzby section.sluzby_container article ul li::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: 4px;
  height: 4px;
  border-top: 1.5px var(--green-clr) solid;
  border-right: 1.5px var(--green-clr) solid;
  transform: rotate(45deg);
}

article.sluzby article.form {
  width: 40%;
  background-color: var(--green-clr);
  padding: 3rem;
}

article.sluzby article.form p {
  margin-bottom: 2rem;
  line-height: 1.5;
}

article.sluzby article.form form {
  background-color: var(--white-clr);
  padding: 3rem;
}

article.sluzby article.form form h3 {
  padding-bottom: 3rem;
}

article.sluzby article.form form span.subtitle {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  display: block;
}

form.assets fieldset {
  border: none;
  width: 100%;
}

form.assets fieldset.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

form.assets fieldset.submit > label {
  width: 100%;
  margin-bottom: 1.5rem;
  font-weight: 300;
}

form.assets fieldset.submit label a {
  color: inherit;
  text-decoration: none;
}

article.sluzby article.form form fieldset.submit,
form.assets label.checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

form.assets fieldset.submit label a:hover {
  text-decoration: underline;
}

form.assets label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

span.check {
  display: inline-block;
  width: 40px;
  height: 15px;
  background: var(--input-bg-clr);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  margin-left: 0;
  margin-right: 1rem;
}

span.check::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1100%;
  height: 100%;
  background-color: transparent;
  transition: 0.2s;
}

span.check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: var(--lgrey-clr);
  transition: 0.2s;
  -webkit-box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.55);
  box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.55);
}

input:checked + span::before {
  background-color: var(--dgreen-clr);
}

input:checked + span.check::after {
  left: 100%;
  transform: translate(-100%, -50%);
  background: var(--white-clr);
}

form.assets fieldset input[type="email"],
form.assets fieldset input[type="password"],
form.assets fieldset input[type="text"],
form.assets fieldset textarea {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: currentcolor;
  padding: 1em;
  margin-bottom: 3%;
  color: inherit;
}

form.assets fieldset input[type="button"],
form.assets fieldset input[type="submit"] {
  border: none;
  padding: 1.25em 2em;
  color: var(--white-clr);
  background: var(--green-clr);
  border-radius: 50px;
  text-transform: uppercase;
  pointer-events: all;
  cursor: pointer;
}

form.assets fieldset input[type="button"].unable,
form.assets fieldset input[type="submit"].unable {
  background: var(--dgreen-clr);
  opacity: 0.55;
  pointer-events: none;
}

article.sluzby article.form form fieldset textarea {
  width: 100%;
}

article.sluzby article.form form fieldset.submit input {
  margin-left: 0;
  margin-right: 2rem;
}

article.sluzby article.form form fieldset.submit span {
  margin-left: 0;
}

section.main_section.jaktofunguje article.main_article {
  max-width: 600px;
}

section.diagram {
  text-align: center;
}

section.diagram::after,
section.diagram::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1280px;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: url("../images/owl-financial-broker-kontakt.jpg") center bottom;
}

section.diagram::after {
  z-index: 2;
  background: var(--white-clr);
  opacity: 0.87;
}

section.diagram > h2 {
  position: absolute;
  color: var(--white-clr);
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  text-align: center;
  transform: translate(0, -255px);
}

section.diagram > header {
  position: relative;
  color: var(--white-clr);
  padding: 2rem 0;
  z-index: 1;
}

section.diagram > header h2 {
  padding: 0 30%;
  width: 100%;
  background-color: inherit;
  color: var(--grey-clr);
  transform: translate(0, -70px);
}

section.diagram > header h2::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  height: 300px;
  background-color: inherit;
  z-index: -1;
}

section.diagram > article.cont {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem;
  width: 80%;
  text-align: left;
  transform: translate(0, 160px);
}

section.diagram > article.cont header {
  width: 100%;
  transform: translate(0, -110px);
}

section.diagram > article.cont header h2 {
  width: 60%;
  text-align: center;
}

section.diagram > article.cont .points {
  display: grid;
  grid-template-areas: "sest jedna dva" "pet ctyri tri";
  height: 1080px;
  max-width: 940px;
  flex-wrap: wrap;
}

section.diagram > article.cont .block {
  width: 100%;
  margin: 0;
  padding: 92px 1rem 1rem;
  position: relative;
  text-align: center;
  height: 325px;
}

section.diagram > article.cont .block:first-child {
  grid-area: jedna;
}

section.diagram > article.cont .block:nth-child(2) {
  grid-area: dva;
  transform: translate(0, 35%);
}

section.diagram > article.cont .block:nth-child(3) {
  grid-area: tri;
  transform: translate(0, -35%);
}

section.diagram > article.cont .block:nth-child(4) {
  grid-area: ctyri;
}

section.diagram > article.cont .block:nth-child(5) {
  grid-area: pet;
  transform: translate(0, -35%);
}

section.diagram > article.cont .block:nth-child(6) {
  grid-area: sest;
  transform: translate(0, 35%);
}

section.diagram > article.cont .block span.num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 2rem;
  font-size: 3rem;
  font-weight: 500;
  transition: 0.25s;
  font-family: "Gentium Basic", serif;
}

section.diagram > article.cont .block:hover span.num {
  transform: translate(-50%, -5px);
}

section.diagram > article.cont .block h3 {
  margin-bottom: 2rem;
  transition: 0.55s;
}

section.diagram > article.cont .block p {
  line-height: 1.5;
  color: var(--grey-clr);
  transition: 0.75s;
}

section.roviny {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
}

section.roviny header {
  width: 100%;
  text-align: center;
  transform: translate(0, -90px);
  color: var(--white-clr);
}

.flex-blocks .block.s50,
section.roviny header h2 {
  width: 50%;
}

section.roviny > .cont {
  display: grid;
  grid-gap: 2rem;
  transition: 0.3s;
}

section.roviny > .cont:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

section.roviny article.cont {
  width: 100%;
  padding: 5.5rem 2.5rem;
  background-color: var(--white-clr);
  transition: 0.35s;
  z-index: 2;
  position: relative;
  text-align: left;
  -webkit-box-shadow: 0 0 29px -8px #858585;
  -moz-box-shadow: 0 0 29px -8px #858585;
  box-shadow: 0 0 29px -8px #858585;
}

section.roviny article.cont:hover {
  background-color: #005c3a;
  color: var(--white-clr);
}

section.roviny article.cont:hover * {
  color: var(--white-clr) !important;
}

section.roviny article.cont h3 {
  height: 120px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 0.75em;
}

.container .slider p,
footer.project_footer > article p,
section.roviny article.cont p {
  line-height: 1.5;
}

section.roviny article.cont a {
  cursor: pointer;
  padding: 0.5rem 1rem;
  display: flex;
  border: 1px var(--white-clr) solid;
  width: fit-content;
  margin: 1rem 0 0 auto;
  transform: translate(100%, 0);
  opacity: 0;
  transition: 0.2s;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
}

section.roviny article.cont.kompletni a {
  margin: 1rem auto 0 0;
  position: absolute;
  bottom: 2rem;
  right: unset;
  left: 2rem;
  transform: translate(-100%, 0);
}

section.roviny article.cont:hover a {
  transform: translate(0, 0);
  opacity: 1;
}

section.roviny article.cont.produkt {
  text-align: right;
}

section.roviny article.cont.produkt h3 {
  padding: 1rem 100px 1rem 1rem;
  background: url("../images/konkretni-produkt.svg") right center/65px no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

section.roviny article.cont.kompletni h3 {
  padding: 1rem 1rem 1rem 100px;
  background: url("../images/komplexni-reseni.svg") left center/55px no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

section.jaktofunguje_clanek {
  position: relative;
  z-index: 1;
  background: url("../images/jak-to-funguje-owl.jpg") bottom center/cover no-repeat;
  padding: 5rem 0;
  text-align: center;
  color: var(--white-clr);
}

section.jaktofunguje_clanek::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--green-clr);
  z-index: 1;
  opacity: 0.6;
}

section.jaktofunguje_clanek > .content_width div.cont {
  width: 80%;
  text-align: left;
  display: grid;
  grid-template-areas: "prvni druhy" "treti .";
  grid-gap: 2rem;
}

section.jaktofunguje_clanek h2 {
  grid-column: 1/-1;
  margin-bottom: 0.8em;
  text-align: left;
  width: 80%;
}

section.jaktofunguje_clanek p {
  width: 100%;
  line-height: 1.5;
  height: auto;
  margin: 0 2rem 2rem 0;
}

section.jaktofunguje_clanek p:first-child {
  grid-area: prvni;
}

section.jaktofunguje_clanek p:nth-child(2) {
  grid-area: treti;
}

section.jaktofunguje_clanek p:nth-child(3) {
  grid-area: druhy;
}

section.main_section.procsnami {
  background-image: url(../images/proc-prave-owl-financial-broker.jpg);
  background-position: center;
}

section.main_section.procsnami::after {
  background: var(--dgreen-clr);
  text-align: center;
  opacity: 0.6;
}

section.main_section.procsnami article.main_article,
section.main_section.procsnami article.main_article p {
  color: var(--white-clr);
  text-align: center;
  margin-left: auto;
}

footer.project_footer article form span.icon,
section.main_section.procsnami article.main_article h1 {
  margin-bottom: 2rem;
}

section.grid-blocks {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 3;
}

section.grid-blocks .grid-header,
section.grid-blocks .row-btn {
  grid-column: 1/-1;
  padding: 2rem 0;
  margin: 0 auto;
  text-align: center;
  width: 60%;
  line-height: 1.5;
}

#procsnami .sld-block,
section.grid-blocks article.block {
  padding: 2.5rem;
  -webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  background: var(--white-clr);
  font-weight: 300;
  width: 100%;
  color: var(--grey-clr);
  transition: 0.25s;
  position: relative;
}

#procsnami .sld-block,
.sld-block {
  padding: 2.5rem 4rem;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: 0 0;
  color: var(--white-clr);
  transition: 0.25s;
  text-align: center;
  height: 370px;
  position: relative;
}

#procsnami .sld-block::after,
.sld-block::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 92.5%;
  width: 95%;
  transform: translate(-50%, -50%);
  -webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.23);
  pointer-events: none;
  background: var(--green-clr);
  z-index: -1;
}

#procsnami::before,
.container::after,
.flex-blocks .block::before,
article.akce_min > header > a figure::after,
section.video.procsnami::after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
}

#procsnami .sld-block h2,
.sld-block h2,
section.grid-blocks article.block h2 {
  padding: 50px 0 1rem;
  background-position: left top 5px;
  background-repeat: no-repeat;
  background-size: 35px;
  width: 100%;
}

.sld-block h3 {
  padding: 50px 0 2rem;
}

#procsnami .sld-block p,
.sld-block p,
section.grid-blocks article.block p {
  line-height: 1.5;
  margin-bottom: 1rem;
}

#procsnami {
  background: url("../images/owl-danielson-financial-broker.jpg") center center/cover no-repeat fixed;
  position: relative;
  padding: 125px 0;
}

#procsnami::before {
  position: absolute;
  background: var(--white-clr);
  opacity: 0.87;
}

#procsnami .grid-header {
  text-align: center;
  line-height: 1.5;
  max-width: 60%;
  margin-bottom: 75px;
}

section.grid-blocks article.kontakty h2 {
  background-image: url("../images/kontakty-icon.svg");
}

section.grid-blocks article.zkusenosti h2 {
  background-image: url("../images/zkusenosti-icon.svg");
}

section.grid-blocks article.objem h2 {
  background-image: url("../images/objem-icon.svg");
}

section.grid-blocks article.nezavislost h2 {
  background-image: url("../images/nezavislost-icon.svg");
}

section.grid-blocks article.reputacniriziko h2 {
  background-image: url("../images/reputacni-riziko-icon.svg");
}

section.grid-blocks article.rychlost h2 {
  background-image: url("../images/rychlost-icon.svg");
}

section.grid-blocks article.vizualizace h2 {
  background-image: url("../images/vizualizace-icon.svg");
}

section.grid-blocks article.pracovnidoba h2 {
  background-image: url("../images/pracovni-doba-icon.svg");
}

section.grid-blocks article.servis h2 {
  background-image: url("../images/servis-icon.svg");
}

section.video.procsnami {
  padding: 3rem 0;
  background: url("../images/financni-poradenstvi-owl-financial-brokerjpg.jpg") center center/cover no-repeat;
  position: relative;
}

section.video.procsnami::after {
  position: absolute;
  background-color: var(--green-clr);
  opacity: 0.79;
  z-index: 2;
}

section.video.procsnami .cont {
  max-width: 750px;
  width: 80%;
  text-align: center;
  padding: 0 2rem 2rem;
  background-color: var(--dgreen-clr);
  position: relative;
  z-index: 3;
  -webkit-box-shadow: 0 0 15px -1px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 0 0 15px -1px rgba(0, 0, 0, 0.47);
  box-shadow: 0 0 15px -1px rgba(0, 0, 0, 0.47);
}

section.video.procsnami h2 {
  padding: 2rem 0;
  font-size: 1.95rem;
}

section.dobrocinost_cont > article {
  background-color: var(--green-clr);
  color: var(--white-clr);
  padding: 3rem;
  width: 60%;
  margin-left: 0;
  transform: translate(0, -300px);
  transition: 0.2s;
}

section.dobrocinost_cont > article p {
  line-height: 1.5;
  margin-bottom: 2rem;
}

section.akce_vypis {
  text-align: center;
  position: relative;
  z-index: 5;
}

section.akce_vypis > header {
  transform: translate(0, -175px);
}

section.akce_vypis > header h2 {
  width: 30%;
  text-align: center;
}

section.akce_vypis > .content_width {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  transform: translate(0, -100px);
}

article.akce_min {
  width: 100%;
  transition: 0.2s;
  padding: 2rem;
  text-align: left;
}

article.akce_min:hover {
  -webkit-box-shadow: 0 0 29px -8px rgb(133 133 133);
  -moz-box-shadow: 0 0 29px -8px #858585;
  box-shadow: 0 0 29px -8px rgb(133 133 133);
}

article.akce_min > header > a figure {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

article.akce_min > header > a figure::after {
  position: absolute;
  background-color: var(--green-clr);
  opacity: 0.6;
  transition: 0.3s;
}

article.akce_min:hover header > a figure::after {
  opacity: 0;
  top: -10%;
  transform: scale(0.8);
}

article.akce_min > header > a figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article.akce_min > header span.date {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: var(--white-clr);
  transition: 0.2s;
}

article.akce_min:hover header span.date {
  opacity: 0;
  top: 60%;
  pointer-events: none;
}

article.akce_min h3 {
  padding: 2rem 0 0;
}

section.main_section.kontakty article.main_article {
  text-align: center;
  width: 100%;
}

.flex-blocks .block.s40,
section.main_section.kontakty article.main_article h1 {
  width: 40%;
}

section.kontakty_cont {
  position: relative;
  width: 100%;
  background: url("../images/owl-financial-broker-kontakt.jpg") top center/cover no-repeat;
  min-height: 1050px;
}

section.kontakty_cont > .content_width {
  position: relative;
  min-height: inherit;
}

section.kontakty_cont article.card {
  background-color: var(--green-clr);
  color: var(--white-clr);
  padding: 3rem;
  width: 28%;
  height: fit-content;
  -webkit-box-shadow: 0 0 29px -8px #858585;
  -moz-box-shadow: 0 0 29px -8px #858585;
  box-shadow: 0 0 29px -8px #858585;
  position: absolute;
  bottom: 10%;
}

section.kontakty_cont article.card:first-of-type {
  text-align: right;
  left: 10%;
}

section.kontakty_cont article.card:last-of-type {
  text-align: left;
  right: 10%;
}

section.kontakty_cont article.card header span.role {
  font-size: 1.6rem;
}

section.kontakty_cont article.card ul {
  padding-top: 2rem;
}

section.kontakty_cont article.card ul li a {
  color: var(--white-clr);
  text-decoration: none;
}

.blocks-3 {
  display: grid;
  grid-gap: 1rem;
  line-height: 1.75;
}

.blocks-3 article {
  background: var(--white-clr);
  padding: 1.75rem;
  -webkit-box-shadow: 0 0 12px -1px #c9c9c9;
  -moz-box-shadow: 0 0 12px -1px #c9c9c9;
  box-shadow: 0 0 12px -1px #c9c9c9;
  transform: translate(0, -50px);
}

.blocks-3 article p {
  margin-bottom: 1.25rem;
}

.blocks-3 article:last-of-type {
  grid-column: 1/-1;
  text-align: center;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-width: 60%;
  transform: translate(0, -25px);
}

.container {
  position: relative;
  background-image: url("../images/financni-poradenstvi-s-owl-financial-broker.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.container::after {
  position: absolute;
  background: var(--white-clr);
  z-index: 1;
  opacity: 0.87;
}

.container.green::after {
  background: var(--green-clr);
  opacity: 0.75;
}

.flex-blocks .block::before,
.slider button {
  background: var(--white-clr);
  position: absolute;
}

.container h2 {
  text-align: center;
  padding: 175px 0 5rem;
  max-width: 850px;
}

section.clanek_container {
  display: flex;
  flex-wrap: wrap;
  padding: 3rem 0 0;
}

section.clanek_container article.clanek_body {
  width: 65%;
  padding: 3rem;
  -webkit-box-shadow: 0 0 22px -7px rgb(0 0 0 / 42%);
  -moz-box-shadow: 0 0 22px -7px rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 22px -7px rgb(0 0 0 / 42%);
}

section.clanek_container article.clanek_body h2,
section.clanek_container article.clanek_body p {
  margin-bottom: 3rem;
}

section.clanek_container article.clanek_body a {
  color: var(--green-clr);
  cursor: pointer;
}

section.clanek_container article.clanek_body a:hover {
  text-decoration: none;
}

section.clanek_container section.galerie_clanku {
  width: 35%;
  padding: 0 0 0 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  align-items: start;
  height: fit-content;
}

section.clanek_container section.galerie_clanku a[data-gallery] {
  display: flex;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

section.clanek_container section.galerie_clanku figure {
  width: 100%;
  height: 100%;
  margin-bottom: 2rem;
  position: relative;
}

section.clanek_container section.galerie_clanku figure:last-of-type {
  width: 100%;
  margin-bottom: 2rem;
}

section.clanek_container section.galerie_clanku figure img {
  width: 100%;
  height: 100%;
  transition: 0.2s;
  object-fit: cover;
}

section.clanek_container section.galerie_clanku a[data-gallery]:hover img {
  transform: scale(1.1);
}

section.clanek_container section.galerie_clanku a[data-gallery] figcaption {
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 3;
  color: var(--white-clr);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

section.clanek_container section.galerie_clanku a[data-gallery] figcaption::after {
  content: "";
  position: absolute;
  background-color: var(--green-clr);
  opacity: 0.6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

section.clanek_container section.galerie_clanku a[data-gallery]:hover figcaption {
  padding: 2rem;
  opacity: 1;
}

a.button {
  display: inline-block;
  padding: 1rem 2rem;
  color: var(--dgreen-clr);
  border: 2px var(--dgreen-clr) solid;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
  font-weight: 700;
  text-decoration: none;
}

a.button:hover {
  background-color: var(--dgreen-clr);
  color: var(--white-clr);
}

section.error_404 {
  padding: 250px 0 2rem;
  text-align: center;
}

section.error_404 h1 {
  font-size: 3rem;
  color: var(--dgreemn-clr);
  margin-bottom: 1rem;
}

footer.project_footer article.info .col article h4,
section.error_404 article.content p {
  margin-bottom: 0.5rem;
}

section.error_404 article.content span.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 0;
}

.flex-blocks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.flex-blocks .block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  position: relative;
  background-size: cover;
  background-image: url("../images/nabizene-sluzby.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 525px;
  flex-wrap: wrap;
  width: 100%;
}

.flex-blocks .block#benefityproklienty {
  background-image: url("../images/dan-sova-financni-poradenstvi.jpg");
}

.flex-blocks .block.s60 {
  width: 60%;
}

.flex-blocks .block p {
  line-height: 1.5;
  padding-top: 1rem;
}

.flex-blocks .block a.textbtn {
  padding-left: 0;
  margin-top: 2rem;
}

.flex-blocks .block h2 a {
  font-weight: inherit;
}

.flex-blocks .block > * {
  position: relative;
  z-index: 2;
  max-width: 75%;
}

footer.project_footer .flex-blocks .block > * {
  max-width: 100%;
}

.flex-blocks .block::before {
  opacity: 0.87;
  z-index: 1;
}

.flex-blocks .block:nth-last-of-type(odd)::before {
  opacity: 0.75;
  background: var(--green-clr);
}

.slider {
  position: relative;
  width: 100%;
}

.slider button {
  width: 50px;
  height: 50px;
  top: 50%;
  left: 1rem;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 19;
  transition: 0.25s;
  user-select: none;
  color: transparent;
  overflow: hidden;
  border-radius: 50%;
}

.slider button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 10px;
  height: 10px;
  border-top: 2px var(--green-clr) solid;
  border-left: 2px var(--green-clr) solid;
}

.slider button:last-of-type::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

.slider button.unable {
  pointer-events: none;
}

.slider button:last-of-type {
  left: unset;
  right: 1rem;
  transform: translate(50%, -50%);
}

.slider .sld-cont {
  overflow: hidden;
}

.slider .sld-scr {
  display: grid;
}

footer.project_footer {
  display: flex;
  position: relative;
  background: url("../images/footer.jpg") center center/cover no-repeat;
}

footer.project_footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: var(--black-clr);
  opacity: 0.75;
}

footer.project_footer .flex-blocks .block {
  background: 0 0;
}

footer.project_footer header {
  text-align: center;
  color: inherit;
}

footer.project_footer ul.footer_nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  color: inherit;
}

footer.project_footer ul.footer_nav li {
  margin: 0 1.5rem 0 0;
  color: inherit;
  list-style-type: none;
}

footer.project_footer ul.footer_nav li a {
  padding: 0.2rem 0.2rem 0.5rem;
  color: inherit;
  text-decoration: none;
  position: relative;
}

footer.project_footer ul.footer_nav li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(calc(-50% - 0.2rem), 0);
  height: 1px;
  width: 0%;
  background-color: var(--white-clr);
  transition: 0.2s;
}

footer.project_footer ul.footer_nav li a:hover::after {
  width: calc(100% - 0.4rem);
}

footer.project_footer ul.socmedia {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 3rem 0 0;
  position: relative;
  overflow: hidden;
}

footer.project_footer ul.socmedia li {
  list-style-type: none;
  margin: 0 3.95rem 0 0;
  position: relative;
}

footer.project_footer ul.socmedia li a {
  transition: 0.2s;
  display: flex;
  position: relative;
  width: 50px;
  height: 60px;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
}

footer.project_footer ul.socmedia li a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  background-image: url("../images/emblem-mensi.svg");
  background-position: center center;
  background-repeat: no-repeat;
}

footer.project_footer ul.socmedia li a img {
  height: 25px;
  position: relative;
  z-index: 2;
  transition: 0.2s;
}

footer.project_footer > section.content_width.footer {
  display: flex;
  padding: 5rem 0;
}

footer.project_footer article.info {
  display: flex;
  flex-wrap: wrap;
}

footer.project_footer article.info h3 {
  width: 100%;
  text-align: left;
}

footer.project_footer article.info figure {
  width: 100%;
  text-align: center;
}

footer.project_footer article.info figure img {
  max-width: 350px;
  width: 90%;
}

footer.project_footer article.info .col {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

footer.project_footer article.info .col > article {
  width: 50%;
  margin: 0;
}

footer.project_footer h3 {
  margin: 4rem auto 2.5rem;
  font-size: 2.7rem;
}

footer.project_footer article span {
  margin-left: 0;
  width: 100%;
}

footer.project_footer span.title {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  display: block;
  margin-bottom: 1rem;
}

footer.project_footer article span.facebook,
footer.project_footer article span.instagram {
  color: var(--green-clr);
}

footer.project_footer article a,
footer.project_footer article a:hover {
  color: inherit;
  text-decoration: none;
}

footer.project_footer article a {
  transition: 0.2s;
  margin-left: 0;
}

footer.project_footer article ul li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-top: 1px var(--white-clr) solid;
  border-right: 1px var(--white-clr) solid;
  transform: translate(0, -50%) rotate(45deg);
}

footer.project_footer article ul li a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding: 0.5rem 0.5rem 0.5rem 0;
  cursor: pointer;
  position: relative;
}

footer.project_footer article ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--white-clr);
  width: 0%;
  transition: 0.2s;
  transform: translate(0, 0);
}

footer.project_footer article ul li a:hover::after {
  width: calc(100% - 0.5rem);
}

article.gdpr_article {
  color: var(--grey-clr);
  line-height: 1.5;
  width: 75%;
  position: relative;
  z-index: 2;
  padding-top: 140px;
  text-align: justify;
  min-width: 350px;
  max-width: 780px;
}

article.gdpr_article * {
  font-size: 1rem;
}

article.gdpr_article h1 {
  font-size: 2.75rem;
  margin-bottom: 2.5rem;
}

article.gdpr_article ol,
article.gdpr_article ul {
  padding-left: 20px;
  margin: 1rem 0;
}

article.gdpr_article li {
  margin: 1rem 0;
}

article.gdpr_article ul li {
  margin: 0.25rem 0;
  position: relative;
  list-style-type: none;
}

article.gdpr_article ul li::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0;
  transform: translate(-150%, 0) rotate(100grad);
  border-bottom: 5px var(--green-clr) solid;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

article.gdpr_article .button-cont {
  display: block;
  text-align: center;
  margin: 4rem auto;
}

.btn.back {
  padding-left: 35px;
}

.btn.back::after,
.btn.back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%) rotate(-135deg);
  width: 7px;
  height: 7px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  transition: 0.2s;
}

.btn.back::after {
  left: 30px;
  transition: 0.4s;
}

.btn.back:hover::before {
  border-color: var(--black-clr) !important;
  left: 10px;
}

.btn.back:hover::after {
  border-color: var(--black-clr) !important;
  left: 20px;
}

/* Formuláře */

form.form {
  color: var(--black-clr);
}

form.form .comment {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, 1.35rem);
}

.popup-cnt .form {
  max-width: 680px;
}

form.form.double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

form.form fieldset.dropdown .title,
form.form input[type="text"],
form.form input[type="number"],
form.form input[type="date"],
form.form input[type="datetime-local"],
form.form textarea,
form.form input[type="email"] {
  width: 100%;
  padding: 1rem;
  border-radius: 5px;
  background: var(--black-clr);
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--dgreen-clr);
  border: 1px transparent solid;
  font-weight: nomal;
}

form.form fieldset.err,
form.form fieldset.err legend,
form.form input.err,
form.form textarea.err {
  border-color: var(--error-bg-clr) !important;
}

form.form input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

form.form input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

form.form .hidden {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  display: none;
}

form.form textarea {
  min-width: 100%;
  max-height: 680px;
  max-width: 50vw;
  height: 280px;
  min-height: 80px;
}

form.form label {
  position: relative;
  display: block;
}

form.form label .title {
  display: block;
  position: absolute;
  padding: 0.25rem 0.5rem;
  background: transparent;
  top: 0;
  left: 0.5rem;
  transform: translate(0, 50%);
  font-size: 0.9rem;
  transition: 0.25s;
  pointer-events: none;
  border-radius: 3px;
  color: var(--dgreen-clr);
  font-weight: normal;
}

form.form fieldset {
  position: relative;
  border: none;
  color: var(--white-clr);
}

form.form fieldset legend {
  background: transparent;
  color: var(--white-clr);
  padding: 0.25rem;
  text-align: left;
  margin-left: 0;
  border-radius: 3px;
}

form.form fieldset button {
  background: var(--yellow-clr);
  color: var(--black-clr);
}

form.form fieldset.pul {
  width: 100%;
}

form.form fieldset.inner-section.valid {
  grid-template-columns: 1fr 1fr 0.15fr;
}

form.form fieldset.valid [type="button"] {
  width: fit-content;
  border-radius: 5px;
  background: var(--blue-clr) !important;
  color: var(--white-clr);
}

form.form fieldset.is-comment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

form.form fieldset.is-comment label {
  width: 100%;
  margin-left: 0;
}

form.form fieldset.inner-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 5px;
  border: 1px var(--dgreen-clr) solid;
  margin-bottom: 1rem;
}

form.form fieldset.inner-section:last-of-type {
  margin-bottom: 0;
}

form.form fieldset.inner-section.single {
  grid-template-columns: repeat(1, 1fr);
}

form.form fieldset.inner-section > label {
  width: 100%;
  line-height: 1.2;
  display: flex;
}

form.form fieldset.inner-section.tri {
  grid-template-columns: repeat(3, 1fr);
}

form.form fieldset.dropdown {
}

form.form fieldset.dropdown .title {
  display: block;
}

form.form fieldset.footer {
  margin-top: 1rem;
  border: none;
}

form.form .footer-info {
  line-height: 1.25;
  text-align: center;
  max-width: 680px;
  width: 100%;
}

form.form fieldset .focused .title {
  transform: translate(0, -50%);
  top: 0;
  color: var(--white-clr);
  font-size: 0.8rem;
}

form.form fieldset input:focus + .title,
form.form fieldset textarea:focus + .title {
  transform: translate(0, -50%);
  top: 0;
}

form.form fieldset.dropdown .hvr-cnt {
  position: relative;
  width: 100%;
}

form.form fieldset.dropdown .hvr-cnt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-bottom: 8px var(--dgreen-clr) solid;
  border-left: 5px transparent solid;
  border-right: 5px transparent solid;
  transform: translate(200%, -50%) rotate(180deg);
}

form.form fieldset.dropdown.single .hvr-cnt::after {
  transform: translate(-200%, -50%) rotate(180deg);
}

form.form fieldset.dropdown .hvr-cnt > ul {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  width: 100%;
  background-color: var(--black-clr);
  opacity: 0;
  pointer-events: none;
  padding: 0.25rem;
  transition: 0.25s;
}

form.form fieldset.dropdown:hover {
  z-index: 99;
}

form.form fieldset.dropdown .hvr-cnt:hover > ul {
  opacity: 1;
  pointer-events: all;
}

form.form fieldset.dropdown .hvr-cnt > ul li {
  cursor: pointer;
  list-style-type: none;
  cursor: pointer;
  padding: 0.35rem 1rem 0.35rem 1rem;
  margin-bottom: 0.25rem;
}

form.form fieldset.dropdown .hvr-cnt > ul li::after {
  display: none;
}

form.form fieldset.dropdown .hvr-cnt > ul li:last-of-type {
  margin-bottom: 0;
}

form.form fieldset.dropdown .hvr-cnt > ul li:hover {
  background-color: var(--dgreen-clr);
  color: var(--black-clr);
}

form.form span.check {
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 15px;
  background: var(--gray-clr);
  border-radius: 20px;
  margin-right: 1rem;
  position: relative;
  overflow: hidden;
  margin: 0 0.5rem 0 0;
  transform: translate(0, 0.15rem);
}

form.form span.text {
  margin: 0;
  text-align: left;
}

form.form span.check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: var(--white-clr);
  transition: 0.2s;
  -webkit-box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.55);
}

form.form span.check::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--grey-clr);
  transition: 0.2s;
}

form.form input:checked + span.check::before {
  background-color: var(--dgreen-clr);
}

form.form input:checked + span.check::after {
  left: 100%;
  transform: translate(-100%, -50%);
  background-color: var(--white-clr);
}

form.form .footer [type="button"] {
  background-color: var(--dgreen-clr);
  color: var(--black-clr);
  padding: 1rem 2rem;
  border-radius: 50px;
}

form.form a {
  color: inherit;
  text-decoration: underline;
}

form.form a:hover {
  text-decoration: none;
  color: var(--dgreen-clr);
}

.disabled {
  pointer-events: none !important;
  opacity: 0.75 !important;
}

.comment {
  position: relative;
}

.comment:hover {
  z-index: 99;
}

.comment .icon {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px var(--white-clr) solid;
  font-size: 0.75rem;
}

.comment p {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 5px;
  background: rgb(255, 248, 219);
  transform: translate(0, -50%);
  line-height: 1.5;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  min-width: 410px;
  font-size: 0.85rem;
  transition: 0.25s;
  color: var(--primary-grey);
}

.comment.l p {
  transform: translate(-100%, -50%);
}

.comment p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 10px;
  background: transparent;
  transform: translate(-100%, 0);
}

.comment:hover p {
  opacity: 1;
  pointer-events: all;
  transform: translate(0, -50%);
}

.comment.l:hover p {
  transform: translate(-100%, -50%);
}

@media screen and (max-width: 1750px) {
  section.main_section {
    background-size: cover !important;
  }
}

@media screen and (max-width: 1680px) {
  nav.project_main_nav .menu_cont {
    width: 600px;
  }
}

@media screen and (max-width: 1620px) {
  .content_width {
    width: 90%;
  }

  .slider button {
    left: 5rem;
  }

  .slider button:last-of-type {
    right: 5rem;
  }
}

@media screen and (max-width: 1605px) {
  footer.project_footer ul.footer_nav {
    position: absolute;
    top: 2rem;
  }
}

@media screen and (max-width: 1550px) {
  section.main_section.videa {
    background-position: right -150px top;
  }
}

@media screen and (max-width: 1530px) {
  nav.project_main_nav .menu_cont {
    width: 550px;
  }
}

@media screen and (max-width: 1520px) {
  section.main_section.kontakty article.main_article h1,
  section.roviny header h2 {
    width: 60%;
  }
}

@media screen and (max-width: 1480px) {
  section.kontakty_cont article.card {
    width: 370px;
  }
}

@media screen and (max-width: 1445px) {
  footer.project_footer .flex-blocks .block {
    padding: 3rem;
  }

  .slider button {
    left: 4.5rem;
  }

  .slider button:last-of-type {
    right: 4.5rem;
  }
}

@media screen and (max-width: 1430px) {
  article.sluzby > .content_width {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 1395px) {
  article.sluzby section.sluzby_container {
    width: 100%;
  }

  article.sluzby article.form {
    width: 50%;
  }
}

@media screen and (max-width: 1370px) {
  section.clanek_container section.galerie_clanku a[data-gallery] {
    height: 145px;
  }
}

@media screen and (max-width: 1350px) {
  section.diagram article.cont {
    padding: 1rem 1rem 105px;
  }

  section.diagram article.cont:last-of-type {
    text-align: left;
  }

  section.jaktofunguje_clanek h2,
  section.jaktofunguje_clanek > .content_width div.cont {
    width: 90%;
  }

  .flex-blocks .block > * {
    max-width: 90%;
  }
}

@media screen and (max-width: 1280px) {
  section.kontakty_cont article.card:first-of-type {
    bottom: 31%;
    left: 0;
  }

  section.kontakty_cont article.card:last-of-type {
    right: 0;
    bottom: 5%;
  }

  footer.project_footer > section.content_width.footer {
    column-gap: 1rem;
  }

  section.diagram > article.cont {
    width: 100%;
  }

  nav.project_main_nav .menu_cont {
    width: 500px;
  }
}

@media screen and (max-width: 1260px) {
  section.benefity_cont .cont {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  section.benefity_cont .benefit {
    width: 48%;
  }

  section.benefity_cont .benefit .info-cont {
    width: 100%;
    margin: 0;
  }

  section.benefity_cont .benefit .video-cont {
    position: relative;
    min-height: 250px;
    width: 100%;
    height: auto;
  }

  section.benefity_cont .benefit footer {
    padding: 1rem 0 !important;
  }

  section.benefity_cont .benefit .video-cont iframe {
    height: 250px;
  }
}

@media screen and (max-width: 1195px) {
  section.main_section.jaktofunguje {
    background-position: right -150px top;
  }

  section.akce_vypis > header h2 {
    width: 45%;
  }
}

@media screen and (max-width: 1180px) {
  article.sluzby section.sluzby_container,
  section.grid-blocks {
    grid-template-columns: repeat(2, 1fr);
  }

  section.grid-blocks article.block:last-of-type {
    grid-column: 1/-1;
  }

  section.diagram > header h2 {
    padding: 0 20%;
  }
}

@media screen and (max-width: 1175px) {
  section.ytb {
    padding: 1rem 0;
  }
}

@media screen and (max-width: 1165px) {
  section.roviny article.cont.kompletni h3 {
    justify-content: flex-start;
  }

  section.roviny article.cont p {
    width: 100%;
    margin-right: 0;
  }

  section.roviny article.cont.kompletni p {
    margin-left: 0;
    margin-right: auto;
  }

  .slider button {
    left: 3.75rem;
  }

  .slider button:last-of-type {
    right: 3.75rem;
  }
}

@media screen and (max-width: 1160px) {
  section.main_section article.main_article {
    width: 60%;
  }

  article.sluzby article.form {
    width: 50%;
  }

  section.clanek_container section.galerie_clanku a[data-gallery] {
    height: 135px;
  }
}

@media screen and (max-width: 1155px) {
  section.kontakty_cont article.card {
    padding: 2rem;
  }

  section.benefity_cont .benefit {
    width: 49%;
  }
}

@media screen and (max-width: 1125px) {
  section.dobrocinost_cont > article,
  section.roviny header h2 {
    width: 75%;
  }

  section.main_section.kontakty article.main_article h1 {
    width: 80%;
  }
}

@media screen and (max-width: 1080px) {
  section.main_section article.main_article {
    width: 75%;
  }

  .flex-blocks .block.s40,
  .flex-blocks .block.s60,
  article.sluzby article.form,
  article.sluzby section.sluzby_container {
    width: 100%;
  }

  section.clanek_container section.galerie_clanku {
    padding: 0 0 0 2rem;
  }

  footer.project_footer article.info {
    max-width: 90%;
  }

  footer.project_footer article.info .col:first-of-type {
    width: 33.333%;
    margin: 0;
  }

  footer.project_footer article.info .col:last-of-type {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 0 !important;
  }

  footer.project_footer article.info .col:last-of-type > * {
    margin-left: 0;
  }

  footer.project_footer article.info .col:last-of-type > article {
    width: 100%;
    margin-bottom: 2rem;
  }

  footer.project_footer ul.socmedia {
    margin: 2rem 0 0;
  }

  footer.project_footer article.info .col:last-of-type > article:last-of-type {
    margin-bottom: 0;
  }

  footer.project_footer h3 {
    margin: 0 auto 2.5rem;
  }

  footer.project_footer > section.content_width.footer {
    align-items: flex-start;
  }

  footer.project_footer ul.socmedia li {
    margin: 0 3.85rem 0 0;
  }
}

@media screen and (max-width: 1070px) {
  section.main_section article.main_article h1 {
    font-size: 3.4rem;
  }

  footer.project_footer ul.socmedia {
    align-items: center;
    padding: 1rem 0 0;
    margin: 0;
  }

  section.benefity_cont .cont {
    display: block;
    margin-bottom: 2rem;
  }

  section.benefity_cont .benefit {
    width: 90%;
    max-width: 615px;
    margin: 0 auto 2rem;
  }

  section.benefity_cont .benefit:last-of-type {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 1030px) {
  section.videa_vypis > .content_width {
    padding: 3rem 0;
  }

  section.main_section.jaktofunguje {
    background-position: right -275px top;
  }

  section.greensec > article > header h2 {
    max-width: 75%;
  }
}

@media screen and (max-width: 995px) {
  section.greensec > article section.video iframe {
    height: 450px;
  }
}

@media screen and (max-width: 980px) {
  section.main_section.dobrocinost {
    background-position: right -150px top;
  }

  article.sluzby section.sluzby_container h2 {
    transform: translate(0, 0);
  }

  section.clanek_container,
  section.diagram > article.cont {
    padding: 0;
  }

  section.clanek_container article.clanek_body {
    width: 100%;
    transform: translate(0, -20px);
    background-color: var(--white-clr);
  }

  section.clanek_container section.galerie_clanku {
    width: 100%;
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  section.diagram > article.cont header {
    transform: translate(0, -80px);
  }

  .slider button {
    left: 3rem;
  }

  .slider button:last-of-type {
    right: 3rem;
  }
}

@media screen and (max-width: 920px) {
  section.akce_vypis > .content_width {
    grid-template-columns: repeat(2, 1fr);
  }

  .flex-blocks .block.s50,
  section.articles article,
  section.diagram > article.cont .block,
  section.roviny article.cont {
    width: 100%;
  }

  section.roviny > .cont {
    grid-template-columns: repeat(1, 1fr);
  }

  section.diagram > article.cont .points {
    max-width: 100%;
  }

  footer.project_footer form {
    text-align: left;
  }

  footer.project_footer article.info {
    max-width: 90% !important;
  }

  section.roviny article.cont a {
    transform: translate(-100%, 0);
  }

  section.articles {
    width: 85%;
  }

  .flex-blocks .block > * {
    max-width: 90%;
  }

  section.main_section article.main_article h1 {
    font-size: 3.3rem;
  }

  footer.project_footer article.info .col:last-of-type > article {
    width: 50%;
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 890px) {
  article.sluzby section.sluzby_container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
  }

  section.videa_vypis > .content_width {
    grid-template-columns: repeat(1, 1fr);
  }

  section.videa_vypis article.container:nth-child(2n) {
    -webkit-box-shadow: 0 0 45px -7px rgb(10 10 10 / 19%) !important;
    -moz-box-shadow: 0 0 45px -7px rgba(10, 10, 10, 0.19) !important;
    box-shadow: 0 0 45px -7px rgb(10 10 10 / 19%) !important;
    z-index: 2;
  }

  section.videa_vypis article.container:nth-child(odd) {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

  footer.project_footer article.info .col {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    margin: 0 0 2rem !important;
    flex-wrap: wrap;
    gap: 1rem;
  }

  footer.project_footer article.info .col article {
    width: 30% !important;
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 870px) {
  section.clanek_container section.galerie_clanku {
    width: 100%;
    padding: 2rem 0;
  }

  section.clanek_container article.clanek_body {
    width: 100%;
    padding: 3rem;
  }

  footer.project_footer article ul {
    flex-wrap: wrap;
    padding: 2rem 0;
    top: 0;
  }

  footer.project_footer > section.content_width.footer {
    padding: 8rem 0 0;
  }

  footer.project_footer article.info .col article {
    width: calc(50% - 1rem) !important;
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 860px) {
  section.main_section.jaktofunguje::after {
    opacity: 0.6;
  }

  .blocks-3 {
    grid-template-columns: repeat(1, 1fr);
  }

  .blocks-3 article:last-of-type {
    max-width: 80%;
  }
}

@media screen and (max-width: 840px) {
  section.dobrocinost_cont > article {
    width: 85%;
  }

  nav.project_main_nav .menu_cont {
    width: 465px;
  }

  footer.project_footer article:nth-last-of-type(2) {
    padding: 0;
    grid-area: block_3;
    width: 100%;
  }

  footer.project_footer article:last-of-type {
    grid-area: block_2;
    width: 100%;
  }
}

@media screen and (max-width: 810px) {
  section.greensec > article section.video iframe {
    height: 350px;
  }
}

@media screen and (max-width: 800px) {
  section.roviny article.cont p {
    width: 100%;
  }

  section.main_section.sluzby {
    min-height: 550px;
  }
}

@media screen and (max-width: 780px) {
  section.main_section.videa {
    min-height: 600px;
  }

  section.main_section article.main_article {
    width: 95%;
  }

  section.main_section article.main_article section.quick_nav {
    justify-content: flex-start;
  }

  section.main_section article.main_article section.quick_nav a img {
    height: 30px;
  }

  section.main_section article.main_article section.quick_nav a.btn:first-of-type::after {
    display: none;
  }

  section.main_section article.main_article section.quick_nav a.btn:first-of-type {
    margin-right: 0;
  }

  form.form.spoluprace fieldset.inputs {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 720px) {
  section.akce_vypis > header h2 {
    width: 75%;
  }

  section.dobrocinost_cont > article {
    width: 100%;
  }

  section.main_section.onas {
    height: auto;
    min-height: 620px;
  }

  .content_width.relpos {
    width: 100% !important;
  }

  section.jaktofunguje_clanek > .content_width div.cont {
    columns: 1;
    width: 90%;
  }

  article.akce_min {
    padding: 1rem;
  }

  section.grid-blocks {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 680px) {
  section.main_section article.main_article section.quick_nav a.btn:first-of-type::after {
    width: 65px;
  }

  section.diagram > article.cont .points {
    display: flex;
    height: auto;
    padding-bottom: 200px;
  }

  section.diagram > article.cont .block {
    width: 50%;
    padding: 92px 1rem 3rem;
    height: auto;
    transform: translate(0, 0) !important;
  }

  .slider button {
    left: 2.55rem;
  }

  .slider button:last-of-type {
    right: 2.55rem;
  }

  nav.project_main_nav .menu_cont ul.main_ul {
    padding-top: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 80vh;
    padding-right: 10px;
  }
}

@media screen and (max-width: 640px) {
  section.main_section.spoluprace {
    padding-bottom: 0;
  }

  section.main_section.spoluprace article.main_article {
    padding-bottom: 1rem;
    text-align: left;
  }

  section.akce_vypis > .content_width {
    grid-template-columns: repeat(1, 1fr);
  }

  section.roviny article.cont.kompletni h3 {
    padding: 1rem 1rem 1rem 65px;
  }

  section.roviny article.cont.produkt h3 {
    padding: 1rem 75px 1rem 1rem;
  }

  footer.project_footer article,
  footer.project_footer article.info .col,
  footer.project_footer article.info .col:last-of-type > article,
  section.diagram article.cont .block,
  section.greensec > article section.video {
    width: 100%;
  }

  .flex-blocks .block {
    padding: 3rem;
  }

  footer.project_footer h3 {
    font-size: 2.5rem !important;
  }

  footer.project_footer > section.content_width.footer {
    flex-wrap: wrap;
    padding: 1rem 0 0;
  }

  footer.project_footer article:last-of-type {
    margin-top: 2rem;
    padding-bottom: 2rem;
  }

  footer.project_footer article ul li a::after {
    display: none;
  }

  footer.project_footer ul.socmedia {
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0;
  }

  footer.project_footer ul.socmedia li a {
    padding: 0.5rem;
  }
}

@media screen and (max-width: 630px) {
  section.jaktofunguje_clanek > .content_width div.cont {
    display: block;
  }

  footer.project_footer ul.footer_nav {
    flex-wrap: wrap;
    position: relative;
    top: 0;
  }

  footer.project_footer ul.footer_nav li {
    margin-bottom: 0.5rem;
    font-size: 2rem;
    width: 100%;
    text-align: left;
  }

  footer.project_footer ul.footer_nav li a {
    width: 100%;
    padding: 1rem;
    text-align: inherit;
    position: relative;
    cursor: pointer;
  }

  footer.project_footer article.info .col:last-of-type > article {
    width: 100% !important;
    margin-bottom: 2rem;
  }

  footer.project_footer ul.socmedia li {
    margin: 0 2.55rem 0 0;
  }
}

@media screen and (max-width: 600px) {
  h2 {
    font-size: 2.2rem;
  }

  footer.project_footer article:first-of-type,
  section.main_section.kontakty article.main_article h1,
  section.main_section.videa form fieldset.searchbar {
    width: 100%;
  }

  section.main_section article.main_article section.quick_nav a.btn:first-of-type::after {
    width: 0;
  }

  section.main_section article.main_article section.quick_nav a.btn:first-of-type {
    margin-right: 0;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0.5em;
    margin-bottom: 3rem;
  }

  section.main_section article.main_article section.quick_nav {
    flex-wrap: wrap;
  }

  footer.project_footer article p,
  section.main_section article.main_article section.quick_nav a.btn {
    font-size: 1.2rem;
  }

  section.main_section.jaktofunguje {
    min-height: 720px;
  }

  article.sluzby article.form,
  article.sluzby article.form form {
    padding: 2rem;
  }

  section.roviny header h2 {
    width: 95%;
  }

  section.greensec > article > header h2 {
    max-width: 100%;
  }

  section.main_section.videa {
    min-height: 600px;
  }

  section.main_section.dobrocinost {
    min-height: 780px;
  }

  article.sluzby section.sluzby_container {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 2rem;
  }

  footer.project_footer {
    padding: 0 0 2rem;
  }

  footer.project_footer > section.content_width.footer {
    grid-template-areas: "block_1" "block_2" "block_3";
  }

  footer.project_footer article:first-of-type a.btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem;
  }

  footer.project_footer article ul li a {
    font-size: 1.2rem;
    display: block;
  }

  footer.project_footer .flex-blocks .block ul.socmedia a {
    margin: 0 auto;
  }

  span.icon.facebook,
  span.icon.instagram {
    background-position: top 8px left !important;
  }

  section.diagram > article.cont header h2 {
    width: 80%;
  }
}

@media screen and (max-width: 565px) {
  section.main_section.sluzby {
    background-position: right -30px top;
  }

  section.main_section article.main_article h1 {
    font-size: 2.75rem;
    text-align: left;
  }

  #index article.main_article h1 {
    text-align: center;
  }
}

@media screen and (max-width: 545px) {
  article.sluzby article.form form fieldset.submit,
  section.video header {
    flex-wrap: wrap;
  }

  article.sluzby article.form form fieldset.submit input {
    display: block;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
  }

  section.main_section.onas {
    background-position: right -105px top 50px;
  }

  section.video {
    padding: 1em;
  }

  section.video header h5 {
    margin-bottom: 1rem;
    padding: 0;
  }

  section.video header span.date {
    margin: 0 auto 0 0;
  }
}

@media screen and (max-width: 535px) {
  h3 {
    font-size: 1.7rem;
  }

  footer.project_footer article.info .col article {
    width: 100% !important;
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 500px) {
  section.dobrocinost_cont > article {
    padding: 2rem;
  }
}

@media screen and (max-width: 495px) {
  article.sluzby article.form {
    padding: 1.5rem;
  }

  article.sluzby article.form form {
    padding: 1rem;
  }

  .flex-blocks .block {
    padding: 2rem;
  }

  footer.project_footer article.info .col {
    max-width: calc(100% - 4rem) !important;
  }

  section.articles {
    width: 90%;
  }

  .blocks-3 article:last-of-type {
    max-width: 100%;
    text-align: inherit;
  }

  section.diagram > header h2 {
    padding: 0 10%;
    text-align: left;
  }
}

@media screen and (max-width: 485px) {
  section.main_section.sluzby {
    background-position: right -55px top;
  }
}

@media screen and (max-width: 470px) {
  section.main_section article.main_article section.quick_nav {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 465px) {
  nav.project_main_nav .menu_cont {
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  article.sluzby article.form form {
    padding: 0.5rem;
  }

  section.kontakty_cont article.card:first-of-type,
  section.kontakty_cont article.card:last-of-type {
    left: 50%;
    width: 95%;
    transform: translate(-50%, 0);
  }
}

@media screen and (max-width: 420px) {
  section.diagram > article.cont .block {
    width: 100%;
  }

  article.gdpr_article {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 140px 2rem 0 !important;
  }
}

@media screen and (max-width: 380px) {
  section.diagram > article.cont header h2 {
    width: 100%;
  }
}

@media screen and (max-width: 360px) {
  section.diagram > article.cont header h2 {
    width: 100%;
  }
}

@media screen and (max-width: 350px) {
  section.main_section.onas {
    background-position: right -135px top 50px;
  }
}

@media screen and (max-height: 670px) {
  nav.project_main_nav .menu_cont ul.main_ul {
    padding-top: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 80vh;
    padding-right: 10px;
  }
}