@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: PlayfairDisplay;
  src: url(/fonts/PlayfairDisplay-Medium.ttf);
  font-weight: normal;
}
@font-face {
  font-family: PlayfairDisplay;
  src: url(/fonts/PlayfairDisplay-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: PlayfairDisplay;
  src: url(/fonts/PlayfairDisplay-SemiBoldItalic.ttf);
  font-style: italic;
}
@font-face {
  font-family: PlayfairDisplay;
  src: url(/fonts/PlayfairDisplay-BoldItalic.ttf);
  font-style: italic;
  font-weight: bold;
}

/* ScrollBars */
body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  background-color: hsl(341.8, 99%, 96%);;
}
body::-webkit-scrollbar-thumb {
  background-color: #e8789A;
  border-radius: 15px;
}

/* Šířka elementu se bere včetně padding a border */
* {
  box-sizing: border-box;
}

/* Taková věc, která je na každém webu, aby se web dobře poskládal */
.Cf:after {
  content: "";
  clear: both;
  display: table;
}

/* Globálně vycentrované a rozměry webu */
.Center-global {
  max-width: 1140px;  /* maximální šírka stránky */
  margin: 0 auto;     /* zarovnání stránky doprostřed */
  overflow:hidden;    /* aby nic nepřečuhovalo */
}

h1, h2 {
  text-align: center;
}
h1 {
  font-size: 1.7rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.3rem;
}
h4 {
  font-size: 1.1rem;
}

a, a:visited {
  text-decoration: none;
  color: #007fff;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: darkorchid;
}

.NadUlOl {
  margin-bottom: 0;
}

.NadMezera {
  margin-top: 3rem;
}
ol, ul {
  margin-top: .3rem;
  padding-top: 0;
  line-height: 1.5;
}

.Centruj {
  text-align: center;
}

body > nav a {
  background-color: hsl(33.6,20%,98%);
}

main p {  /* Dělení slov automaticky, Zarovnání do bloku */
  hyphens: auto;
  text-align: justify;
}

.Alarm {
  font-weight: bold;
  color: hsl(0,100%,45%);
}

body {
  font-family: PlayfairDisplay, serif;
  background-color: hsl(345,40%,85%);
  background-repeat: repeat-x;
  background-attachment: fixed;
  font-size: 1rem;
}

input {
  font-size: 1rem;
}

/* Page Layout */

/* nav Mobile */
@media only screen and (max-width: 1116px) {

  /* Style the navigation menu */
  nav.Mobile {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: -.2rem;
    width: 98%;
    z-index: 3;
  }

  /* Hide the links inside the navigation menu (except for logo/home) */
  nav.Mobile #myLinks {
    display: none;
  }

  /* Style navigation menu links */
  nav.Mobile a {
    color: white;
    padding: .4rem;
    text-decoration: none;
    font-size: 1.4rem;
    display: block;
  }
  nav.Mobile a[href^="#"] {
    color: #111;
  }

  /* Style the hamburger menu */
  nav.Mobile a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Add a grey background color on mouse-over */
  nav.Mobile a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style the active link (or home/logo) */
  .active {
    background-color: #555;
    color: white;
  }

  /* nav Computer */
  nav.Computer {
    display: none;
  }

}  /* End of max-width: 1116px */

@media only screen and (min-width: 1116px) {

  nav.Mobile {
    display: none;
  }

  /* Desktop Menu */
  nav.Computer {
    display: block;
    position: fixed;
    background-color: #dddddd;
    right: 50%;
    margin-right: -570px;
    margin-top: -.9rem;
    z-index: 3;
  }
    nav.Computer a {
      display: inline-block;
      margin: 0 .3rem;
      padding: .4rem;
    }
      nav.Computer a:hover {
        background-color: #6FA4F8;
        text-decoration: none;
      }
      nav.Computer a:active {
        background-color: hsl(33.6,20%,98%);
        text-decoration: none;
      }
      nav.Computer a img {
        height: 23px;
        position: relative;
        top: .3rem;
      }

}  /* End of min-width: 1116px */

header {
  padding: 2rem 0 1rem .5rem;
  background-color: hsl(57,59%,80%);
  position: relative;
  font-size: 1.1rem;
}
  header img[alt$='logo'] {
    float: left;
    width: 19%;
    max-width: 570px;
    margin: 0;
  }
  header h1 {
    margin: 1.4rem 1rem 0 0;
    text-align: left;
    padding-bottom: .5rem;
    font-style: italic;
    font-weight: bold;
  }
  header p {
    text-align: center;
    margin: 1rem .3rem 0;
  }
  header .Phone {
    display: block;
    float: right;
    margin: .4rem 0 0;
    padding: 0;
  }
    header .Phone img {
      display: inline;
      width: 70px;
      max-width: 303px;
      margin: 0;
      padding: 0;
      position: relative;
      left: 5px;
    }
    header .Phone p {
      display: inline;
      margin: 0 8px 0 0;
      padding: 0;
      text-align: left;
      position: relative;
      bottom: 30px;
    }
    header .Phone a {
       color:#000;
    }

main {
  background-color: hsl(46,64%,93%);
}
  main h2 {
    margin: .4rem .4rem .2rem;
  }
  main h3, main h4 {
    margin-bottom: .3rem;
  }
  main p {
    margin-top: .3rem;
  }

article img[alt^='Logo'] {
  display: block;
  margin: 0 auto;
  width: 18%;
  max-width: 731px;
}

article img[alt^='Ornament'] {
  display: block;
  margin: 0 auto;
  width: 28%;
  max-width: 835px;
}

article img[alt^='Apartma'], article img[alt^='Penzion'] {
  float: right;
  width: 33%;
  max-width: 851px;
  margin: 0 .4rem;
}

img.Group:hover {
  border: 6px solid hsl(203,99%,70%);
  border-radius: 1rem;
}
img.Group:active {
  border: 6px solid hsl(29.6,40%,65%);
  border-radius: 1rem;
}

footer {
  background-color: hsl(57,59%,80%);
  text-align: center;
  padding: 0 .3rem;
}