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

.clear {clear:both;}
.center-align {display:block; margin:0 auto;}
#theme-content h1, #theme-content h2, #theme-content h5.seo, #theme-landing h1{ color: rgba(0,0,0,0); position: absolute; z-index: -1;}
.theme-footer {background-color: #c59a64; color: #fff; font-size: 10px; padding: 5px 0px; text-align: right;}

#hero-image {height: 50%; min-height:225px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;}	
#hero-image-header {height: 50%; min-height:135px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; background-image:url(../images/header-bg.jpg)}
#hero-image-index {height: 50%; min-height:135px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; background-image:url(../images/index-bg.jpg?v=2)}

.header-logo img { max-width: 500px; padding-top: 20px; width: 95%;}
.index-logo {position: relative; width: 100%; max-width: 750px;}
.index-logo img { max-width: 750px; padding-top: 60px; width: 100%; margin-bottom:30px;}
.index-logo-1 {animation: logo-leaf 5s ease-in-out infinite alternate;}
.index-logo-2, .index-logo-3, .index-logo-4 {position:absolute; top:0px;}
.index-logo-2 {animation: logo-leaf-2 5s ease-in-out infinite alternate;}
.index-logo-3 {animation: logo-deco 1s ease-out backwards;}
.index-logo-4 {animation: logo-title 0.8s ease-out 0.5s backwards;}
.header-nav {text-align: center; margin-top:10px; padding-bottom:20px;}
.header-nav a {color: #fff!important; font-size: 18px; font-weight: 500; padding:0px 18px; border-right: none; display:inline-block; text-shadow: 0px 0px 12px #000; line-height:30px}
.header-nav a.nav-last {border-right:none;}
.header-nav h2{line-height: 20px;}

@keyframes logo-leaf {
    0%   {transform: rotate(-10deg) scale(1.25);}
    50%  {transform: rotate(10deg) scale(1.25);}
    100% {transform: rotate(-10deg) scale(1.25);}
}

@keyframes logo-leaf-2 {
    0%   {transform: rotate(10deg) scale(1.25);}
    50%  {transform: rotate(-10deg) scale(1.25);}
    100% {transform: rotate(10deg) scale(1.25);}
}

@keyframes logo-deco {
    0%   { opacity:0;}
	100% { opacity:1;}
}

@keyframes logo-title {
    0%   {transform: scale(0.5); opacity:0;}
    85% {transform: scale(1.03); opacity:1;}
	100% {transform: scale(1); opacity:1;}
}

@keyframes index-deco1 {
    0%   {transform: scale(1) translate(0px, 0px);}
	25%   {transform: scale(0.95) translate(5px, 0px);}
    50% {transform: scale(0.90) translate(0px, 0px);}
	75%   {transform: scale(0.95) translate(-5px, 0px);}
	100% {transform: scale(1) translate(0px, 0px);}
}

@keyframes index-deco2 {
    0%   {transform: rotate(5deg) translate(0px, -15px);}
    50% {transform: rotate(0) translate(10px, 0px);}
	100% {transform: rotate(5deg) translate(0px, 15px);}
}

@keyframes index-deco3 {
    0%   {transform: rotate(-20deg) translate(10px, -20px);}
    25% {transform: rotate(-28deg) translate(0px, -10px);}
	50% {transform: rotate(-20deg) translate(-10px, 0px);}
	75% {transform: rotate(-12deg) translate(0px, 10px);}
	100% {transform: rotate(-20deg) translate(10px, 20px);}
}

.theme-section-title {    padding: 15px 0px 10px 0px;}
.theme-section-title img { max-height: 55px; width: 100%;}

#theme-content {background-image: url(../images/theme-bg.jpg);}
#theme-content .background-light {background-color: rgba(255,255,255,0.4)}
#theme-content .background-orange {background-color: rgba(255,127,1,0.05); position:relative;}
#theme-content .background-brown {background-color: rgba(204, 174, 109, 0.3);}
#theme-content .background-pattern1 {background-image: url(../images/background-pattern1.png); background-size: 300px;}
#theme-content .background-pattern2 {background-image: url(../images/background-pattern2.png); background-size: 500px;background-color: rgba(255,255,255,0.2); position:relative;}
#theme-content .container {padding:10px 10px;}
#theme-content .spot-listing .card-wrapper, #theme-content .spot-feature .card-wrapper {padding:16px 15px;}

.spot-feature-content{ line-height: 30px; letter-spacing: 2px; color: #505050; font-size: 16px; text-align: left; padding: 0px 10px 0px 10px; position: relative;}
.spot-feature-button, .spot-more-button {display:block;}
.spot-feature-button img {height: 65px; display: block; margin: 20px auto 0px auto;}
.spot-more-button img {height: 65px; display: block; margin: 20px auto 15px auto;}
.spot-feature-deco {position:relative; width: 120px; right: 0px; bottom: -20px; display: block; margin: 0 auto;padding-bottom: 10px}


.spot-card-wrapper {position: relative;}
.spot-card-image img {width:100%; border-radius: 5px; box-shadow: 0px 0px 8px rgba(0,0,0,0.4); background-size: cover;}
.spot-card-title h5 { position: absolute; z-index: 2; left: 14px; bottom: 12px; color: #fff; font-size: 18px; font-weight: 500; text-shadow: 0px 0px 5px #000;}
.spot-card-button { text-align: center; border: 2px solid #f05e1c; border-radius: 5px; margin-top: 12px; padding: 1px 0px; color: #f05e1c; font-weight: 500;}
.spot-card-button i {margin-right:5px;}
.city-card-button {color:#E2943B!important; border: 2px solid #E2943B!important; }
.city-card-title h5 { font-size: 35px!important; font-weight: 700!important; text-shadow: 0px 0px 10px #000!important;}
.city-listing.slider {margin-left:-10px; margin-right:-10px;}
.city-listing.slider .slick-dots li button:before, .city-listing.slider .slick-dots li.slick-active button:before{color:#E2943B}


.trip-card-wrapper {position: relative;}
.trip-card-image img {width:100%; border-radius: 5px; box-shadow: 0px 0px 8px rgba(0,0,0,0.4);}
.trip-day-no {display: inline-block; background-color: #e98b2a; z-index: 2; position: absolute; padding: 2px 12px; color: #fff; font-size: 18px; top: 0px; left: 0px; border-radius: 5px 0px 5px 0px;}
.trip-card-details {margin-top:10px;}
.trip-card-details .sub-title, .trip-card-details .title {margin-bottom:0px;}
.trip-card-details .title {margin-top:3px;}
.trip-card-details .sub-title a {color: #e98b2a; font-weight: 500; font-size: 16px;}
.trip-card-details .title a { font-size: 18px; color: #505050; font-weight: 700;}
.index-deco1{position:relative; bottom:15px; right:-36%; animation: index-deco1 5s ease-in-out infinite;}
.index-deco1 img {width:110px;}

.forecast-slider, .forecast-info {float:left; display:inline-block;}
.forecast-slider {padding-left:0px; padding-right:0px;}
.forecast-slider .card-wrapper {padding:16px 0px!important;}
.forecast-slider .slick-prev:before, .forecast-slider .slick-next:before {color:#cc543a; font-size: 25px;}
.forecast-slider .slick-next {right: 10px; width: 25px; height: auto; overflow:visible;}
.forecast-slider .slick-prev {left: 10px; width: 25px; height: auto; overflow:visible;}
.forecast-slider .slick-dots li button:before, .forecast-slider .slick-dots li.slick-active button:before{color:#cc543a}
.forecast-info .card-wrapper {width:100%;}
.forecast-info .forecast-key {width:100%; max-width:500px; border-radius: 15px;}

.hotel-card-wrapper {position: relative;}
.hotel-card-image img {width:100%; border-radius: 5px; box-shadow: 0px 0px 8px rgba(0,0,0,0.4);}
.hotel-card-title h5 { position: absolute; z-index: 2; left: 15px; bottom: 5px; color: #fff; font-size: 18px; font-weight: 500; text-shadow: 0px 0px 5px #000;}
.hotel-card-details {margin-top:10px;}
.hotel-card-details .title a { font-size: 18px; background-color: #f9b800; text-align: center; display: block; color: #fff; padding: 4px 0px; border-radius: 100px;}
.index-deco2{position:absolute; bottom:20px; left:5px; animation: index-deco2 4s linear infinite alternate;}
.index-deco2 img {width:30px;}
.index-deco3{position:absolute; bottom:40px; left:0px; animation: index-deco3 4s linear infinite alternate;}
.index-deco3 img {width:30px;}

@media (min-width: 576px) { 
	#hero-image-header { min-height:200px;}
	#theme-content .spot-listing .card-wrapper, #theme-content .spot-feature .card-wrapper {padding:16px 10px;}
	
	.header-logo img { padding-top: 30px;}
	.header-nav.index-nav { margin-top:15px; padding-bottom:60px;}
	.header-nav a { font-size: 20px; padding:0px 15px; border-right: 2px solid #fff;}
	
	.trip-card-details .sub-title a {font-size: 18px;}
	.trip-card-details .title a { font-size: 20px;}
	.index-deco1{position:absolute; bottom:20px; right:45px;}
	.index-deco1 img {width:110px;}
	.index-deco2{ bottom:25px; left:80px;}
	.index-deco2 img {width:55px;}
	.index-deco3{ bottom:20px; left:30px;}
	.index-deco3 img {width:55px;}

	.forecast-slider .card-wrapper {padding:16px 10px!important;}
	
	
	.spot-feature-deco { position: absolute; width: 130px; right: 0px; bottom: -20px; padding-bottom:0px;}

	
	@keyframes logo-leaf {
    0%   {transform: rotate(-10deg);}
    50%  {transform: rotate(10deg);}
    100% {transform: rotate(-10deg);}
}

@keyframes logo-leaf-2 {
    0%   {transform: rotate(10deg);}
    50%  {transform: rotate(-10deg);}
    100% {transform: rotate(10deg);}
}
}

@media (min-width: 992px) { 
	#theme-content .container {padding:20px 10px;}
	
	.header-nav a:hover {color:#ffff62!important;cursor:pointer; transition: all .15s ease-in; text-shadow: 0px 3px 20px #000;text-decoration:none;}
	
	.spot-feature-content{ line-height: 36px; font-size: 18px; text-align: left; padding: 15px 10px 15px 25px;}
	.spot-feature-button img { margin: 20px 0px 0px 0px}
	
	.index-deco1{ bottom:20px; right:120px;}
	.index-deco1 img {width:130px;}
	.index-deco2{ bottom:20px; left:185px;}
	.index-deco2 img {width:65px;}
	.index-deco3{ bottom:35px; left:135px;}
	.index-deco3 img {width:65px;}
	
	.hotel-card-details .title a:hover {background-color: #dea400;text-decoration:none;}

	a.spot-card:hover .spot-card-button {background-color:#f05e1c; color:#fff; transition: all .15s ease-in;text-decoration:none!important;}
	a.spot-card:hover .city-card-button {background-color:#E2943B!important; color:#fff!important;text-decoration:none!important;}
}
.slick-prev, .slick-next{
	z-index:99;
}