@import url('https://fonts.googleapis.com/css?family=Kalam|Pragati+Narrow:400,700&subset=latin-ext');

*
{
 padding: 0;
 margin: 0;
 font-family: 'Pragati Narrow', arial, sans-serif;
 color: #000;
}

html
{
 overflow-y: scroll;
}

body
{
 background-color: #eee;
 background: url(../img/back1.jpg), url(../img/back2.jpg), #eee;
 background-repeat: no-repeat, no-repeat, repeat;
 background-position: top left, bottom right, top left;
 background-attachment: fixed, fixed, fixed;
}

.center
{
 text-align: center;
}

.clr
{
 clear: both;
}

.small
{
 font-size: .9em;
}

a
{
 text-decoration: none;
}

article a
{
 color: #5b6f18;
 font-weight: bold;
}

.mobile-only {display: none !important;}

ul.disc{list-style: disc; line-height: 1.8em; margin-left: 1.5em; margin-bottom: 1em;}

.flower-separator
{
 display: block;
 margin: 1em auto;
 width: 100px;
 height: 54px;
 background: url(../img/virag-100.png) no-repeat;
 background-size: 100%;
}

header
{
 background-color: #fff;
}

p
{
 margin-bottom: .5em;
 text-align: justify;
}

h1, h2, h3
{
 font-family: Kalam;
 color: #5b6f18;
}

h1, h2.programs-h1
{
 font-size: 20pt;
}

h2
{
 font-size: 16pt;
}

/* */

.wrapper
{
 margin: 0 auto;
 max-width: 1300px;
}

#header-language
{
 height: 40px;
 padding-top: 5px;
 box-sizing: border-box;
 text-align: right;
 background: #fff url(/img/header-language-back.jpg) right top no-repeat;
}

#header-language a
{
 text-decoration: none;
 margin-right: .75em;
}

#logo
{
 position: absolute;
 top: 5px;
 left: 20px;
 width: 175px;
 z-index: 2;
}

#logo > a
{
 display: inline-block;
 background-color: #fff;
 padding: 5px;
}

#logo > a > img
{
 display: block;
 width: 100%;
 height: auto;
}

#header-menu
{
 height: 40px;
 background-color: #5b6f18;
 box-sizing: border-box;
}

#header-menu.fixed
{
 position: fixed;
 top: 0;
 width: 100%;
 box-shadow: 0px 2px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
 z-index: 9999;
}

#logo-fixed
{
 display: none;
 float: left;
}

#logo-fixed.show
{
 display: inline-block;
 width: 110px;
 height: 40px;
 padding: 0;
 margin-left: .75em;
 box-sizing: border-box;
 background-color: #fff;
}

#logo-fixed img
{
 width: 100%;
 display: block;
}

nav{float: right;}
nav#menu > ul{list-style-type: none; clear: both; height: 40px;}
nav#menu > ul > li{display: inline-block; height: 40px; padding: 0 .75em; font-size: 18px; position: relative;}
nav#menu > ul > li:hover {background-color: #474248;}
nav#menu > ul > li > a{display: block; text-decoration: none; text-transform: uppercase; color: #fff; padding-top: 5px;}
nav#menu > ul > li.active {background-color: #474248;}
#nav#menu > ul > li.active > a:hover {color: #fff;}
nav#menu > ul > li > ul.submenu {display: none; position: absolute; top: 30px; left: 0; width: 15em; list-style: none; padding: 10px 0 0 0;}
nav#menu > ul > li > ul.submenu-offer {width: 26em;}
nav#menu > ul > li > ul.submenu > li {color: #333; background-color: #fff; padding: .25em 2em .25em 1em; border-bottom: 1px solid #ddd;}
nav#menu > ul > li > ul.submenu > li:last-of-type {border-bottom: 0;}
nav#menu > ul > li > ul.submenu > li:hover {background-color: #5b6f18;}
nav#menu > ul > li > ul.submenu > li:hover a {color: #fff;}
#menu-h {display: none;}

#header-image
{
 width: 100%;
 padding-bottom: 33%;
 background-size: cover;
 background-position: center;
}

#content-wrapper
{
 max-width: 1300px;
 margin: -20px auto 50px auto;
 background-color: #fff;
}

#content-headline
{
 text-align: center;
 font-family: Kalam, 'times new roman', times, serif;
 font-style: italic;
 padding: .25em 0 .1em 0;
 font-size: 12pt;
 font-weight: bold;
 color: #5b6f18;
}

#booking
{
 background-color: #5b6f18;
 text-align: center;
 vertical-align: middle;
 padding: 10px;
 box-sizing: border-box;
}

