@font-face {
  font-family: 'Inter';
  font-weight: normal;
  font-style: normal;
  src: url("/fonts/Inter-Regular.ttf"); }

@font-face {
  font-family: 'Inter';
  font-weight: bold;
  font-style: normal;
  src: url("/fonts/Inter-Bold.ttf"); }

body {
  font-family: Inter, system-ui, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  box-sizing: border-box; }

.yt img{
  width: 150px;
  padding-top: 10px;
}
.instagram img {
  width: 50px;
  padding-top: 10px;
}
.facebook img {
  width: 50px;
  padding-top: 10px;
}

#comments form {
  box-sizing: border-box;
  margin: 40px auto;
  max-width: 810px;
  width: 100%;
  background-color: white;
  padding: 20px 20px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); }
  @media only screen and (min-width: 576px) {
    #comments form {
      padding: 20px 60px; } }
  @media only screen and (min-width: 768px) {
    #comments form {
      padding: 20px 100px; } }
  #comments form h3 {
    text-align: center;
    display: block;
    width: 100%;
    font-size: 32px;
    color: #0278FE;
    padding-top: 60px;
    margin: 0; }

#comments h2 {
  display: block;
  margin: 0 auto;
  text-align: center;
  margin: 80px 0 40px 0;
  font-size: 39px; }

#comment {
  width: 100%;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #A1A1A1;
  border-radius: 4px; }

#submit {
  margin-top: 1em;
  width: 100%;
  border: none;
  border-radius: 4px;
  background-color: #0278FE;
  color: white;
  font-weight: bold;
  padding: 13px; }

#name {
  margin-bottom: 1em;
  position: relative;
  top: 3em;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #A1A1A1;
  border-radius: 4px;
  width: 100%; }

#name_label {
  position: relative;
  top: 2em; }

#text_label,
#text {
  font-size: 0;
  border: 0;
  margin: 0;
  padding: 0;
  height: 0; }

.comment {
  background: #F6F6F6;
  padding: 30px;
  margin-bottom: 30px; }
  .comment p {
    text-indent: 2em;
    margin: 0;
    line-height: 150%;
    font-size: 14px;
    color: #666; }
    .comment p:first-of-type {
      text-indent: 0em;
      margin-top: 1em; }

.header {
  font-size: 1em;
  margin: 0;
  padding: 0em;
  display: flex;
  flex-flow: column; }
  .header a {
    color: black;
    font-weight: normal;
    display: inline-block; }
  .header .date {
    font-size: 60%;
    display: inline-block;
    color: #035E24;
    font-weight: bold; }
  .header h4 {
    margin: 0;
    padding: 0;
    font-weight: bold; }
    .header h4 a {
      text-decoration: none; }

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #2E2E2E;
  background: white; }

.img .img_usa {
  border-radius: 10px;
  width: 240px;
  height: 180px; }
  @media only screen and (min-width: 576px) {
    .img .img_usa {
      width: 320px;
      height: 240px; } }
  @media only screen and (min-width: 940px) {
    .img .img_usa {
      width: 480px;
      height: 360px; } }

.img .img_usa_at {
  border-radius: 10px;
  width: 240px;
  height: 321px; }
  @media only screen and (min-width: 576px) {
    .img .img_usa_at {
      width: 320px;
      height: 428px; } }
  @media only screen and (min-width: 940px) {
    .img .img_usa_at {
      width: 480px;
      height: 643px; } }
