/* Moema */
.button--moema {
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s; }

.button--moema.button--inverted {
  background: #ECEFF1;
  color: #37474f; }

.button--moema:hover {
  -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
  transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
  color: #ECEFF1;
  background-color: #191970;
  -webkit-animation: anim-moema-1 0.3s forwards;
  animation: anim-moema-1 0.3s forwards; }

.button--moema.button--inverted:hover {
  background-color: #7986cb; }

.button--moema:hover::before {
  -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
  animation: anim-moema-2 0.3s 0.3s forwards; }

@-webkit-keyframes anim-moema-1 {
  60% {
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1); }
  85% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes anim-moema-1 {
  60% {
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1); }
  85% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes anim-moema-2 {
  to {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes anim-moema-2 {
  to {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

header {
  height: 400px;
  background: #4997CD;
  width: 100%;
  margin-bottom: 150px; }
  header .logo {
    margin-top: 30px;
    text-align: left;
    height: 45px;
    width: auto; }
  header h1 {
    font-size: 40px;
    color: #333333;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 90px; }
    header h1 a {
      color: #E00C3D;
      text-decoration: underline; }
    @media screen and (max-width: 420px) {
      header h1 {
        margin-top: 40px; } }
  header h2 {
    font-weight: 400;
    color: #191970;
    font-size: 24px;
    line-height: 34px;
    margin-top: 20px; }
  header a.podobneho {
    color: #191970;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    display: block;
    background: #FFCC33;
    padding: 24px;
    max-width: 280px;
    position: relative;
    bottom: -55px;
    text-decoration: none; }
  header .right-side {
    position: relative; }
    @media screen and (max-width: 767px) {
      header .right-side {
        display: none; } }
    header .right-side img {
      position: absolute;
      right: 0;
      top: -34px;
      width: 190px; }

.footer-container {
  width: 100%;
  background: #393939; }

.footer-contact {
  text-align: left;
  padding-top: 59px; }
  .footer-contact h3 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700; }
  .footer-contact .p-footer {
    margin-top: 28px;
    font-size: 18px; }
    .footer-contact .p-footer a {
      color: #FFCC33; }

.footer-social, .footer-patra {
  text-align: left;
  padding-top: 59px;
  padding-bottom: 20px; }
  .footer-social h3, .footer-patra h3 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700; }
  .footer-social a img, .footer-patra a img {
    margin-top: 30px;
    width: 32px;
    height: 32px;
    margin-right: 15px;
    opacity: 1;
    transition: 0.5s; }
    .footer-social a img:hover, .footer-patra a img:hover {
      -moz-opacity: 0.5;
      opacity: 0.5;
      transition: 0.5s;
      -moz-transition: 0.5s;
      -o-transition: 0.5s;
      -webkit-transition: 0.5s; }

.footer-patra h3 {
  margin-bottom: 28px; }

.footer-patra a {
  color: #FFCC33;
  font-size: 14px; }

.chcete-neco-podobneho {
  margin-top: 100px; }
  .chcete-neco-podobneho h1 {
    text-align: center;
    font-size: 40px;
    color: #333333;
    font-weight: 700; }
    .chcete-neco-podobneho h1 a {
      color: #E00C3D;
      text-decoration: underline; }

.jak-tvorim {
  margin-top: 50px; }
  .jak-tvorim .metoda {
    margin-top: 50px;
    background: #F6F6F6;
    padding: 30px; }
    .jak-tvorim .metoda h3 {
      font-weight: 700;
      color: #E00C3D;
      font-size: 24px; }
    .jak-tvorim .metoda p {
      margin-top: 20px;
      color: #333333;
      font-size: 18px;
      line-height: 25px;
      font-weight: 400; }
      .jak-tvorim .metoda p a {
        color: #E00C3D;
        text-decoration: underline;
        font-weight: 700 !important; }

.placneme-si {
  margin-top: 100px; }
  .placneme-si img {
    text-align: left; }
  .placneme-si .heading {
    position: relative; }
    .placneme-si .heading h1 {
      right: 0;
      bottom: 74px;
      position: absolute;
      text-align: left;
      font-size: 40px;
      color: #333333;
      font-weight: 700; }
      .placneme-si .heading h1 a {
        color: #E00C3D;
        text-decoration: underline; }
      @media screen and (max-width: 991px) {
        .placneme-si .heading h1 {
          position: static; } }

.slogany-container .slogan {
  margin-top: 100px; }
  .slogany-container .slogan:first-child {
    margin-top: 0; }
  .slogany-container .slogan h3 {
    font-weight: 700;
    color: #E00C3D;
    font-size: 24px; }
  .slogany-container .slogan p {
    font-size: 18px;
    font-weight: 400;
    color: #333333; }
  .slogany-container .slogan a {
    font-size: 18px;
    text-decoration: underline;
    color: #191970;
    font-weight: 400; }
  .slogany-container .slogan .img-container {
    text-align: center; }
    @media screen and (max-width: 767px) {
      .slogany-container .slogan .img-container {
        text-align: left; } }
    .slogany-container .slogan .img-container img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      max-height: 70px;
      max-width: 250px; }
      @media screen and (max-width: 767px) {
        .slogany-container .slogan .img-container img {
          position: static;
          left: 0;
          right: auto;
          margin-top: 50px;
          margin-bottom: 40px; } }
    .slogany-container .slogan .img-container.left img {
      right: auto;
      left: 0; }

.nacist-dalsi {
  margin-top: 100px; }
  .nacist-dalsi a {
    display: block;
    margin: 0 auto;
    color: #191970;
    font-size: 22px;
    text-align: center;
    padding: 11px 31px;
    text-decoration: none;
    border: 1px solid #191970;
    max-width: 400px;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s; }
    .nacist-dalsi a:hover, .nacist-dalsi a:focus, .nacist-dalsi a:active {
      background: #191970;
      color: #FFFFFF; }

.login-container {
  background: #4997CD; }

.login-form {
  margin-top: 30px; }
  .login-form h1 {
    text-align: center;
    font-weight: 700;
    font-size: 48px;
    color: #FFFFFF; }
  .login-form .form-container {
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.16);
    max-width: 400px;
    margin: 0 auto;
    padding: 30px; }
    .login-form .form-container label {
      color: #FFFFFF; }

.admin-container h1 {
  text-align: center; }
  .admin-container h1 a {
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 700; }

.admin-container h2 {
  color: #FFFFFF;
  font-size: 40px;
  margin-top: 20px; }

.admin-container form {
  margin-top: 40px; }
  .admin-container form table {
    width: 100%; }

.vypis {
  margin-bottom: 100px; }
  .vypis thead tr th {
    border: 1px solid #FFFFFF;
    padding: 15px; }
  .vypis tbody tr td {
    padding: 15px; }

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Merriweather", serif !important; }

.content-container {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 0; }

.footer {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0; }