a.booking-button
{
 display: inline-block;
 padding: 0 20px;
 margin: 0 20px;
 background-color: #fff;
 border-radius: 3px;
 border: 1px solid #888;
 color: #5b6f18;
 font-size: 11pt;
 font-family: 'Pragati Narrow', arial, sans-serif;
 font-weight: bold;
 text-transform: uppercase;
 min-width: 15em;
 max-width: 90%;
}

#content
{
 padding: 30px 50px;
 font-size: 14pt;
}

footer
{
 width: 100%;
 background-color: #5b6f18;
}

#footer-content
{
 width: 100%;
 box-sizing: border-box;
 padding: 20px;
}

#footer-content > p
{
 color: #fff;
 font-size: 14pt;
 text-transform: uppercase;
 text-align: center;
}

#footer-content > p > a
{
 color: #fff;
 text-decoration: none;
}

#footer-social
{
 width: 100%;
 box-sizing: border-box;
 padding: 10px 0 0 0;
 text-align: center;
 background-color: #575757;
}

#footer-social > a
{
 display: inline-block;
}

#footer-social > a > img
{
 display: block;
 vertical-align: bottom;
 margin: 0 5px;
}

.middot
{
 color: #333;
 margin: 0 .5em;
}

.images img
{
 width: 200px;
 margin-right: 25px;
}

.images
{
 width: 100%;
 text-align: center;
}

.images img
{
 display: inline-block;
 width: 19%;
 margin-right: 1.25%;
}

.images img:nth-of-type(5n)
{
 margin-right: 0;
}

.programs-images
{
 text-align: center;
 margin-bottom: 1em;
}

.programs-images img
{
 display: inline-block;
 margin-right: 10px;
 max-width: 48%;
}

.programs-images img:last-child
{
 margin-right: 0;
}

#index-packages
{
 margin-bottom: 40px;
}

.index-package
{
 display: inline-block;
 vertical-align: top;
 width: 24%;
 margin-right: 1%;
 text-align: center;
 font-weight: normal;
 line-height: 1.1em;
 color: #5b6f18;
}

.index-package:hover img
{
 transform: scale(1.05);
}

.index-package:last-child
{
 margin-right: 0;
}

.index-package img
{
 display: inline-block;
 width: 100%;
 height: auto;
 transition: transform .5s;
 border: 1px solid #5b6f18;
}

#index-package-extra
{
  display: inline-block;
  width: 75%;
  font-weight: normal;
  box-sizing: border-box;
  line-height: 1.2em;
}

