@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-image: url("obrazky/background2.jpg");
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

#topbtn {
  display: none;
  position: fixed;
  z-index: 99;
  bottom: 0px;
  right: 20px;
  font-size: 20px;
  width: 50px;
  height: 40px;
  line-height: 40px;
  background-color: #333;
  text-align: center;
  border-radius: 5px 5px 0 0;
}

#topbtn a {
  color: white;
  text-decoration: none;
}

#topbtn a:active {
  color: white;
}

#topbtn a:hover {
  color: #ffd800;
}

header {
  min-height: 150px;
  margin-left: 225px;
  background-color: rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header > span {
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  text-align: center;
  font-family: 'Comfortaa', cursive;
  font-size: 30px;
}

nav {
  position: fixed;
  top: 0;
  width: 200px;
  text-align: center;
  font-size: 14px;
}

nav > a > img {
  width: 125px;
  margin-left: 20px;
  margin-top: 15px;
}

nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 10px 0 0 20px;
}

nav > ul li {
  width: 100%;
}

nav > ul li a {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: #4d4d4d;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: white;
}

nav > ul li a:hover {
  background-color: white;
  color: #4d4d4d;
}

main {
  margin: 0px 10px 10px 220px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(375px, 1fr))[2];
      grid-template-columns: repeat(2, minmax(375px, 1fr));
}

main #aktuality {
  background-color: #d81159;
  font-family: 'Comfortaa', cursive;
  font-size: 20px;
  color: white;
  grid-column: span 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 3px 10px;
}

main #aktuality a {
  color: white;
}

main #skola {
  grid-column: span 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  margin-bottom: 30px;
}

main section {
  margin: 5px;
}

main section .nazov {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: 'Comfortaa', cursive;
  font-size: 1.7vw;
  text-transform: uppercase;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
  z-index: 3;
  min-height: 170px;
  position: relative;
}

main section .nazov small {
  display: block;
  text-transform: none;
  font-size: 1.3vw;
}

main section .popis {
  padding: 20px 20px;
  font-family: 'Nunito', sans-serif;
  z-index: 1;
}

main section .foto {
  z-index: 2;
  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
  font-size: 0;
}

main section .foto img {
  width: 100%;
}

main #zivot {
  grid-column: span 2;
  text-align: center;
  overflow: hidden;
}

main #zivot img {
  width: 100%;
  max-width: 800px;
}

#pit .nazov,
#een .nazov {
  background-color: #023e8a;
  color: white;
}

#pit .popis,
#een .popis {
  background-color: #90e0ef;
  color: black;
}

#prog .nazov,
#admin .nazov {
  background-color: #ffd800;
  color: #4d4d4d;
}

#prog .popis,
#admin .popis {
  background-color: #fdf8e1;
  color: #4d4d4d;
}

.popis h3 {
  margin: 0;
  padding: 0;
}

.popis p,
.popis ul {
  margin-top: 0;
}

footer {
  background-color: darkslategrey;
  min-height: 100px;
  margin: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 220px 1fr 1fr;
      grid-template-columns: 220px 1fr 1fr;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: white;
}

footer div {
  padding: 30px 0;
}

footer #kontakt {
  line-height: 20px;
}

footer #kontakt .ikona {
  display: inline-block;
  width: 20px;
  margin-right: 10px;
  text-align: center;
}

footer #kontakt a {
  text-decoration: none;
  color: white;
}

footer #otazka h2 {
  margin: 0;
  padding: 0;
}

footer #otazka input {
  width: 70%;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  min-width: 150px;
  border-radius: 3px;
  border: 1px solid white;
  margin-bottom: 5px;
}

footer #otazka textarea {
  width: 70%;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  min-width: 150px;
  border-radius: 3px;
  border: 1px solid white;
}

footer #otazka button {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  border: 1px solid white;
  border-radius: 3px;
  color: white;
  background-color: inherit;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid #f1f1f1;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card:nth-of-type(1) .flip-card-front,
.flip-card:nth-of-type(1) .flip-card-back {
  background-color: #023e8a;
  color: white;
}

