/**\ CopyRight : TMCr Group, The make difficult. Editor : Taku Since : 2022, SEP Note: validating markup (CSS) with w3c. Last update : -- \**/ @font-face {font-family: 'Prompt'; src: url('../fonts/Prompt-Regular-400.ttf')} @font-face {font-family: 'PromptMedium'; src: url('../fonts/Prompt-Medium.ttf')} @font-face {font-family: 'PromptSemiBold'; src: url('../fonts/Prompt-SemiBold.ttf')} @font-face {font-family: 'PromptBold'; src: url('../fonts/Prompt-Bold.ttf')} @font-face {font-family: 'Font Awesome 5 Pro'; src: url('../fonts/fa-regular-400.ttf')} /*html * {border: dotted 0.5px red;}*/ html,body {min-width: 320px} html,body,body * {font-family: "Prompt"; /*letter-spacing: 0.05em;*/} p {font-size: 18px} ul,ol {list-style: none} body section.inner div.init-text * {font-family: "Arial",sans-sarif; /*letter-specing:initial*/} .clr {clear:both; float:none; height:0; line-height:0; font-size:0} .modal-header,.modal-footer {border: none!important} .home .modal-header,.home .modal-body {padding-bottom: 0} .home .modal-body,.home .modal-footer {padding-top: 0} html input, html textarea {font-family: sans-serif;} .navbar-header .find {display: none;} .thumbnail figure {overflow: hidden;} .thumbnail a:hover .thumb {transform: scale(1.1);transition: all .5s;} .btn-orange-gd { color: #fff; width: 20%; font-size: 2em; border-radius: 0; font-weight: bold; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19); } #wrapper {width:100%} .inner, .row.inner {margin:0 auto; max-width:1200px;} .inner img, .row.inner img {max-width: 100%; height:auto!important} #page-wrapper {background: #fff; min-height: 440px} /*.home #page-wrapper {background: url(../images/bg-naturalwhite.png) top center repeat;}*/ #top-head {background: #5c6199; margin-bottom: 3px; height: 70px} #top-head h1 {color: #fff; margin:0; height: 70px; line-height: 70px; font-family: PromptMedium; font-size: 1.625em; text-indent: 10%; } #header {background: url(../images/bg-head-2.jpg) bottom center no-repeat;height: 312px; /*background-size:100% 75%;*/} .home #header { /*background: url(../images/bg-head.jpgx) bottom center no-repeat;*/ background-image: none; height: auto; background-size:inherit; } #logo {margin: 0 auto; position: relative;} #logo img {position: absolute; margin-top: 0.5%; margin-left: 4px; z-index: 100; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; width: 90px; } #header h2 { color: #fff; margin-top: 90px; text-align: center; letter-spacing: 1px; text-shadow: 1px 1px 2px #555; width: 80%; } #header h3 { color: yellow; margin: 0; font-size: 16px; text-align: center; position: absolute; top: -34px; left: 20%; } .home #header h2 {color: #206600; margin-top: 120px; text-align: center; letter-spacing: 4px; text-shadow: 1px 1px 2px #555; width: auto} .home #header h3 {margin: 0 auto; text-align: center; font-size: 16px; position: inherit; color: #000; top: inherit; left: inherit;} #present {top: 60px;} #top-head .inner {position: relative;} #exc-rate { position: absolute; top: 0; right: 0; height: 100%; } #exc-rate #logo-iagto {display: inline-block;} #exc-rate #logo-iagto img {height: 100%; margin-top: 8px;} #exc-rate div { display: inline-block; text-align: center; font-weight: bold; width: auto; float: left; height: 100%; position: relative; top: 8px; } #exc-rate a h5 {font-size: 1.125em; margin-bottom: 6px; color: #000; text-transform: uppercase;} #exc-rate a h6 {font-size: 1.125em; color: #fff; margin-top: 0} #exc-rate a h6 span {color: #ffb600} #exc-rate a:hover {text-decoration: none;} .exc-rate {padding:0 12px 0 40px; background: url(../images/ico/ico-exchange.png) no-repeat 0 40%;} #booking-info {padding-right: 12px;} #booking-info h6 {margin: 10px 0 7px; font-size: 0.85em; font-weight: bold; color: #ffb600; text-transform: uppercase; text-align: left;} #booking-info ul {padding-left: 0;} #booking-info li {display: inline-block; color: #fff; font-size: 0.9em;} #booking-info li img {width: 16px; margin-right: 4px;} #booking-info li a {color: #fff;} #booking-info li a:hover {color: #ffb600; text-decoration: none;} #filter {width: 285px; float: right; margin-top: 3px; margin-right: 2%} #filter .input-group {border-radius: 12px; box-shadow: 0 5px 18px rgba(38, 75, 55, 0.12);} #filter .input-group-btn {width: 48px;} #filter input.form-control {background: #fff; border: 1px solid #cad6ce; border-right: 0; border-radius: 12px 0 0 12px; box-shadow: none; font-family: Prompt, sans-serif; font-size: 14px; height: 42px; padding: 9px 14px;} #filter input.form-control:focus {border-color: #245d45; box-shadow: 0 0 0 3px rgba(36, 93, 69, 0.13); outline: 0;} #filter button {background: #245d45; width: 100%; height: 42px; border: 1px solid #245d45; border-radius: 0 12px 12px 0; box-shadow: none; text-shadow: none;} #filter button:hover, #filter button:focus {background: #174332; border-color: #174332;} #filter button i {color: #fff} #filter2 {margin: 0 0 20px} #filter2 .input-group {border-radius: 14px; box-shadow: 0 10px 28px rgba(23, 66, 50, 0.1);} #filter2 .input-group-btn {width: 54px;} #filter2 input {background: #fff; border: 1px solid #cbd8cf; border-right: 0; border-radius: 14px 0 0 14px; box-shadow: none; font-family: Prompt, sans-serif; font-size: 16px; height: 50px; padding: 10px 16px;} #filter2 input:focus {border-color: #245d45; box-shadow: 0 0 0 3px rgba(36, 93, 69, 0.12); outline: 0;} #filter2 button {background: #245d45; border: 1px solid #245d45; border-radius: 0 14px 14px 0; color: #fff; height: 50px; width: 100%;} #filter2 button:hover, #filter2 button:focus {background: #174332; border-color: #174332; color: #fff;} #weather {text-align: right; padding-right: 10px; margin-top: 8%} #weather a {/*display: inline-block; position: relative; top: -24px; box-shadow: 1px 2px 6px #555;*/} #weather a:hover {box-shadow: 1px 1px 3px #111;} #weather div.wth {float:right; position:relative; top:-40px} #destination {padding: 40px 0} #destination ul {display: flex;flex-wrap: wrap; flex-direction: row; padding: 0} #destination ul li.thumbnail {width: 320px; height: 140px; /*flex: 2 3 320px;*/ border-radius: 0; border:0; text-align: center; box-shadow: 1px 1px 10px #999;} #destination ul li.thumbnail img {margin: 0 auto; } #destination ul li.thumbnail .thumb { height: 90px; border:solid 2px #fff; overflow: hidden; margin-bottom: 10px; background-color: #fff; background-position: 0 50%; background-repeat: no-repeat; background-size: 100%; z-index: 10; } #destination ul li.thumbnail .thumb img {visibility: hidden;} #destination ul li.thumbnail figcaption {font-size: 1.125em; font-family: PromptBold; color: #206600; text-transform: uppercase;} #destination ul li.odd {margin-right: 20px} #destination ul li.even {margin-left: 20px} #destination h2 {color: #444; margin:0 0 40px; font-family: PromptSemiBold; font-size: 2em; text-transform: uppercase;} #destination h3 {font-weight: bold; font-size: 1.5em; color: #5c6199; margin-top:0; letter-spacing: normal; line-height: 1.4em;} #destination p {font-size: 1.2em; color: #444; margin-bottom: 40px;} #promotion {min-height: 658px; background: url(../images/bg-bottom1.jpg) top center repeat; padding-top: 20px; background-color:#eef1f8;} #promotion h2 {display: inline-block; float: left; margin: 0 10px; height: 100px; font-family: PromptSemiBold; font-size: 2.125em; color: #ffb600; text-transform: uppercase; width: 246px;} #promotion p {color: #ffb600; font-size:18px; font-weight:500;} #promotion ul {display: flex; flex-wrap: wrap; flex-direction: row; padding: 0; clear: both} #promotion ul li.thumbnail { width: 220px; flex: 2 3 220px; border-radius: 0; border:0; background: none; min-width: 170px; max-width: 245px; z-index: 10; } #promotion ul li.thumbnail img {margin: 0 auto;} #promotion ul li.thumbnail .thumb { width: 100%; height: 176px; background-color: #fff; background-position: 50%; background-repeat: no-repeat; background-size: auto 100%; } #promotion ul li.thumbnail .thumb img {visibility: hidden;} #promotion ul li.thumbnail figcaption {} #promotion ul li.thumbnail a:hover {text-decoration: none;} #promotion figure {background: #737B92; border: #FFFFFF solid 6px; overflow: hidden; box-shadow:1px 1px 5px #ddd;} #promotion h4 {color: #206600; font-size: 1.625em; font-family: PromptSemiBold; padding: 10px; margin: 0} #promotion figcaption {background: #fff; min-height: 300px; position: relative; overflow: hidden;} #promotion figcaption p {color: #000; font-size: 18px; padding: 0 10px 10px} #promotion figcaption button { width: 100%; border-radius: 0; background-color: #FF7802; position: absolute; bottom: 0; left: 0; font-size: 1.125em; font-family: PromptSemiBold; text-transform: uppercase; } #promotion figcaption button:hover, #promotion a:hover figcaption button {background-color: hsl(28, 100%, 71%);} #promotion .more-package {margin-bottom: 3em; text-align: center;} #promotion .more-package a { color: #fff; font-family: Prompt; font-size: 1.5em; display: inline-block; background: #5C6199; padding: 8px 40px; border-radius: 8px; text-transform: uppercase; box-shadow: 1px 1px 10px #000; font-weight: bold; } #page-contact {padding-top: 10px} #page-contact h1, #page-booking h1, #page-transportation h1 {border-top: solid 1px #9cc532; border-bottom: solid 1px #9cc532; font-weight: bold; color: #5c6199; padding: 10px 0} #page-contact h2, #page-contact h3, #page-booking h2, #page-booking h3 {color: #206600; font-weight: bold; letter-spacing: 0px} #page-transportation h1.text-warning {border: 0; color: #ffc107;} #page-contact ul {margin: 0; padding: 0; list-style: none} #page-contact ul li {background-color: #7779b9; color: #f9f4c6; font-size: 18px; padding: 4px 10px; margin-bottom: 6px;} #page-contact form input, #page-booking form input, #page-booking form textarea, #page-contact form textarea {background-color: #d9d9d9; border: solid 2px #7779b9; border-radius: 0; min-width: 50%; padding: 5px} #page-contact form textarea {min-width: 75%; height: 220px} #page-contact .form-group, #page-booking .form-group {margin-bottom: 6px} #page-contact form button, #page-booking form button {border-radius: 0; margin-right: 10px; color: #fff; width: 140px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19); border:0; } #page-contact form button.send, #page-booking form button.send, #page-package .btn-orange-gd, #page-promotion .btn-orange-gd { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd65e+51,febf04+51 */ background: #ffd65e; /* Old browsers */ background: -moz-linear-gradient(top, #ffd65e 51%, #febf04 51%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffd65e 51%,#febf04 51%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffd65e 51%,#febf04 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */ } #page-contact form button.reset, #page-booking form button.reset { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8e8e8e+13,9baaa4+51,6f6f6e+51,6f6f6e+97 */ background: #8e8e8e; /* Old browsers */ background: -moz-linear-gradient(top, #8e8e8e 13%, #9baaa4 51%, #6f6f6e 51%, #6f6f6e 97%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #8e8e8e 13%,#9baaa4 51%,#6f6f6e 51%,#6f6f6e 97%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #8e8e8e 13%,#9baaa4 51%,#6f6f6e 51%,#6f6f6e 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#6f6f6e',GradientType=0 ); /* IE6-9 */ } #page-contact address, #page-booking address {text-align: center; margin-top: 40px} #page-contact .input-daterange {margin-bottom: 8px; width: 70%} #page-contact .input-daterange input {padding: 14px 5px;} #page-contact .input-daterange .input-group-addon {background: none; border:0;} #avatar {max-width: 84%; margin: 0 auto 20px;} #avatar .col-md-4 {text-align: center} #avatar .col-md-4 div {border-radius: 50%; width: 230px; height: 230px; margin:0 auto; overflow: hidden;} #avatar img {height: 100%; max-width: inherit;} #avatar h6 {font-size: 1.4em; border-bottom: dashed 1px #ccc; padding-bottom: 20px} #avatar p {padding: 10px; color: #acacac} #page-promotion {padding-top: 10px} #page-promotion h1 {border-top: solid 1px #9cc532; border-bottom: solid 1px #9cc532; font-weight: bold; color: #5c6199; padding: 10px 0;} #page-promotion h2, #page-contact h3 {color: #206600; font-weight: bold; letter-spacing: 0px; font-size: 1.8em;} #page-promotion form { padding: 20px; background: #D9D9D9; text-align: center; margin-bottom: 20px } #page-promotion form label {font-size: 1.6em;} #page-promotion form select { background: #7779B9; border-radius: 0; padding: 6px 4px; color: #FFEC00; font-size: 1em; } #page-promotion .text-center {margin: 20px auto;} #page-promotion .text-center .btn {border-radius: 0; border: 0; color: #fff;} #page-promotion .text-center .btn-purple { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19); background: rgba(143,148,207,1); background: -moz-linear-gradient(top, rgba(143,148,207,1) 0%, rgba(124,132,214,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(143,148,207,1)), color-stop(51%, rgba(124,132,214,1)), color-stop(51%, rgba(92,97,153,1)), color-stop(51%, rgba(92,97,153,1)), color-stop(100%, rgba(92,97,153,1))); background: -webkit-linear-gradient(top, rgba(143,148,207,1) 0%, rgba(124,132,214,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 100%); background: -o-linear-gradient(top, rgba(143,148,207,1) 0%, rgba(124,132,214,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 100%); background: -ms-linear-gradient(top, rgba(143,148,207,1) 0%, rgba(124,132,214,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 100%); background: linear-gradient(to bottom, rgba(143,148,207,1) 0%, rgba(124,132,214,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 51%, rgba(92,97,153,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f94cf', endColorstr='#5c6199', GradientType=0 ); } #page-promotion .btn:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);} ul.promotion {display: flex; flex-wrap: wrap; flex-direction: row; padding: 0; clear: both} ul.promotion li.thumbnail {width: 220px; flex: 2 3 220px; border-radius: 0; border:0; background: none; max-width: 20%; min-width: 220px} ul.promotion li.thumbnail img {margin: 0 auto;} ul.promotion li.thumbnail .thumb { width: 100%; height: 176px; background-color: #fff; background-position: 50%; background-repeat: no-repeat; background-size: auto 100%; } ul.promotion li.thumbnail .thumb img {visibility: hidden;} ul.promotion li.thumbnail figcaption {} ul.promotion li.thumbnail a:hover {text-decoration: none;} ul.promotion figure {background: #737B92; border: #d1d1d1 solid 1px; overflow: hidden;} ul.promotion h4 {color: #438f1c; font-size: 1.6em; font-weight: bold; padding: 10px; margin: 0} ul.promotion figcaption {background: #fff; min-height: 300px; position: relative; overflow: hidden;} ul.promotion figcaption p {color: #000; font-size: 18px; padding: 0 10px 10px} ul.promotion figcaption button { width: 100%; border-radius: 0; font-size: 1.2em; background-color: #FF7802; position: absolute; bottom: 0; left: 0; text-transform: uppercase; } ul.promotion figcaption button:hover, ul.promotion a:hover figcaption button {background-color: hsl(28, 100%, 71%);} ul.promotion a:hover .thumb { transform: scale(1.1); transition: all .5s; } .package .modal-body,.course .modal-body {padding: 0; border: 0;} #page-package h1 {border-top: solid 1px #9cc532; border-bottom: solid 1px #9cc532; font-weight: bold; color: #5c6199; padding: 10px 0;} #page-package #package-list h2 {color: #5c6199; font-size: 1.8em; font-weight: bold; letter-spacing: 0px; margin: 0;} .package #page-package h2 {color: #266733; margin-top: 10px; font-weight: bold; margin-bottom: 20px} #page-package .btn-orange-gd { color: #fff; width: 20%; margin: 20px auto; font-size: 2em; border-radius: 0; font-weight: bold; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19); } #page-package .btn-orange-gd:hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19); text-shadow: 1px 1px 2px #eee; } #page-package #gallery {display: flex;flex-wrap: wrap;padding: 0 4px} #page-package #gallery li {flex: 25%;max-width: 25%;padding: 0 4px; margin-bottom: 8px; height: 200px} #page-package #gallery li .thumb {height: 100%; background-repeat: no-repeat; background-size: cover; cursor: pointer;} #page-package #gallery li .thumb img {display: none;} #package-list {list-style: none; margin-top: 20px} #package-list li.thumbnail {width: 47%; border: 0; min-width: 47%;} #package-list li.thumbnail.even {margin-right: 2%} #package-list li.thumbnail.odd {margin-left: 2%} #package-list li.thumbnail .thumb {height: 238px; width: 100%; background-repeat: no-repeat; background-size: cover; min-height: 120px; } #package-list li.thumbnail .thumb img {visibility: hidden;} #package-list li.thumbnail figcaption {width: 48%; float: left;} #package-list li.thumbnail button {border-radius: 0; color: #fff; font-size: 1.2em} #package-list li.thumbnail figure {display: inline-block; position: relative; width: 100%} #package-list li.thumbnail figure a {display: inline-block; overflow: hidden; margin-right: 2%; float: left; border: #737B92 solid 4px; width: 48%} #package-list li.thumbnail figcaption div {position: absolute; bottom: 0; width: 48%;} #package-list .btn-soft-green {margin-right: 5%; width: 43%;} #package-list .btn-orange {min-width:50%!important;} #page-package .package-detail figure {margin-bottom: 20px; text-align: center;} #page-package .package-detail figcaption {margin-top: 10px; text-align: left; font-size: 1.4em} #page-package .package-detail ul {display: flex; list-style: none; margin-bottom: 10px; clear: both; padding: 0} #page-package .day-box {background-color: #7779B9; padding: 4px; margin: 4px; width: 25%;} #page-package .day-box h4 {text-align: center; font-weight: bold; color: #fff; font-size: 1.8em} #page-package .day-box p {background-color: #FFFAC7; padding: 10px; margin-bottom: 0px;} .condition {background-color: #D9D9D9; padding: 10px 28px;} .condition h5 {font-weight: bold; color: #7779B9; font-size: 1.8em} /*------------------COURSES-------------------*/ #page-courses h1 {border-top: solid 1px #9cc532; border-bottom: solid 1px #9cc532; font-weight: bold; color: #5c6199; padding: 10px 0} #page-courses h2 {color: #5c6199; font-size: 1.8em; font-weight: bold; letter-spacing: 0px; margin: 0;} .course #page-courses h2 {color: #266733; margin-top: 10px; font-weight: bold; margin-bottom: 20px} #page-courses #gallery {display: flex;flex-wrap: wrap;padding: 0 4px} #page-courses #gallery li {flex: 25%;max-width: 25%;padding: 0 4px; margin-bottom: 8px; height: 200px} #page-courses #gallery li .thumb {height: 100%; background-repeat: no-repeat; background-size: cover; cursor: pointer;} #page-courses #gallery li .thumb img {display: none;} #page-courses .btn-green-gd { color: #fff; width: 20%; margin: 20px auto; font-size: 2em; border-radius: 0; font-weight: bold; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19); } #page-courses .btn-green-gd:hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19); text-shadow: 1px 1px 2px #eee; } #page-courses .btn-green-gd { background: #d2ff52; /* Old browsers */ background: -moz-linear� ]� ] uC�rC� ]� ]�&� ]52 51%,#91e842 51%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #d2ff52 51%,#91e842 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */ } .btn-soft-green {background-color: #93c01f} .btn-orange {background-color: #ff7900} #result.search ul {list-style: none} #result.search ul li {margin-bottom: 10px; display: inline-block; width: 100%} #result.search ul li div {width: 20%; float: left; clear: left; margin-right: 1%; background: #f1f1f1; min-height: 80px;} #result.search ul img {width: 100%} #result.search ul li b {font-size: 1.2em} #result.search ul li p {font-size: 0.9em; font-family: sans-serif;} #result.search ul li a:hover {text-decoration: none} #myModal-search.site-search-panel { display: none; max-height: calc(100vh - var(--search-panel-top, 110px) - 24px); position: fixed; right: var(--search-panel-right, 24px); top: var(--search-panel-top, 110px); width: min(720px, calc(100vw - 32px)); z-index: 12000; } #myModal-search.site-search-panel.is-open {animation: searchPanelIn 180ms ease-out; display: block;} .site-search-panel__surface { background: #fff; border: 1px solid #dce5df; border-radius: 20px; box-shadow: 0 24px 70px rgba(23, 66, 50, 0.2); display: flex; flex-direction: column; max-height: inherit; overflow: hidden; } .site-search-panel__header { align-items: center; background: #f4f7f4; border-bottom: 1px solid #dce5df; display: flex; flex: 0 0 auto; padding: 20px 26px 17px; position: relative; } .site-search-panel__brand {align-items: center; display: flex; gap: 14px; min-width: 0;} .site-search-panel__logo {display: block; flex: 0 0 auto; height: 58px; object-fit: contain; width: 48px;} .site-search-panel__header h3 { color: #17251e; font-family: PromptSemiBold, Prompt, sans-serif; font-size: 25px; letter-spacing: -0.02em; margin: 5px 38px 0 0; white-space: nowrap; } .site-search-panel__close { align-items: center; background: transparent; border: 0; border-radius: 50%; color: #4f6257; display: flex; font-size: 30px; height: 44px; justify-content: center; line-height: 1; opacity: .65; padding: 0; position: absolute; right: 12px; top: 8px; width: 44px; } .site-search-panel__close:hover, .site-search-panel__close:focus {color: #17251e; opacity: 1; outline: 0;} .site-search-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 26px; } .site-search-panel__footer { align-items: center; border-top: 1px solid #e3eae5; display: flex; flex: 0 0 auto; justify-content: space-between; padding: 11px 18px; } .site-search-panel__footer span {color: #738078; font-size: 12px;} .site-search-panel__done { background: #eef4f0; border: 1px solid #cbd8cf; border-radius: 9px; color: #245d45; font-family: PromptMedium, Prompt, sans-serif; padding: 7px 15px; } @keyframes searchPanelIn { from {opacity: 0; transform: translateY(-8px);} to {opacity: 1; transform: translateY(0);} } .site-search__eyebrow {color: #a96a12; display: block; font-family: PromptMedium, Prompt, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;} #result.search .search-results__summary {color: #66736c; font-family: Prompt, sans-serif; font-size: 14px; margin: 0 0 14px;} #result.search .search-results {display: grid; gap: 12px; list-style: none; margin: 0; padding: 0;} #result.search .search-results > li {margin: 0; width: 100%;} #result.search .search-results > li > a {align-items: center; background: #fff; border: 1px solid #dce5df; border-radius: 14px; color: #17251e; display: grid; gap: 14px; grid-template-columns: 92px minmax(0, 1fr) 24px; min-height: 92px; padding: 10px; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease;} #result.search .search-results > li > a:hover, #result.search .search-results > li > a:focus {background: #f7faf8; border-color: #a9bcaf; text-decoration: none;} #result.search .search-results .thumbnail {background: #eef3ef; border: 0; border-radius: 10px; clear: none; float: none; height: 72px; margin: 0; min-height: 72px; overflow: hidden; padding: 0; width: 92px;} #result.search .search-results .thumbnail img {display: block; height: 72px; object-fit: contain; width: 92px;} #result.search .search-results__placeholder {align-items: center; color: #76917e; display: flex; justify-content: center;} #result.search .search-results__body {background: none; clear: none; float: none; margin: 0; min-height: 0; min-width: 0; width: auto;} #result.search .search-results__type {color: #a96a12; display: block; font-family: PromptMedium, Prompt, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 3px; text-transform: uppercase;} #result.search .search-results b {display: block; font-family: PromptSemiBold, Prompt, sans-serif; font-size: 16px; line-height: 1.35; margin-bottom: 4px;} #result.search .search-results p {color: #66736c; font-family: Prompt, sans-serif; font-size: 13px; line-height: 1.45; margin: 0; overflow: hidden;} #result.search .search-results__arrow {color: #245d45; font-size: 20px;} #result.search .search-results__empty {background: #f4f7f4; border: 1px dashed #bdcbbf; border-radius: 12px; color: #66736c; padding: 24px; text-align: center;} @media (max-width: 767px) { body.search-open {overflow: hidden;} #myModal-search.site-search-panel { inset: 0; max-height: none; width: 100%; } #myModal-search.site-search-panel.is-open {display: flex;} .site-search-panel__surface { border: 0; border-radius: 0; height: 100dvh; max-height: none; width: 100%; } .site-search-panel__header { padding: calc(18px + env(safe-area-inset-top)) 20px 16px; } .site-search-panel__brand {gap: 11px;} .site-search-panel__logo {height: 50px; width: 42px;} .site-search-panel__close {right: 8px; top: calc(2px + env(safe-area-inset-top));} .site-search-panel__header h3 {font-size: 20px; margin-right: 0;} .site-search-panel__body {padding: 18px 16px;} .site-search-panel__footer {padding-bottom: calc(12px + env(safe-area-inset-bottom));} .site-search-panel__footer span {display: none;} .site-search-panel__done {margin-left: auto;} #result.search .search-results > li > a {gap: 12px; grid-template-columns: 70px minmax(0, 1fr); padding: 12px;} #result.search .search-results .thumbnail {height: 70px; min-height: 70px; width: 70px;} #result.search .search-results .thumbnail img {height: 70px; width: 70px;} #result.search .search-results__arrow {display: none;} } .carousel {z-index: 1; max-height: 580px; overflow: hidden;} #present.carousel-caption {top: 0; color: inherit; text-shadow: inherit; max-width: 64%; margin: 0 auto;} .home #present.carousel-caption h3 {position: initial; top: 0;} .home #present .carousel-inner {max-height: 580px} .home #present .carousel-inner > .item > img {max-height: 580px} .carousel-inner > .item > a > img {max-height: 580px} .home .carousel-indicators {opacity: 0.4} #book-box {background-color: #ccc; padding: 40px 10px; border: solid 4px #b3b3b3; } #book-box form, #book-box h3 {width: 50%; margin: 0 auto; padding-left: 10%;} #page-booking h3 {margin-bottom: 20px; letter-spacing: 2px} #book-box input {min-width: 60%} #book-box .input-daterange {margin-bottom: 20px; width: 70%} #book-box .input-daterange input {/*padding: 14px 5px;*/} #book-box .input-daterange .input-group-addon {background: none} #book-box form textarea {width: 70%; height: 150px} #easyComment_Content {margin: 4% auto; max-width: 92%;} #review_content .card {margin: 10px;} #review_content .card-header, #review_content .card-footer {padding: 1.25rem;} #review_content .card-body {flex: 1 1 auto; padding: 1.25rem;} #review_content .rounded-circle.bg-danger {border-radius: 50%!important; height: 66px; background: #5c6199;} #review_content .rounded-circle h3 {line-height: 66px; color: #fff; font-weight: bold;} .star-light{color:#e9ecef;} .star-light:hover {cursor: pointer;} .reviews .star-light, .fa-star.submit_star {font-size: 1.6em;margin: 0 10px;} @media screen and (min-width: 768px){ #present.carousel-caption {right: 0;left: 0;} } #foot-logo {position: absolute; left: -100px; top: -151px} #footer {background: #fff; border-top:#DDDDDD solid 1px;} #footer h4, #footer h5 {color: #5c6199; font-weight: bold; font-size: 1.125em; padding-top: 10px; text-transform: uppercase;} #footer p {color: #444; font-size: 1em; padding-bottom: 10px;} #footer .inner {position: relative;} #footer #ref {padding:0} #footer #ref li {display: inline-block; margin-right: 8px;} #footer #ref img {} #sucms i {color: #47c549;} #sucms {color: #3c763d} /*responsive*/ @media(min-width:1280px){ } @media(max-width:1440px){ } @media(max-width:1366px){ } @media(max-width:1280px){ .home #header {/*height: 580px*/} .inner, .row.inner {width:100%; padding-left: 1%; padding-right: 1%} #destination ul li.thumbnail {width: 45%} #destination ul li.odd {margin-right: 10px} td, th {padding: 1%;} } @media(max-width:1180px){ } @media(max-width:1080px){ #top-head h1 {font-size: 1em; text-indent: 8em;} #filter {width: auto} #filter input {display:none;} #filter button {width: inherit;} #promotion ul li.last {display: none} #promotion {background-repeat: repeat;} #promotion h2 {width: 100%; margin: 0; text-align: center;} #promotion h4 {font-size: 1.6em} #promotion p {display: none} #promotion ul li.thumbnail {flex: 19%} #promotion ul li.thumbnail .thumb {height: 120px; background-position: 50%; background-size: cover} #promotion figcaption {min-height: 180px;} #page-package .btn-orange-gd,#page-courses .btn-green-gd {width: inherit; min-width: 30%;} #package-list .btn-soft-green {width: inherit; min-width: 80%;} } @media (max-width: 991px) { .inner, .row.inner {width: 100%} #result.search ul {padding-left: 0} #result.search ul li div {width: 30%; margin-right: 2%} #exc-rate div#booking-info {display: none;} } @media (max-width: 880px) { #book-box form, #book-box h3 {width: 80%; padding-left: inherit;} } @media only screen and (max-width: 768px){ #top-head {margin-bottom: 0} #destination {padding: 40px 20px 0} #destination ul {margin: 40px 20px;} #mapster_wrap_0 {margin: 0 auto;} #header {height: inherit; background-position: top center} .home #header {height: inherit;} #logo {width: 16%;left: 1%;position: absolute; top: 1%} #present ,#exc-rate {display: none} #filter {display: none} #review_content .rounded-circle {display: none;} h1,h2,h3,h4,h5,h6 {padding: 0 1%} td,th {display: table-cell;} .datepicker.dropdown-menu { width: min(calc(100vw - 32px), 340px) !important; min-width: 0; max-width: calc(100vw - 32px); left: 16px !important; right: auto !important; padding: 12px; } .datepicker table { width: 100%; table-layout: fixed; } .datepicker table th, .datepicker table td { display: table-cell; width: 14.285%; padding: 5px 2px; text-align: center; } #page-package #gallery li,#page-courses #gallery li {flex: 50%; max-width: inherit;} .navbar-header .find { display: inline-block!important; float: right; color: rgba(92, 97, 153, 0.27); margin-top: 10px; margin-right: 10px; cursor: pointer; } .navbar-header .find:hover {color:#777;} .cd-top {bottom: 20px!important} } @media (max-width: 480px) { #logo {display: none} .inner {padding: 0 2%;} #top-head {height: auto; padding-bottom: 8px} #top-head h1 {height: 46px; text-indent: initial; text-align: center;} #exc-rate h5 {margin-top: 0} #exc-rate a h6 {margin-bottom: 0; font-size:1.2em;} #exc-rate {position: relative; text-align: right;} #exc-rate #logo-iagto {max-width: 26%;} #exc-rate div {width: 60%} #weather {margin-top:36px; height:42px} #weather img {width:120px} #destination ul li.thumbnail .thumb {width:100%; margin-bottom: 10px} #destination ul li.even {margin:0 0 10px 10px} #destination ul li.odd {margin:0 10px 10px 0} #package-list li.thumbnail {width:100%;} #package-list li.thumbnail .thumb {height: inherit;} #package-list li.thumbnail.even {margin-right: 0} #package-list li.thumbnail.odd {margin-left: 0} #page-package #package-list h2, #page-courses h2 {font-size: 1.5em} .packages #package-list .btn-soft-green {display: none} .inner img, .row.inner img {} #book-box {padding: 4%} #book-box form, #book-box h3 {width: 100%;} #page-booking #book-box input, #book-box .input-daterange, #book-box form textarea {width: 94%} #page-booking form button {width: initial;} ul.promotion li.thumbnail {max-width: inherit;} ul.promotion li.thumbnail .thumb {background-size: cover;} #page-promotion .text-center .btn {margin: 0 0 10px; display: block; width: inherit;} #exc-rate a h5 {margin-top: 4px} #footer #ref {margin-top: inherit;} #footer #ref img {max-width: inherit} } .navbar-default .navbar-toggle:focus {background-color: unset!important;} .navbar-default .navbar-toggle:hover {background-color:rgb(235, 227, 216)!important;} .navbar-default .navbar-toggle .icon-bar {/*background-color: #fff!important;*/} /* Paste this css to your style sheet file or under head tag */ /* This only works with JavaScript, if it's not present, don't show loader */ .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/loader.gif) center no-repeat rgba(255, 255, 255, 0.5); } .cd-top { display: inline-block; height: 63px; width: 63px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background:url(../images/ico-top.png) 0 0 no-repeat; /*background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;*/ visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .8; } .no-touch .cd-top:hover { background-color: #e86256; opacity: 1; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { right: 30px; bottom: 30px; } } @media (max-width: 480px) { .cd-top {bottom: 20px;} #easyComment_Content {max-width: 98%;} } .carousel-inner .item #present.carousel-caption h2 { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .carousel-inner .item #present.carousel-caption h3 { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeOutRigth; animation-name: fadeOutRight; } .carousel-inner .item.active #present.carousel-caption h2 { -webkit-animation-delay: .4s; animation-delay: .4s; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .carousel-inner .item.active #present.carousel-caption h3 { -webkit-animation-delay: .8s; animation-delay: .8s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } /** * ---------------------------------------- * animation slide-left * ---------------------------------------- */ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } }