body {
  margin: 0;
  padding: 0; }

body, html {
  height: 100%; }

@font-face {
  font-family: RubikMedium;
  src: url("fonts/Rubik-Medium.ttf"); }
@font-face {
  font-family: RubikLight;
  src: url("fonts/Rubik-Light.ttf"); }
@font-face {
  font-family: RubikRegular;
  src: url("fonts/Rubik-Regular.ttf"); }
@font-face {
  font-family: RubikItalic;
  src: url("fonts/Rubik-Italic.ttf"); }
a {
  color: black;
  text-decoration: none; }

a:visited {
  color: black;
  text-decoration: none; }

a:active {
  color: black;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

#map {
  height: 450px; }

.modal {
  display: none;
  margin: 0 auto;
  position: absolute;
  top: 1600px;
  align-items: center;
  justify-content: center;
  width: 100%; }
  .modal .modal-content .close {
    position: relative;
    top: 50px;
    left: 530px; }
    .modal .modal-content .close:hover {
      cursor: pointer; }
  .modal .modal-content .content {
    display: flex;
    justify-content: center;
    background-color: black;
    border-radius: 8px;
    width: 340px;
    height: 220px;
    color: white;
    font-family: RubikLight;
    font-size: 30px;
    padding-top: 40px;
    padding-left: 120px;
    padding-right: 120px; }

