* { box-sizing: border-box; }
body { margin: 0; font-family: "Open Sans", sans-serif; font-size: 14px; color: #3c3c3b; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
p:not(:last-child) { margin-bottom: 25px; }
ul, ol { margin: 0; padding: 0 0 0 15px; }
h1, h2 { margin-top: 0; margin-bottom: 25px; font-size: 35px; }
h2 { margin-top: 35px; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; text-transform: uppercase; font-weight: 600; }
section h2 { margin-top: 0; margin-bottom: 5px; text-align: center; }
iframe { max-width: 100%; border: 0;}

.full-frame, .container, .row { width: 100%; float: left; }

.banner,
.parallax { width: 100%; position: fixed; left: 0; z-index: -1; background-size: cover; background-position: center; }
.parallax { height: 100%; position: fixed; top: 0; background-image: url("/images/background/chatky.jpg"); }
.banner { background-image: url('/images/background/banner.jpg?t=2'); }
.banner.home { height: 100%; position: fixed; bottom: 0; }
.banner:not(.home) { height: 479px; position: absolute; top: 0; }

header { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 40px; background-color: rgba(0,0,0,.4); color: #fff; }
header.home { height: 100vh; min-height: 650px; }
header:not(.home) { padding-bottom: 135px; }
  header .text { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
    header .text .title { margin-bottom: 25px; line-height: 1.2; text-align: center; text-transform: uppercase; font-weight: bold; }
    header .text p { font-style: italic; font-style: italic; }
    header .text a { margin: 5px auto 0 auto; display: block; background-image: url("/images/background/button-green.png"); background-size: 100% 100%; text-align: center; font-style: italic; transition: background-color .3s; }
    header .text a:hover { background-color: rgba(150,193,31,.6); }
  header .navigation { width: 100%; position: absolute; bottom: 0; left: 0; background-color: #cb4634; text-transform: uppercase; }
    header .main-frame { display: flex; justify-content: space-between; }
      header nav a { float: left; }
      header .reservation { background-color: #b63322; transition: background-color .3s; }
      header .reservation:hover { background-color: #9c2b1c; }

main { padding-top: 45px; background-color: #fff; }
main:not(.home) { padding-bottom: 45px; }

main h1 { font-size: 35px; }
main h2 { font-size: 30px; }
main h3 { font-size: 25px; }
main h4 { font-size: 20px; }
main h5, main h6 { font-size: 17px; }
main .more { float: left; font-style: italic; margin-top: 25px; }

main table {border-collapse: collapse;}
main table tr td {padding: 5px 10px; border: 1px solid #000;}
main table thead tr td {padding: 3px 6px; border: 1px solid #000; font-weight: 700; background-color: #f7f7f7; text-align: center;}

main.home { padding-bottom: 125px; text-align: center; font-size: 20px; font-weight: 600; }  
  main.home .forest { height: 78px; margin-bottom: 10px; background: url("/images/icon/forest.png") center no-repeat; }
  main.home h1 { text-align: center; margin-bottom: 5px; }
  main.home p { font-style: italic; }
  main.home .icons { margin-top: 30px; display: flex; border-width: 0 2px; border-style: solid; border-color: #eaeaea; }
    main.home .icon { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background-color: #eaeaea; transition: box-shadow .3s; }
    main.home .icon:hover { box-shadow: -1px 0px 25px 6px rgba(0,0,0,.2); }
      main.home .icon img { margin-bottom: 30px; }
      
.rooms-frame { padding-top: 50px; padding-bottom: 70px; background-color: #eaeaea; }
  .rooms-frame .forest-with-house { height: 111px; margin-bottom: 10px; background: url("/images/icon/forest-with-house.png") center no-repeat; }
  .rooms-frame .perex { font-style: italic; text-align: center; font-size: 20px; font-weight: 600; }
  
.rooms { margin-top: 35px; display: flex; justify-content: flex-start; flex-wrap: wrap; }
  .room { display: flex; flex-direction: column; background-color: #fff; line-height: 1.2; transition: all .3s; }
  main .room { background-color: #eaeaea; }
  .room:hover { background-color: #96c11f; color: #fff; }
    .room .photo { overflow: hidden; }
      .room img { width: 100%; display: block; transition: transform .3s; }
      .room:hover img { transform: translateZ(0) scale(1.025); }
     .room .text { flex: 1; padding: 45px; }
      .room h2, .room h3 { margin-top: 0; margin-bottom: 15px; font-size: 20px; font-weight: bold; }  
      .room ul, .room p { margin-bottom: 30px; }
        .room ul { list-style-type: none; padding-left: 0; }
          .room li { position: relative; padding-left: 15px; }
          .room li:before { content: ""; width: 6px; height: 6px; position: absolute; top: calc(50% - 3px); left: 0; background-color: #96c11f; border-radius: 50%; transition: background-color .3s; }
          .room:hover li:before { background-color: #fff; }
      .room .more { width: 100%; line-height: 49px; background-color: #96c11f; text-align: center; color: #fff; transition: all .3s; }
      .room:hover .more { background-color: #fff; color: #96c11f; }
      
.contact { padding-top: 100px; padding-bottom: 140px; background-color: rgba(0,0,0,.5); text-align: center; font-size: 20px; font-weight: 600; color: #fff; }
  .contact .forest { height: 83px; margin-bottom: 10px; background: url("/images/icon/forest-white.png") center no-repeat; }
  .contact h2 { margin-bottom: 30px; }
  .contact p:not(:last-child) { margin-bottom: 0; }
  .contact p.green { color: #96c11f; }
  .contact .links { margin-top: 50px; display: flex; justify-content: center; }
    .contact .links a { line-height: 48px; padding-left: 63px; background-position: left center; background-repeat: no-repeat; }
      .contact .email { background-image: url("/images/icon/email.png"); }
      .contact .phone { background-image: url("/images/icon/phone.png"); }
      
footer { padding-top: 65px; padding-bottom: 130px; background-color: #c04838; font-size: 20px; color: #fff; }
  footer .main-frame { display: flex; flex-direction: column; align-items: center; }
    footer .row { display: flex; justify-content: center; background-repeat: no-repeat; }
      footer .row a { flex-basis: 300px; line-height: 92px; background-image: url("/images/background/button.png"); text-align: center; font-weight: 600; transition: all .3s; }
      footer .row a:hover { background-color: rgba(255,255,255,.6); color: #c04838; }
    footer .netsimple { margin-top: 50px; font-style: italic; }
    footer .netsimple:hover { text-decoration: underline; }