.flip-card:nth-of-type(2) .flip-card-front,
.flip-card:nth-of-type(2) .flip-card-back {
  background-color: #0496ff;
  color: white;
}

.flip-card:nth-of-type(3) .flip-card-front,
.flip-card:nth-of-type(3) .flip-card-back {
  background-color: #ffd800;
  color: #4d4d4d;
}

.flip-card:nth-of-type(4) .flip-card-front,
.flip-card:nth-of-type(4) .flip-card-back {
  background-color: #ffd800;
  color: #4d4d4d;
}

.flip-card:nth-of-type(5) .flip-card-front,
.flip-card:nth-of-type(5) .flip-card-back {
  background-color: #d81159;
  color: white;
}

.flip-card:nth-of-type(6) .flip-card-front,
.flip-card:nth-of-type(6) .flip-card-back {
  background-color: #8f2d56;
  color: white;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: 'Comfortaa', cursive;
  font-size: 1.2vw;
  padding: 3px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
}

.flip-card-front i {
  font-size: 5vw;
}

.flip-card-front small {
  font-size: 0.8vw;
}

/* Style the back side */
.flip-card-back {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: bold;
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
  header > span {
    font-size: 25px;
  }
  nav {
    font-size: 12px;
  }
  nav > ul li a {
    padding: 7px 0;
  }
  main {
    -ms-grid-columns: (minmax(275px, 1fr))[2];
        grid-template-columns: repeat(2, minmax(275px, 1fr));
  }
  main section .popis {
    font-size: 12px;
  }
  .flip-card-back {
    font-size: 12px;
  }
  .flip-card-back:nth-of-type(2) {
    font-size: 11px;
  }
}

@media screen and (min-width: 600px) and (max-width: 799px) {
  header > span {
    font-size: 22px;
  }
  nav {
    font-size: 12px;
  }
  nav > ul li a {
    padding: 7px 0;
  }
  main {
    display: block;
  }
  main #aktuality {
    grid-column: span 1;
    font-size: 15px;
  }
  main #skola {
    grid-column: span 1;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    margin-bottom: 30px;
  }
  main section {
    margin-bottom: 30px;
  }
  main section .nazov {
    font-size: 2.5vw;
  }
  main section .nazov h2 > small {
    font-size: 2vw;
  }
  main section .popis {
    font-size: 14px;
  }
  .flip-card-back {
    font-size: 12px;
  }
  .flip-card-back:nth-of-type(2) {
    font-size: 11px;
  }
  .flip-card-front {
    font-size: 1.7vw;
  }
  .flip-card-front small {
    display: none;
  }
}

@media screen and (max-width: 599px) {
  #topbtn {
    display: block;
  }
  header {
    display: none;
  }
  nav {
    font-size: 14px;
    position: static;
    width: 90%;
    margin: 10px auto;
  }
  nav > img {
    margin: 5px 0;
  }
  nav > ul {
    padding: 5px 0 0 0;
  }
  nav > ul li a {
    padding: 7px 0;
  }
  main {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  main #aktuality {
    font-size: 15px;
  }
  main #skola {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
  }
  main section {
    margin: 0 0 30px 0;
  }
  main section .nazov {
    font-size: 3.5vw;
  }
  main section .nazov h2 > small {
    font-size: 2.5vw;
  }
  main section .popis {
    font-size: 13px;
  }
  footer {
    display: block;
  }
  footer div {
    width: 90%;
    margin: 0 auto;
  }
  .flip-card-front {
    font-size: 13px;
  }
  .flip-card-front i {
    font-size: 5vw;
  }
  .flip-card-front small {
    display: none;
  }
  .flip-card-back {
    font-size: 10px;
  }
}

@media screen and (min-width: 1400px) {
  main section .nazov h2 {
    font-size: 36px;
  }
  main section .nazov h2 small {
    font-size: 20px;
  }
  .flip-card-front {
    font-size: 23px;
  }
  .flip-card-front i {
    font-size: 70px;
  }
}
/*# sourceMappingURL=style.css.map */