#index-package-extra > div
{
  background-image: url(/content/header/baberliget-ajanlatok-1280.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  padding-bottom: 32%;
  border: 1px solid #5b6f18;
  transition: transform .5s;
  position: relative;
}

#index-package-extra > div:hover
{
  transform: scale(1.05);
}

#index-package-extra > div > div
{
  position: absolute;
  width: 100%;
  bottom: 20px;
  left: 0;
  text-align: center;
  font-size: 2em;
  color: #fff;
  font-weight: bold;
}

#index-svsz
{
 float: right;
 margin-left: 20px;
}

#index-svsz img
{
 width: 100%;
}

div#recommendations
{
 position: relative;
}

div#recommendations > ul
{
 list-style: none;
}

div#recommendations > ul > li
{
 display: none;
}

div#recommendations > ul > li.active
{
 display: block;
}

div#recommendations > div.prev
{
 position: absolute;
 left: 0;
 top: 40px;
 cursor: pointer;
 margin-right: 10px;
}

div#recommendations > div.next
{
 position: absolute;
 right: 0;
 top: 40px;
 cursor: pointer;
 margin-left: 10px;
}

.recommendation-item
{
 display: inline-block;
 float: left;
 width: 40%;
 padding: 0 4.9%;
}

.recommendation-item:nth-of-type(2n+1)
{
 border-right: 1px solid #333;
}

.recommendation-item > p.quote
{
 font-family: 'times new roman', times, serif;
 font-style: italic;
 font-size: 16pt;
 margin-bottom: .25em;
}

h3.p_open {cursor: pointer; text-decoration: underline; font-size: 12pt;}
h3.p_open::after {content: " »";}
p.p_open {display: none; margin-bottom: 1.5em;}
p.p_open > a {text-decoration: none; font-style: italic;}

.inquiry-button {display: inline-block; background-color: #5a6e17; color: #fff; font-size: 18px; text-transform: uppercase; text-decoration: none; border: 1px solid #888; padding: 5px 2em; width: 20em; max-width: 75%; margin: 0 auto; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5); margin: 0 3px 3px 0; cursor: pointer;}
.inquiry-button:active {box-shadow: none; -webkit-box-shadow: none; margin: 3px 0 0 3px;}

.ajanlat-item
{
 display: inline-block;
 vertical-align: top;
 width: 40%;
# max-width: 400px;
 height: 0;
 padding-bottom: 40%;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 background-position: center;
 border: 7px solid #5b6f18;
 box-sizing: border-box;
}

.ajanlat-item > h3
{
 background-color: rgba(255,255,255,.75);
 text-align: center;
 padding: 1em;
 margin-top: 35%;
}

.ajanlat-separator
{
 display: inline-block;
 height: 0;
 padding-bottom: 40%;
 margin: 0 2%;
 width: 8%;
 max-width: 100px;
 background: #fff url(../img/virag-100.png) center no-repeat;
 background-size: 100%;
}

h3.p_open
{
 font-family: 'Pragati Narrow', arial, sans-serif;
 color: #000;
 margin-bottom: 0;
 font-weight: normal;
 font-size: 1em;
}


.msg {width: 100%; padding: 5px; background-color: #800; color: #fff; text-align: center; box-sizing: border-box; margin-bottom: 1.5em;}

.inquiry > div {display: table-row;}
.inquiry > div > div {display: table-cell; padding-bottom: .25em; vertical-align: top;}
.inquiry > div > div:first-child {text-align: right; padding-right: .5em;}

#cookie-popup
{
 position: fixed;
 width: 100%;
 bottom: 0;
 border-top: 1px solid #fff;
 background-color: #575757;
 padding: .5em 0;
 color: #fff;
 text-align: center;
 font-size: 12pt;
 z-index: 1000;
}

#cookie-popup > input
{
 padding: 0 10px;
 font-size: 10pt;
 margin-left: 1em;
 border-radius: 5px;
 background-color: #fff;
 color: #5b6f18;
 border: 0;
 cursor: pointer;
}

#giftcard-popup
{
 position: fixed;
 width: 300px;
 right: 20px;
 bottom: 20px;
}

#giftcard-popup img
{
 width: 100%;
}

.video
{
 margin: 0 auto;
 text-align: center;
}

.video > iframe
{
 max-width: 100%;
}

/* reservation popup */
#popup-reservation-cta
{
 position: absolute;
 left: 0;
 top: 200px;
 vertical-align: middle;
 font-size: 18px;
 letter-spacing: 1px;
 background-color: #5b6f18;
 border-top: 1px solid #fff;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 color: #fff;
 padding: 0 10px;
 text-transform: uppercase;
 cursor: pointer;
 z-index: 99;
 box-sizing: border-box;
}

#popup-reservation-cta > span
{
 font-size: 2em;
 vertical-align: middle;
 color: #fff;
 margin-left: .25em;
}

#popup-reservation
{
 display: none;
 width: 350px;
 max-width: 100%;
 position: absolute;
 top: 120px;
 background: #fff url(/img/baberliget-popup-back.png) top 50px right 10px no-repeat;
 z-index: 100;
 box-sizing: border-box;
 border-bottom: 5px solid #d4d6af;
}

#popup-reservation-headline
{
 width: 100%;
 font-size: 18px;
 letter-spacing: 1px;
 background-color: #d4d6af;
 color: #000;
 text-transform: uppercase;
 box-sizing: border-box;
 cursor: pointer;
}

#popup-reservation-headline > div
{
 display: inline-block;
 vertical-align: middle;
 text-align: center;
 max-width: 50%;
 padding: 5px 10px;
 box-sizing: border-box;
}

#popup-reservation-headline > div > img
{
 max-width: 100%;
}

#popup-reservation > ul
{
 list-style: none;
 padding: 10px;
}

#popup-reservation > ul > li
{
 color: #5b6f18;
 font-size: 18px;
 letter-spacing: 1px;
 padding-left: 40px;
 background: url(/img/baberliget-li-26.png) no-repeat;
}

#popup-reservation-button
{
 text-align: center;
 margin-bottom: .5em;
}

#popup-reservation-button > a
{
 display: inline-block;
 padding: 5px 10px;
 background-color: #5b6f18;
 color: #fff;
 text-transform: uppercase;
}

/* */

@media screen and (min-width: 2000px)
{
 #header-image {padding-bottom: 20%;}
}

@media screen and (max-width: 1800px)
{
 body {background: #eee;}
}

@media screen and (max-width: 1280px)
{
 .wrapper {margin: 0 20px;}
}

@media screen and (max-width: 1300px)
{
 #content-wrapper {margin: 0 auto 40px auto;}
 #header-language a {margin-right: 10px;}
 nav#menu > ul > li {padding: 0 10px; font-size: 18px;}
}
@media screen and (max-width: 1200px)
{
 nav#menu > ul > li {padding: 0 6px; font-size: 16px;}
 nav#menu > ul > li > a {margin-top: 3px;}
}

@media screen and (max-width: 1100px)
{
 #header-language a {margin-right: 7px;}
 nav#menu > ul > li {padding: 0 5px; font-size: 14px;}
 nav#menu > ul > li > a {margin-top: 3px;}
}

@media screen and (max-width: 900px)
{
 nav#menu > ul {display: none;}
 #menu-h {display: block; width: 35px; height: 35px; position: absolute; top: 3px; right: 0;}
 #menu-h > img {width: 100%; height: auto; cursor: pointer;}
 #popup-reservation-cta {top: 150px;}

 .index-package {font-size: .9em;}

 nav{float: right; position: relative;}
 nav#menu > ul{list-style-type: none; background-color: rgba(255,255,255,.95); position: absolute; top: 40px; right: 0; height: auto; z-index: 9999; padding: 0;}
 nav#menu > ul > li {display: block; text-align: right; padding: .25em 1em; font-size: 20px;}
 nav#menu > ul > li.active{background-color: #474249; color: #fff;}
 nav#menu > ul > li:hover{background-color: #474249; color: #fff;}
 nav#menu > ul > li > a{display: block; text-decoration: none; text-transform: uppercase; color: #000;}
 nav#menu > ul > li > a:hover {color: #fff;}
 nav#menu > ul > li.active > a {color: #fff;}
 nav#menu > ul > li > ul.submenu {display: none !important;}
}

@media screen and (max-width: 800px)
{
 #content {padding: 20px;}
 #popup-reservation-cta {top: 120px; font-size: 16px; padding: 0 5px;}

 .flower-separator {width: 75px; height: 41px;}

 .images img {width: 32%; margin-right: 2%;}
 .images img:nth-of-type(3n) {margin-right: 0;}
 .images img:nth-of-type(5n) {margin-right: 2%;}
 .images img:nth-of-type(10) {display: none;}
 .images-page img {width: 24%; margin-right: 1.333333333%;}
 .images-page img:nth-of-type(5) {display: none;}
 .images-page img:nth-of-type(3) {margin-right: 1.33333333%;}
 .images-page img:nth-of-type(4) {margin-right: 0;}

 .ajanlat-item h3 {font-size: 16px;}

 a.booking-button {margin: 0 10px;}
 #giftcard-popup {width: 250px;}
}

@media screen and (max-width: 640px)
{
 .mobile-only {display: inline-block !important;}
 .desktop-only {display: none !important;}

 #header-image {padding-bottom: 60%;}
 #content-headline {font-size: 12pt;}
 #popup-reservation-cta {top: 100px; font-size: 14px;}

 .index-package {width: 48%; margin-right: 2%; margin-bottom: 10px;}
 #index-package-extra {width: 50%;}
 #index-package-extra > div {padding-bottom: 96%;}
 div#recommendations {padding: 0 40px;}
 .recommendation-item {float: none; width: 100%; padding: 0;}
 .recommendation-item:nth-of-type(2n+1) {border-right: 0; border-bottom: 1px solid #333; margin-bottom: 1em;}
 div#recommendations > div.prev, div#recommendations > div.next {top: 35%;}

 .ajanlat-item {display: block; width: 100%; max-width: 400px; padding-bottom: 100%; margin: 0 auto;}
 .ajanlat-item h3 {font-size: 22px;}
 .ajanlat-separator {display: block; clear: both; height: 100px; width: 100%; padding-bottom: 0; margin: 0 auto;}

 a.booking-button {padding: 0 10px; margin: 0 10px; font-size: 14px;}

 .flower-separator {width: 50px; height: 27px;}

 .inquiry > div {display: block;}
 .inquiry > div > div {display: block; padding-bottom: 0;}
 .inquiry > div > div:first-child {text-align: left; padding-right: 0; clear: both;}

 #giftcard-popup {width: 200px;}

 #index-svsz {width: 150px; margin-left: 10px;}

}

@media screen and (max-width: 420px)
{
 #header-language {background: none;}
 #content-headline {font-size: 10pt;}
 a.booking-button {clear: both; width: 60%; margin: 0 auto 5px auto; padding: 3px 10px;}
 a.booking-button:last-of-type {margin: 0 20px 0 20px;}
}