.menu {
  z-index: 50;
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  background: black;
  display: none; }
  .menu .content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center; }
    .menu .content img {
      width: 119px;
      height: 107px;
      margin-top: 34px; }
    .menu .content .items {
      margin-top: 82px;
      display: flex;
      flex-direction: column;
      margin-bottom: 100px; }
      .menu .content .items a {
        color: #FFFFFF;
        font-family: RubikRegular;
        font-size: 25px;
        letter-spacing: 0;
        line-height: 55px;
        text-align: center;
        text-decoration: none; }
        .menu .content .items a:visited {
          color: #FFFFFF; }
        .menu .content .items a:active {
          color: #FFFFFF; }
  .menu .close {
    position: absolute;
    top: 34px;
    right: 16px; }

.button-black {
  border: none;
  outline: none;
  height: 50px;
  width: 190px;
  border-radius: 8px;
  background-color: #000000;
  color: #FFFFFF;
  font-family: RubikMedium;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center; }
  .button-black:hover {
    box-sizing: border-box;
    height: 51px;
    width: 191px;
    border: 1px solid #000000;
    border-radius: 8px;
    background-color: #FFFFFF;
    cursor: pointer;
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center; }

.main {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("images/Uvod.jpg");
  background-blend-mode: overlay;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
  .main .box {
    margin-top: 150px;
    width: 970px; }
    .main .box .left {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: flex-start;
      width: 450px; }
      .main .box .left .buttons {
        margin-left: 50px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center; }
      .main .box .left .arrow {
        margin-top: 160px; }
    .main .box .right {
      width: 450px;
      text-align: left;
      height: 180px;
      color: #FFFFFF;
      font-family: RubikItalic;
      font-size: 50px;
      font-style: italic;
      letter-spacing: 0;
      line-height: 60px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-top: 100px;
      margin-left: 70px; }
  .main .main-logo {
    width: 301px;
    height: 273px; }
  .main .button-black {
    margin-top: 69px; }

.top-background-right {
  position: absolute;
  right: 0px;
  top: 52px;
  height: 1658px;
  width: 749px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("images/Klara_background_vyrez.png");
  background-blend-mode: overlay;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1; }

.middle-background-right {
  position: absolute;
  right: 0px;
  top: 1166px;
  height: 1658px;
  width: 749px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("images/Klara_background_vyrez.png");
  background-blend-mode: overlay;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1; }

.middle-background-left {
  position: absolute;
  left: 0px;
  top: 1200px;
  height: 606px;
  width: 274px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("images/B_decor_logo.svg");
  background-blend-mode: overlay;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1; }

.top-background-left {
  position: absolute;
  left: 0px;
  top: 1103px;
  height: 606px;
  width: 274px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("images/B_decor_logo.svg");
  background-blend-mode: overlay;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1; }

.title {
  color: #000000;
  font-family: RubikRegular;
  font-size: 50px;
  letter-spacing: 0;
  line-height: 60px; }

.desc {
  color: #000000;
  font-family: RubikRegular;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 36px;
  margin-top: 45px;
  max-width: 350px; }

.services {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 238px; }
  .services .left {
    width: 450px; }
    .services .left ul {
      margin-top: 35px;
      height: 93px;
      color: #000000;
      font-family: RubikItalic;
      font-size: 18px;
      font-style: italic;
      letter-spacing: 0;
      line-height: 31px; }
    .services .left .button-black {
      margin-top: 53px; }
  .services .right {
    width: 450px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; }
    .services .right .form {
      height: 500px;
      width: 345px;
      border-radius: 8px;
      background-color: #F3F3F3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .services .right .form .logo {
        width: 40px;
        height: 40px;
        margin-top: 20px;
        text-align: center; }
      .services .right .form .text {
        color: #000000;
        font-family: RubikRegular;
        font-size: 20px;
        letter-spacing: 0;
        line-height: 24px;
        text-align: center;
        margin-top: 12px; }
      .services .right .form input, .services .right .form select {
        box-sizing: border-box;
        height: 46px;
        width: 290px;
        border: 2px solid #979797;
        border-radius: 8px;
        margin-top: 15px; }
        .services .right .form input::placeholder, .services .right .form select::placeholder {
          padding-left: 22px;
          color: #000000;
          font-family: RubikLight;
          font-size: 16px;
          font-weight: 300;
          letter-spacing: 0;
          line-height: 19px; }
      .services .right .form select {
        padding-left: 22px;
        color: #000000;
        font-family: RubikMedium;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 19px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent url("images/Choose_icon.svg") no-repeat 95% center; }
      .services .right .form .button-black {
        margin-top: 15px;
        margin-bottom: 29px; }
      .services .right .form .gdpr {
        margin-top: 10px;
        height: 45px;
        width: 154px;
        color: #000000;
        font-family: RubikLight;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0;
        line-height: 19px; }
        .services .right .form .gdpr input {
          width: 16px;
          height: 16px; }

.about {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
  .about .left {
    width: 450px;
    margin-top: 145px; }
    .about .left .link {
      height: 22px;
      width: 226px;
      color: #000000;
      font-family: RubikItalic;
      font-size: 18px;
      font-style: italic;
      letter-spacing: 0;
      line-height: 22px;
      margin-top: 30px;
      display: block;
      text-decoration: none; }
      .about .left .link:hover {
        text-decoration: underline; }
  .about .right {
    max-width: 450px;
    margin-top: 101px;
    color: #000000;
    font-family: RubikLight;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 25px; }
    .about .right ul {
      margin-top: 0px; }
    .about .right .t {
      font-family: RubikMedium; }

.references {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 139px; }
  .references .box {
    justify-content: center;
    align-items: center; }
    .references .box a {
      margin-left: 76px; }
    .references .box a:first-child {
      margin-left: 0px; }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 115px;
  flex-direction: row; }
  .contact .box .left {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; }
  .contact .box .right {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-left: 50px;
    margin-top: 80px; }
    .contact .box .right img {
      margin-bottom: 20px; }
  .contact .box .title {
    margin-bottom: 40px; }
  .contact .box .subtitle {
    color: #000000;
    font-family: RubikRegular;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 36px;
    margin-top: 30px;
    margin-bottom: 30px; }
  .contact .box .row {
    margin-bottom: 16px;
    display: flex;
    align-items: center; }
    .contact .box .row img {
      width: 30px;
      height: 35px; }
    .contact .box .row .text {
      margin-left: 23px;
      color: #000000;
      font-family: RubikRegular;
      font-size: 20px;
      letter-spacing: 0;
      line-height: 24px; }

.map {
  width: 100%;
  margin-top: 20px; }
  .map .frame {
    width: 100%;
    height: 475px;
    background-color: black;
    color: #FFF; }

.box {
  width: 920px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.sub-page .services {
  margin-top: 92px; }

.programs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .programs .section .title {
    color: #000000;
    font-family: RubikRegular;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 36px;
    margin-left: 100px;
    margin-bottom: 28px;
    margin-top: 28px; }
  .programs .section .boxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    .programs .section .boxes .item {
      height: 155px;
      width: 265px;
      background-color: #F3F3F3;
      margin-left: 7px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      flex-direction: column; }
      .programs .section .boxes .item .row-1 {
        color: #000000;
        font-family: RubikMedium;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 22px;
        text-align: center; }
      .programs .section .boxes .item .row-2 {
        color: #000000;
        font-family: RubikRegular;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 22px;
        text-align: center; }
      .programs .section .boxes .item .row-3 {
        margin-top: 5px;
        color: #000000;
        font-family: RubikRegular;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 21px;
        text-align: center; }

.logo-sub {
  height: 147px;
  width: 163px;
  margin-top: 48px;
  margin-left: 270px;
  margin-bottom: 78px; }

.footer {
  margin-top: 20px;
  height: 30px;
  width: 100%;
  color: #9B9B9B;
  font-family: RubikRegular;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 14px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center; }
  .footer .copyright {
    text-align: center;
    width: 100%; }
  .footer .matfix-logo {
    text-align: right;
    margin-left: auto;
    margin-right: 14px;
    margin-bottom: 14px; }
    .footer .matfix-logo img {
      max-width: 50px; }
    .footer .matfix-logo span {
      font-size: 9px;
      line-height: 9px;
      color: #D8D8D8; }
    .footer .matfix-logo a {
      color: inherit;
      text-decoration: none; }
    .footer .matfix-logo a:hover {
      text-decoration: underline; }

@media (max-width: 1050px) {
  .about .box {
    width: 800px; } }
@media (max-width: 950px) {
  .services .box .left {
    width: 400px; }

  .references .box {
    width: 800px; }

  .contact .box {
    width: 800px; } }
@media (max-width: 950px) {
  .main .box .left {
    width: 400px; }
  .main .box .right {
    width: 400px;
    margin-left: 0px; }

  .services .box {
    width: 800px; }
    .services .box .left {
      width: 350px; } }
@media (max-width: 830px) {
  .about .box {
    width: 725px; }

  .services .box {
    width: 725px; }
    .services .box .left {
      width: 310px; }
    .services .box .right {
      width: 400px; } }
@media (max-width: 800px) {
  .modal {
    width: 70%;
    max-width: 70%; }
    .modal .modal-content .close {
      width: 20px;
      height: 20px;
      left: 335px; }
    .modal .modal-content .content {
      max-width: 70%;
      padding-top: 20px;
      padding-right: 40px;
      padding-left: 40px;
      font-size: 20px;
      height: 150px; }

  .footer {
    margin-left: 15px;
    margin-top: 30px;
    text-align: left; }
    .footer .copyright {
      text-align: left;
      width: 70%; }
    .footer .matfix-logo {
      margin-right: 40px; }

  #menu-icon {
    display: block !important;
    position: absolute;
    right: 16px;
    top: 34px; }

  #facebook-full {
    display: none; }

  #facebook-mobile {
    display: block !important; }

  .middle-background-left {
    display: none; }

  .middle-background-right {
    top: 1215px; }

  #desc-mobile {
    display: block !important;
    margin-top: 25px;
    color: #FFFFFF;
    font-family: RubikItalic;
    font-size: 30px;
    font-style: italic;
    letter-spacing: 0;
    line-height: 36px;
    text-align: center; }
    #desc-mobile .button-black {
      display: block !important;
      height: 50px;
      width: 190px;
      border-radius: 8px;
      background-color: #FFFFFF;
      color: black; }

  .main {
    background-image: url("images/Uvod_mobile_SB.jpg"); }
    .main .box {
      width: 100%;
      margin-top: 73px; }
      .main .box .left {
        width: 100%;
        align-items: center; }
        .main .box .left .main-logo {
          content: url("images/Svatoplukbyma_logo_white.svg");
          width: 227px;
          height: 205px; }
        .main .box .left .buttons {
          margin-left: 0px; }
          .main .box .left .buttons .button-black {
            display: none; }
          .main .box .left .buttons .arrow {
            content: url("images/Down_white.svg");
            margin-top: 100px; }
      .main .box .right {
        width: 100%;
        display: none; }

  .about .box {
    width: 70%; }
    .about .box .left {
      margin-top: 57px; }
      .about .box .left .title {
        font-size: 25px;
        letter-spacing: 0;
        line-height: 29px; }
      .about .box .left .desc {
        font-size: 20px;
        letter-spacing: 0;
        line-height: 24px;
        margin-top: 12px; }
      .about .box .left .link {
        margin-top: 20px;
        text-decoration: underline;
        font-size: 14px;
        letter-spacing: 0; }
    .about .box .right {
      margin-top: 20px;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0;
      line-height: 18px; }

  .services {
    margin-top: 50px; }
    .services .box {
      width: 70%;
      display: flex;
      justify-content: center; }
      .services .box .left {
        width: 100%;
        text-align: center; }
        .services .box .left .title {
          font-size: 25px;
          letter-spacing: 0;
          line-height: 29px;
          text-align: left; }
        .services .box .left .desc {
          font-size: 20px;
          letter-spacing: 0;
          line-height: 24px;
          margin-top: 17px;
          text-align: left; }
        .services .box .left ul {
          margin-top: 26px;
          font-size: 14px;
          font-style: italic;
          letter-spacing: 0;
          line-height: 17px;
          text-align: left;
          padding: 12px; }
        .services .box .left .button-black {
          margin-top: 43px; }
      .services .box .right {
        width: 100%;
        margin-top: 78px; }
        .services .box .right .form {
          height: 380px; }
          .services .box .right .form .logo {
            width: 30px;
            height: 30px;
            margin-top: 18px; }
          .services .box .right .form .text {
            font-size: 14px;
            letter-spacing: 0;
            line-height: 17px;
            text-align: center; }
          .services .box .right .form input, .services .box .right .form select {
            box-sizing: border-box;
            height: 31px;
            width: 212px;
            border: 1px solid #979797;
            border-radius: 8px; }
          .services .box .right .form .gdpr input {
            width: 13px;
            height: 13px; }

  .references {
    margin-top: 58px; }
    .references .box {
      width: 80%;
      display: flex;
      justify-content: center;
      /*   a {
           margin-bottom: 25px;
         }

         img {
           transform: scale(0.6);
         }

         a:nth-child(3) {
           margin-left: 0px;
         }*/ }
      .references .box a {
        margin-left: 0px;
        margin-bottom: 25px;
        width: 35%; }

  .contact {
    margin-top: 25px; }
    .contact .box {
      width: 70%; }
      .contact .box .left .title {
        font-size: 25px;
        letter-spacing: 0;
        line-height: 29px;
        text-align: left; }
      .contact .box .left #facebook-mobile img {
        margin-left: 20px;
        height: 47px;
        width: 48px; }
      .contact .box .left .subtitle {
        font-size: 20px;
        letter-spacing: 0;
        line-height: 24px; }
      .contact .box .left .row .text {
        font-size: 16px;
        letter-spacing: 0;
        line-height: 19px; }
      .contact .box .left .row img {
        height: 26px;
        width: 22px; }

  .sub-page .logo-sub {
    width: 99px;
    height: 89px;
    margin-top: 21px;
    margin-left: 16px;
    margin-bottom: 0px; }
  .sub-page .top-background-left {
    display: none !important; }
  .sub-page .top-background-right {
    top: 2100px; }
  .sub-page .programs .section .title {
    margin-top: 31px;
    width: 250px; }
  .sub-page .programs .section .boxes {
    justify-content: center; }
    .sub-page .programs .section .boxes .item {
      margin-bottom: 5px; } }

/*# sourceMappingURL=style.css.map */