/****************************fonts*********************************/
@font-face {
    font-family: 'helvetica';
    src: url('../../files/fonts/helveticaneue-light-webfont.woff2') format('woff2'),
         url('../../files/fonts/helveticaneue-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;

}

@font-face {
    font-family: 'helvetica';
    src: url('../../files/fonts/helveticaneue-medium-webfont.woff2') format('woff2'),
         url('../../files/fonts/helveticaneue-medium-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
	font-display: swap;
}

:root {
	--gold1: #9c8347;
	--gold2: #91864b;
	--gold3: #b9ae71;
	--red1:  #7a2521;
	--red2:  #612b38;
	--red3:  #4c231d;
	--red4:  #39342e;
	--blue1: #646b6c;
	--blue2: #003054;
	--blue3: #022A4A;
	--green1: #81856d;
	--green2: #4c5d42;
	--green3: #615e3e;
	--green4: #40401f;	
	
	--contentbg: #F4F4F4;
	--header1: var(--red1);
	--bluebg: #e1ebf2;
}

body {background-color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 1.2vw; color: #FFF; font-family: helvetica, sans-serif;}
p {font-family: sans-serif;}

.wrap {max-width: 1200px; margin: 0 auto; padding: 0 2em;}
.flex, .flex2, .flex3, .flex4 {display: flex; flex-wrap: wrap; justify-content: space-between;}
.flex2>div {flex: 0 0 50%;  box-sizing: border-box;}
.flex3>div {flex: 0 0 33.3%;  box-sizing: border-box;}
.flex4>div {flex: 0 0 25%;  box-sizing: border-box; margin-bottom: 4em;}
.kozepre {text-align: center;}
.balra {text-align: left;}
.jobbra {text-align: right;}
.floatl{float: left;}
.floatr{float: right;}
em {font-style: normal; font-weight: bold;}
a {text-decoration: none; color: #000;}

.tooltip {position: relative;}
.tooltip:after {content: attr(data-title); position: absolute; background: var(--bluebg); padding: 0.2em; border: 1px solid #000; z-index: 100; right: 100%; top: 1em; min-width: 8em; display: none; text-transform: none; color: #000;}
.tooltip:hover:after {display: block;}

/*header*/
header {height: 5.5em; vertical-align: middle; position: fixed; top: 0; width: 100%; background: #FFF; z-index: 999;}
header img.logo {width: 13em; position: relative; top: 0.5em;}
header .mobiledrop {display: inline-block; float: right; margin-top: 2em;}
nav {display: inline-block; vertical-align: middle; padding-bottom: 1.5em; margin-right: 6em;}
nav a {display: inline-block; padding: 0.5em 1em; text-decoration: none; color: var(--blue2); font-weight: bold; text-transform: uppercase;}
nav .open {display: inline-block; position: relative;}
nav .open>a:after{content: '▼'; font-size: 0.7em; padding: 0 0 0.2em 0.5em;}
nav .tours {position: absolute; font-size: 0.7em; display: none; width: 24em; text-align: center; left: -7em; top: 100%; padding-top: 1em;}
nav .open:hover .tours {display: block;}
nav .open:hover .tours a {padding: 1em 0.5em; display: block; background: var(--blue3); box-shadow: 0.3em 0.3em 0.3em #00000020; transition: all 0.1s;}
nav .open:hover .tours a:hover {color: var(--blue2); background: #FFF;}
nav .tours a {color: #FFF; font-weight: normal;}
header .social {display: inline-block;}
header .social a{width: 2em; display: inline-block; margin-left: 0.2em;}
header .social a img {width: 100%;}
#mobilemenu {background: url('../../files/img/page/menu.svg'); background-size: 100%; width: 3em; height: 3em; display: inline-block; float: right; margin: 1.5em 1em 0 0; display: none;}

#logo	{display: inline-block; animation: logo 0.5s ease 1 normal; width: 14em; text-decoration: none; color: var(--green4); font-weight: bold; position: relative; margin-top: 0.8em; font-size: 0.8em;}
#logo img{width: 47%;}
#logo div {display: inline-block; width: 51%; font-size: 1.3em; line-height: 1.1; padding-left: 2%; top: 0.3em; position: relative;}
#logo div span {display: block; font-weight: normal;}
@keyframes logo {from {transform: translateY(-50px); opacity: 0;} to {transform: translateY(0); opacity: 1;}}

/*body*/
main {margin-top: 6em;}
h1 { margin: 0; padding: 0; line-height: 1; margin-bottom: 1em; font-size: 2em; animation: 1.6s ease-out 0.2s 1 fadeIn; animation-fill-mode: both;}
h1.copy::after, .copy::after { content: "®"; position: relative; top: -0.7em; left: 0.1em; font-size: 0.7em;}
h2 { margin: 0; padding: 0; line-height: 1; margin-bottom: 1em; font-size: 1.6rem; animation: 1.6s ease-out 0.2s 1 fadeIn; animation-fill-mode: both;}
h3 {margin: 0 0 1em 0; font-size: 1.1rem; font-weight: normal;}
img {max-width: 100%; animation: 0.6s ease-out 0.2s 1 fadeIn; animation-fill-mode: both;}
p {line-height: 1.4; margin: 0; font-size: 1.2em; animation: 0.6s ease-out 0.2s 1 slideLeft; animation-fill-mode: both;}
a.more {background: var(--red1); color: #FFF; border-radius: 0.5em; padding: 0.6em 1em; text-decoration: none; display: inline-block; text-transform: uppercase; font-weight:bold; border: none; font-size: 0.6rem; transition: all 0.5s; cursor: pointer; line-height: 1.1em; margin-top: 2em;}
.imglogo {position: relative; line-height: 0; margin-left: 4.5em;}
.imglogo:before {content: ''; width: 100%; height: 100%; position: absolute; left: -4.5em; top: 0; background: url('logo_imagebg.svg') 0 0 no-repeat; background-size: 50% 100%; z-index: 10;}
.imglogo a.more {position: absolute; bottom: 1em; left: -4em; z-index:10; line-height: 1.6; font-size: 0.8em; padding: 1em 1em; margin-left: 0.8em; font-weight: bold;}

section.header {width: 100%; position: relative; margin-bottom: 1em; background: var(--contentbg); padding: 1em 0; text-align: center;}
section.header .flex3>div {padding: 1em;}
section.header img {width: 100%;}
section.header h2 {font-size: 1.2em; padding: 1em; text-transform: none; color: var(--blue3); margin: 0;}
section.header .videoplay::after {left: 50%; top: 50%;}
section.header  iframe {width: 100%; height: 16em;}
section.header .price {line-height: 2em; color: var(--blue3);}
section.header .price a.more {font-size: 0.9em;}


section.tour {background: var(--blue2); padding: 2em 0; color: #FFF; margin-bottom: 1em;}
section.tour>div>div:nth-child(1){flex: 0 0 48%; font-size: 0.8em;}
section.tour>div>div:nth-child(2){flex: 0 0 48.5%;}
section.tour .text {font-size: 1.5em; margin-bottom: 1em;}
section.tour .text h1 {margin: 0 0 0.3em 0;}
section.tour .text h1.copy::after {font-size: 0.5em;}
section.tour .promo {background: var(--green1); padding: 1em; margin: 2em 0 0 0; background: var(--contentbg); box-shadow: 0 0 1em #00000055;}
section.tour .promo h3 {color: var(--red1);}
section.tour .promo p {color: var(--red1);}
section.tour .tourbox>div {flex: 0 0 48%;}

section.text {background: var(--green1); padding: 2em 0; color: #FFF; margin: 1rem 0 0 0; font-size: 0.8em;}


section.screaming {background: var(--gold2); padding: 2em 0; color: #FFF; margin: 1rem 0; font-size: 0.8em;}
section.screaming h2 { margin-bottom: 0.5em;}
section.screaming h3 {font-size: 1.5em; font-weight: bold;}
section.screaming img.img {max-width: 8em;}
section.screaming a.more {margin: 0; font-size: 0.7em; font-weight: normal;}

section.article {background: var(--blue2); padding: 2em 0; color: #FFF; margin-bottom: 3em;}
section.article h1, section.article h2 {text-align: center;}
section.article img {width: 40em; max-width: 100%;}
section.article sub {text-align: center; display: block; margin: 1em auto 2em auto; max-width: 50em;}
section.article p {margin: 1em auto; max-width: 50em;}
section.article p a {color: var(--gold2);}

section.map {background: var(--contentbg); color: #000; padding: 2em 0; font-size: 0.8em;}
section.map .review {position: relative; flex: 0 0 30%;}
section.map .review img {width: 100%;}
section.map .review .box {position: absolute; bottom: 2em; left: 2em; width: 55%; background: #FFF; padding: 1em; text-align: center; line-height: 1.3;}
section.map .review .box b {font-size: 1.2em; display: block; margin-bottom: 0.5em;}

.videoplay {position: relative; cursor: pointer;}
.videoplay:after {content: ''; width: 6em; height: 6em; position: absolute; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDMwLjEgMzAuMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAuMSAzMC4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LDI5LjZDNywyOS42LDAuNSwyMywwLjUsMTVTNywwLjUsMTUsMC41QzIzLDAuNSwyOS42LDcsMjkuNiwxNVMyMywyOS42LDE1LDI5LjZ6IE0xNSwxLjEKCQkJQzcuNCwxLjEsMS4xLDcuNCwxLjEsMTVTNy40LDI4LjksMTUsMjguOVMyOC45LDIyLjcsMjguOSwxNVMyMi43LDEuMSwxNSwxLjF6Ii8+Cgk8L2c+CjwvZz4KPGcgaWQ9ImJ0YWtwbS50aWYiPgoJPGc+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTEwLjksMTVjMC0xLjYsMC0zLjMsMC00LjljMC0wLjUsMC4yLTAuOSwwLjYtMS4xYzAuNC0wLjMsMC45LTAuMiwxLjMsMC4xYzIuOCwxLjYsNS41LDMuMyw4LjMsNC45CgkJCWMwLjgsMC41LDAuOCwxLjYsMCwyLjFjLTIsMS4yLTMuOSwyLjMtNS45LDMuNWMtMC44LDAuNS0xLjcsMS0yLjUsMS41Yy0wLjgsMC41LTEuOC0wLjEtMS44LTFDMTAuOSwxOC40LDEwLjksMTYuNywxMC45LDE1egoJCQkgTTExLjcsMTVjMCwxLjEsMCwyLjIsMCwzLjNjMCwwLjYsMCwxLjEsMCwxLjdjMCwwLjQsMC4zLDAuNSwwLjYsMC40YzAuMSwwLDAuMi0wLjEsMC4zLTAuMmMyLjctMS42LDUuNC0zLjIsOC4xLTQuOAoJCQljMC40LTAuMiwwLjQtMC42LDAtMC44Yy0xLjgtMS4xLTMuNi0yLjEtNS40LTMuMmMtMS0wLjYtMS45LTEuMS0yLjktMS43Yy0wLjItMC4xLTAuNC0wLjItMC42LDBjLTAuMSwwLjEtMC4yLDAuMy0wLjIsMC40CgkJCUMxMS43LDExLjcsMTEuNywxMy40LDExLjcsMTV6Ii8+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTguNSwxNWMwLTEuOSwwLTMuOCwwLTUuNmMwLTAuNCwwLjEtMC42LDAuNC0wLjZjMC4zLDAsMC40LDAuMiwwLjQsMC42YzAsMy44LDAsNy41LDAsMTEuMwoJCQljMCwwLjEsMCwwLjIsMCwwLjJjMCwwLjItMC4yLDAuMy0wLjQsMC4zYy0wLjIsMC0wLjMtMC4yLTAuMy0wLjRjMC0wLjEsMC0wLjIsMC0wLjNDOC41LDE4LjcsOC41LDE2LjksOC41LDE1eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=);
  background-size: auto; background-size: 100%; top: 82%; right: 6%; margin-left: -3em; margin-top: -3em;}
.review iframe {width: 100%; height: 20em;}

section.similar {background: var(--blue1); padding: 2em 0;}
.tourbox>div {flex: 0 0 23%; background: var(--contentbg); color: #000; font-size: 0.8em; box-shadow: 0 0 1em #00000055; animation: slideLeft 0.5s ease 1 normal;}
section.similar .text2022 em {display: block; text-align: center; padding: .1em 0; font-size: 1.1em;}
section.similar .text2022 {padding-bottom: 2em; font-size: 1.1em; max-width: 50em; margin: 0 auto;}
section.similar .text2022 span {margin: 1em 0;}

.tourbox h2 {color: var(--blue2); font-size: 1.3em; text-align: center; font-weight: bold; margin: 0; padding: 1em 0 0 0;}
.tourbox h2.copy:after {content: "®"; position: relative; top: -0.7em; left: 0.1em; font-size: 0.7em;}
.tourbox .name2 {color: var(--blue2); font-size: 1em; padding: 0.5em 0; text-align: center; background: var(--contentbg); text-transform: uppercase; font-weight: bold;}
.tourbox .name2 img {width: 1em; position: relative; top: 0.1em;}
.tourbox .name2 img:first-child {margin-left: 0.5em;}
.tourbox p {padding: 1em;}
.tourbox .flex4 p {padding: 1em; font-size: 1.1em;}
.tourbox .buttons {margin: 1em 1.5em; font-size: 0.8em; text-align: left;}
.tourbox .buttons a {margin: 0; font-size: 1em;}
.tourbox .buttons a.grey {background: var(--gold2); margin: 0 0.5em;}
.tourbox .buttons span {font-weight: bold; float: right; font-size: 1.5em; color: var(--green3); text-align: right; line-height: 1;}
.tourbox .buttons span em {font-style: normal; font-weight: normal; font-size: 0.8em; color: var(--green3);}

.tourbox.rows>div {flex: 0 0 48%; background: #FFF; box-shadow: 0 0 1rem #00000077; border-radius: 0.2rem; font-size: 0; margin-bottom: 1rem;}
.tourbox.rows h2 {font-size: 0.9rem; padding: 0.5rem; background: var(--blue2); color: #FFF;}
.tourbox.rows .name2 {font-size: 0.7rem;}
.tourbox.rows a.image {width: 20%; float: left; box-sizing: border-box; padding: 0.5rem;}
.tourbox.rows .buttons {width: 80%; display: inline-block; font-size: 0.6rem; margin: 0; text-align: right; box-sizing: border-box; padding: 0.5em;}
.tourbox.rows p {width: 80%; display: inline-block; font-size: 0.7rem; box-sizing: border-box; padding-top: 0;}

.tourboxitem .buttons a.quickviewb {background: var(--blue1); margin-left: 1.1em;}
.tourboxitem .quickview {position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -30em; width: 60em; max-width: 95%; margin-top: -18em; height: 30em; background: var(--blue2); display: none; box-shadow: 0.05em 0.05em 0.4em #000A; text-align: center; padding: 2em 2em; opacity: 0.97; border-radius: 0.5em; font-size: 1rem;}
.tourboxitem .quickview h3 {color: #FFF; margin: 0 0 1em 0; text-align: center;}
.tourboxitem .quickview img {max-width: 100%;}
.tourboxitem .quickview ul {color: #FFF; margin-top: 2em; position: relative; margin: 3em 0 0 10%;}
.tourboxitem .quickview ul li{border-bottom: 1px solid #FFF3;}
.tourboxitem .quickview ul i {font-style: normal; font-size: 0.8em; opacity: 0.6;}
.tourboxitem .quickview ul.bullet li:before {background-size: 1em; top: 0.6em;}
.tourboxitem .quickview .map{ flex: 0 0 65%;}
.tourboxitem .quickview .balra{flex: 0 0 35%;}
.tourboxitem .quickviewclose {position: absolute; bottom: 1em; left: 46%;}

section.news h4 {margin: 0; color: #FFF; font-size: 1.2em; padding-bottom: 0.5em; text-align: center;}
section.news {background: var(--blue2); margin-top: 1em;}
section.news .flex>div:nth-of-type(1) {flex: 0 0 28%; padding: 1.5em 0 1.5em 0;}
section.news .flex>div:nth-of-type(1) img {width: 100%;}
section.news .flex>div:nth-of-type(2) {flex: 0 0 65%; padding: 1.5em 0 0.5em 0;}
section.news article {color: #FFF; overflow: auto; padding: 0.8em 0 0.4em 0; border-bottom: 1px solid var(--blue1);}
section.news article .floatl {max-width: 75%;}
section.news article span.date {font-style: italic; font-size: 0.8em; display: block; margin-bottom: 0.5em;}
section.news article a.title {font-weight: bold; text-transform: uppercase; display: inline-block; color: #FFF; text-decoration: none;}
section.news article span.text {display: block; font-size: 0.9em;}
section.news a.more { font-size: 0.6em; margin: 0;}

.more.floating {position: fixed; right: 0; bottom: 10%; font-size: .9em; border-radius: .5em 0 0 .5em; box-shadow: .1em .1em 1em #0008; line-height: 1.4; text-align: center; padding: .8em .7em; font-weight: 400; z-index: 20;}

.footerreview {margin: 2em 0; font-size: 1.1em;}
.footerreview .review {position: relative; flex: 0 0 30%; padding: 0;}
.footerreview .review img {width: 100%; display: block;}
.footerreview .review .box {position: absolute; bottom: 1em; right: 1em; width: 50%; background: #FFF; padding: 1em; text-align: center; line-height: 1.3;}
.footerreview .review .box b {font-size: 1.2em; display: block; margin-bottom: 0.5em;}
.footerreview .videoplay:after {top: 80%; left: 20%;}
.footerreview .total {text-align: center; margin: 0.5em; font-size: 1.2em;}
.footerreview .stars-empty {background: url('../../img/page/fstar2.svg'); background-size: auto; width: 5em; height: 1em; background-size: 1em; display: inline-block; position: relative; top: 0.1em;}
.footerreview .stars {background: url('../../files/img/page/fstar1.svg'); background-size: auto; width: 4em;
height: 1em; background-size: 1em;}
footer {color: #000; text-align: center; padding-top: 2em; font-size: 0.8em;}
footer .com {background: var(--blue2); color: #000; padding: 0.8em 0; color: #FFF; margin-top: 2em;}

/*max font size*/
@media screen and (min-width: 1200px) {
  body {
     font-size: 15px;
  }
}

@media all and (max-width: 600px){
	body	{font-size: 4vw;}
	h1 {margin-top: 1em; font-size: 1.4em; text-align: center;}
	h3 {text-align: center;}
	.wrap {padding: 0 1em;}
	.flex, .flex2,.flex3, .flex4 {display: block;}
	
	#mobilemenu {display: inline-block;}
	header .mobiledrop {float: none; display: block; max-height: 0; overflow: hidden; transition: all 0.5s; margin-top: 0; background: #FFF;}
	header .wrap {padding: 0;}
	header:hover .mobiledrop {max-height: 50em;}
	#logo {width: 14em; font-size: 0.8em; margin-top:1em;}
	nav {background: #FFF; display: block; padding: 0; margin: 0 0 0 0;}
	nav a{display: block; text-align: center;}
	nav .open {display: block;}
	nav .tours {position: relative; left: 0; text-align: center; width: auto; margin-right: 1em;}
	header .social {margin: 1em 0; text-align: center; display: block;}
	.imglogo a.more {font-size: 0.6em; margin: 0; left: -7em; bottom: 0; padding: 0.5em;}

	section.header {font-size: 0.9em;}
	section.tour {padding: 1em 0;}
	section.tour .tourbox>div {margin: 2em 0;}
	.tourbox.rows .image {display: none;}
	.tourbox.rows p {width: 100%;}
	.tourbox.rows .buttons {text-align: center; width: 100%;}
	.tourboxitem .quickview {left: 1rem; top: 6rem; bottom: 1rem; right: 1rem; margin: 0; width: auto; max-width: none; height: auto; font-size: 0.7rem; padding: 1rem;}
	.tourboxitem .quickview ul li {padding: 0.1em 0 0.1em 2.4em;}
	section.map {padding: 2em 0;}
	section.map .review {margin-top: 2em;}
	section.similar .flex3>div {margin-bottom: 2em;}
	section.news article {font-size: 0.7em;}
	section.news article .floatl {max-width: 65%;}
	section.news a.more {font-size: 0.8rem;}
	section.news article span.text, p, section.news article a.title {font-size: 1rem;}
	section.news article a.title {font-size: 0.9rem;}
	section.news article span.date {font-size: 0.8rem;}
}

@keyframes slideIn {  
0% {transform: translateY(1em); opacity: 0;}
 100% {transform: translateY(0); opacity: 1;}
}

@keyframes slideLeft {
  0% {transform: translateX(-0.5rem); opacity: 0;}
  100% {transform: translateX(0); opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes glow {from {text-shadow: 2px 2px 3px #444; transform: scale(1);} to {text-shadow: 2px 2px 15px #FFF; transform: scale(1.02);}}