.main-box {
  width: 100%;
  background-color: #035E24; }

.footer {
  box-sizing: border-box;
  color: white;
  background-color: #035E24; }
  .footer a {
    color: white; }

.footer_content {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 25px 20px; }

.nav {
  max-width: 1680px;
  background: white;
  height: 65px;
  margin: 0 auto;
  border-bottom: 1px solid #035E24;
  z-index: 10; }
  @media only screen and (min-width: 576px) {
    .nav {
      height: 65px; } }
  @media only screen and (min-width: 768px) {
    .nav {
      height: 90px; } }
  .nav_content {
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center; }
  .nav .nav_item {
    display: block;
    font-size: 10px;
    font-weight: bold;
    margin: 5px;
    color: black;
    text-decoration: none;}
   
    .nav .big_item {
    display: none;
  }
  @media only screen and (min-width: 510px) {

    .nav .nav_item {
      font-size: 15px;
      margin: 5px; } 
  }
    @media only screen and (min-width: 900px) {
      .nav .big_item {
        display: block;
      }
      .nav .small_item {
        display: none;
      }
      .nav .nav_item {
        font-size: 15px;
        margin: 5px; } 
    }
    @media only screen and (min-width: 1248px) {
      .nav .nav_item {
        font-size: 17px;
        margin: 5px; } 
      }
    .nav .nav_item:hover {
      color: #035E24;
      text-decoration: underline; }
  .nav .title_block {
    color: #035E24;
    margin: 5px;
    padding: 5px;
    border-radius: 3px;
    display: flex;
    flex-flow: row; }
    @media only screen and (min-width: 768px) {
      .nav .title_block {
        margin: 10px;
        padding: 10px; } }
    .nav .title_block img {
      width: 40px;
      height: 40px;
      margin: auto; }
      @media only screen and (min-width: 768px) {
        .nav .title_block img {
          width: 50px;
          height: 50px; } }
    .nav .title_block h1 {
      display: flex;
      flex-flow: column;
      justify-content: center;
      margin: 0;
      padding: 5px 5px 5px 10px;
      font-size: 20px; }
      @media only screen and (min-width: 768px) {
        .nav .title_block h1 {
          font-size: 25px;
          padding: 10px 10px 10px 20px; } }
      .nav .title_block h1 a {
        display: block;
        color: #035E24;
        text-decoration: none; }

.main {
  margin-top: 90px;
  margin-bottom: 90px;
  max-width: 1680px;
  background-color: white;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-flow: column; }
  .main_content_top {
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 40px 20px 20px 20px; }
    @media only screen and (min-width: 768px) {
      .main_content_top {
        flex-flow: row; } }
  .main_comments {
    max-width: 1230px;
    width: 100%;
    margin: 0 auto; }
  .main_etaps {
    background: linear-gradient(to top, #FFFFFFC0, #FFFFFFC0), url("/images/pozadi.jpg") center no-repeat;
    background-size: cover;
    margin: 20px auto 0 auto;
    width: 100%; }
    .main_etaps_content {
      margin: 0 auto;
      max-width: 605px;
      width: 100%;
      display: flex;
      flex-flow: column; }
      .main_etaps_content h2 {
        text-align: center; }
      .main_etaps_content .stage_list {
        width: 100%;
        display: flex;
        flex-flow: column;
        margin: 0 0 40px 0; }
        .main_etaps_content .stage_list_item {
          margin-bottom: 5px;
          display: flex;
          flex-flow: row;
          justify-content: space-between;
          row-gap: 0.2em;
          column-gap: 1em;
          background: white;
          padding: 15px 22px; }
          .main_etaps_content .stage_list_item a {
            display: flex;
            flex-flow: row;
            font-weight: bold;
            color: black;
            text-decoration: none; }
            .main_etaps_content .stage_list_item a:before {
              content: "";
              background: url("/images/angle-right.svg") center no-repeat;
              background-size: 10px 10px;
              width: 10px;
              height: 10px;
              padding-top: 10px;
              margin-right: 0.5em; }
          .main_etaps_content .stage_list_item .km {
            font-weight: bold;
            color: #035E24; }
  .main_box {
    background-color: #035E24;
    margin: 0px auto 20px auto;
    display: flex;
    flex-flow: row wrap;
    width: 100%; }
    .main_box_content {
      padding: 70px 10px 70px 10px;
      justify-content: space-around;
      display: flex;
      flex-flow: row wrap;
      gap: 30px;
      margin: 0 auto; }
      .main_box_content .main_info_item {
        display: flex;
        flex-flow: column;
        align-items: center;
        background-color: white;
        padding: 30px 20px;
        min-width: 220px;
        margin: 0 auto; }
      .main_box_content .main_info_caption {
        display: block;
        font-size: 120%; }
      .main_box_content .main_info_value {
        display: block;
        font-weight: bold;
        padding-top: 10px;
        font-size: 150%;
        color: #035E24; }
  .main_content {
    padding-top: 40px;
    max-width: 1230px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: column; }
    .main_content h2 {
      line-height: 1.5;
      padding: 0;
      margin: 0; }
    .main_content a {
      color: #7607DB; }
    .main_content p {
      font-size: 100%;
      font-weight: bold; }
      .main_content p img {
        max-width: 640px;
        max-height: 640px;
        object-fit: contain;
        text-align: center; }
    .main_content #link_to_map_usa {
      display: block;
      text-align: center;
      max-width: 400px;
      max-height: 210px;
      line-height: 210px;
      font-size: 30px;
      font-weight: bold;
      color: white;
      margin: 0 auto;
      text-decoration: none;
      background: linear-gradient(to top, #035E24C0, #035E24C0), url("/images/map_usa.jpg") center no-repeat;
      background-size: cover;
      border-radius: 10px; }
      @media only screen and (min-width: 768px) {
        .main_content #link_to_map_usa {
          font-size: 50px;
          width: 400px;
          height: 210px;
          line-height: 210px; } }
      .main_content #link_to_map_usa_at:hover {
        background: linear-gradient(to top, #035E24A0, #035E24A0), url("/images/map_usa_2.jpg") center no-repeat;
        background-size: cover;
        color: #0278FE; }
        .main_content #link_to_map_usa_at {
          display: block;
          text-align: center;
          max-width: 400px;
          max-height: 210px;
          line-height: 210px;
          font-size: 30px;
          font-weight: bold;
          color: white;
          margin: 0 auto;
          text-decoration: none;
          background: linear-gradient(to top, #035E24C0, #035E24C0), url("/images/map_usa_2.jpg") center no-repeat;
          background-size: cover;
          border-radius: 10px; }
          @media only screen and (min-width: 768px) {
            .main_content #link_to_map_usa_at {
              font-size: 50px;
              width: 400px;
              height: 210px;
              line-height: 210px; } }
          .main_content #link_to_map_usa_at:hover {
            background: linear-gradient(to top, #035E24A0, #035E24A0), url("/images/map_usa_2.jpg") center no-repeat;
            background-size: cover;
            color: #0278FE; }
    .main_content #link_to_map_sk {
      display: block;
      text-align: center;
      max-width: 400px;
      max-height: 210px;
      line-height: 210px;
      font-size: 30px;
      font-weight: bold;
      color: #7607DB;
      margin: 0 auto;
      vertical-align: center;
      background: url("/images/sk.jpg") center no-repeat;
      background-size: contain;
      border-radius: 3px; }
      @media only screen and (min-width: 768px) {
        .main_content #link_to_map_sk {
          font-size: 50px;
          width: 400px;
          height: 210px;
          line-height: 210px; } }
      .main_content #link_to_map_sk:hover {
        background: url("/images/sk_hover.jpg") center no-repeat;
        background-size: contain;
        color: #14B9C7; }
    .main_content #link_to_map {
      display: block;
      text-align: center;
      max-width: 400px;
      max-height: 267px;
      line-height: 267px;
      font-weight: bold;
      font-size: 30px;
      color: #7607DB;
      margin: 0 auto;
      vertical-align: center;
      background: url("/images/cr.jpg?v=03") center no-repeat;
      background-size: contain;
      border-radius: 3px; }
      @media only screen and (min-width: 768px) {
        .main_content #link_to_map {
          font-size: 50px;
          width: 400px;
          height: 267px;
          line-height: 267px; } }
      .main_content #link_to_map:hover {
        background: url("/images/cr_hover.jpg?v=03") center no-repeat;
        background-size: contain;
        color: #14B9C7; }

.admin {
  display: flex;
  flex-flow: column;
  gap: 20px;
  padding: 20px; }
  .admin_day_form {
    display: flex;
    flex-flow: column;
    gap: 20px;
    padding: 0 0 20px 40px;
    border-bottom: 2px solid #035E24; }
    .admin_day_form input {
      width: 100%;
      max-width: 200px; }
    .admin_day_form .text {
      width: 100%;
      max-width: 640px;
      height: 200px;
      border: 1px solid black; }
  .admin form {
    display: flex;
    flex-flow: column;
    gap: 20px; }
  .admin .images {
    display: flex;
    flex-flow: row wrap; }
    .admin .images .image {
      padding: 5px;
      border: 1px solid #035E24;
      display: flex;
      flex-flow: column; }
    .admin .images img {
      width: 150px; }
.records {
  display:flex;
}
.record {
  max-width: 400px;
  padding: 10px;
}
.audio_form {
  padding: 10px;
}
.audio_delete_form {
  padding: 10px;
}