/* :: Import Fonts */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");
/* :: Import All CSS */
@import url(css/bootstrap.min.css);
@import url(css/slider.css);
@import url(css/sub-nav.css);
@import url(css/animate.css);
@import url(css/owl.carousel.css);
@import url(css/magnific-popup.css);
@import url(css/font-awesome.min.css);
@import url(css/themify-icons.css);
/* :: Base CSS */
* {
margin: 0;
padding: 0; }
body {
font-family: "Roboto", sans-serif; }
h1,
h2,
h3,
h4,
h5,
h6 {
color: #2f2f2f;
font-weight: 300; }
p {
color: #565656;
font-size: 15px;
line-height: 2;
font-weight: 400;
font-family:"Microsoft JhengHei " }
a {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
text-decoration: none;
outline: none;
font-size: 14px;
font-weight: 700; }
a:hover, a:focus {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
text-decoration: none!important;
outline: none;
font-size: 12px;
font-weight: 400; }
#preloader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background:rgba(255,255,255,1);
position: fixed;
width: 100%;
height: 100%;
z-index: 1000000; }
#sonar-load {
width: 70px;
height: 70px;
border-radius: 50%;
border: 3px;
border-style: solid;
border-color: transparent;
border-top-color: #f8f5f5;
-webkit-animation: sonar 2400ms linear infinite;
animation: sonar 2400ms linear infinite;
z-index: 999; }
#sonar-load:before {
content: "";
position: absolute;
top: 7.5px;
left: 7.5px;
right: 7.5px;
bottom: 7.5px;
border-radius: 50%;
border: 3px;
border-style: solid;
border-color: transparent;
border-top-color: #f8f5f5;
-webkit-animation: sonar 2700ms linear infinite;
animation: sonar 2700ms linear infinite; }
#sonar-load:after {
content: "";
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border-radius: 50%;
border: 3px;
border-style: solid;
border-color: transparent;
border-top-color: #f8f5f5;
-webkit-animation: sonar 1800ms linear infinite;
animation: sonar 1800ms linear infinite; }
@-webkit-keyframes sonar {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes sonar {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
ul,
ol {
margin: 0; }
ul li,
ol li {
list-style: none; }
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
img {
height: auto;
max-width: 100%; }
.sonar-table {
display: table;
z-index: 9;
position: absolute;
width: 100%;
height: 100%;
margin: 0; }
.sonar-table-cell {
display: table-cell;
vertical-align: middle; }
.mt-15 {
margin-top: 15px; }
.mt-30 {
margin-top: 30px; }
.mt-50 {
margin-top: 50px; }
.mt-70 {
margin-top: 70px; }
.mt-100 {
margin-top: 100px; }
.mt-180 {
margin-top: 180px; }
.mb-15 {
margin-bottom: 15px; }
.mb-30 {
margin-bottom: 30px; }
.mb-50 {
margin-bottom: 50px; }
.ml-15 {
margin-left: 15px; }
.ml-30 {
margin-left: 30px; }
.mr-15 {
margin-right: 15px; }
.mr-30 {
margin-right: 30px; }
.mb-70 {
margin-bottom: 70px; }
.mb-100 {
margin-bottom: 100px; }
.mt-230 {
margin-top: 230px; }
@media only screen and (max-width: 767px) {
.mt-230 {
margin-top: 0px; } }
.link-else {/*right-link*/
top: 40%;
right: 10px;
bottom: 0;
margin: auto;
position: fixed;
width: 45px;
z-index:998;
opacity: 1;
}
.link-else ul li{/*right-link*/
list-style:none;
margin-top: 5px;
opacity: 0.75;
}
.link-else ul li:hover{
opacity: 1;
}
.bg-img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat; }
.bg-transparent {
background-color: transparent; }
.font-bold {
font-weight: 700; }
.font-light {
font-weight: 300; }
.height-500 {
height: 500px !important; }
.height-600 {
height: 600px !important; }
.height-700 {
height: 700px !important; }
.height-800 {
height: 800px !important; }
.mfp-wrap {
z-index: 100000; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #ffffff;
right: -30px;
padding-right: 0;
width: 30px;
height: 30px;
line-height: 25px;
text-align: center;
border: 2px solid #ffffff;
border-radius: 50%;
top: 10px; }
#scrollUp {
background-color: #232323;
border-radius: 50%;
bottom: 10px;
right: 10px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
color: #ffffff;
font-size: 30px;
height: 50px;
text-align: center;
width: 50px;
line-height: 46px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; }
#scrollUp:hover {
background-color: #d1141b; }
.no-padding{
padding:0;
}
.section-padding-200-50{
padding:215px 0 50px;
}
.section-padding-100 {
padding: 100px 0; }
.section-padding-50 {
padding: 50px 0; }
.section-padding-50-0 {
padding: 50px 0 0 0; }
.section-padding-100-70 {
padding: 100px 0 70px; }
.section-padding-100-50 {
padding: 100px 0 50px; }
.section-padding-100-0 {
padding: 100px 0 0; }
.section-padding-0-100 {
padding: 0 0 100px; }
.section-padding-100-20 {
padding: 100px 0 20px 0; }
.bg-gray {
background-color: #f8f5f5; }
.nicescroll-rails {
z-index: 999999 !important; }
.section-heading {
text-align: center;
margin-bottom: 80px;
position: relative;
z-index: 1; }
.section-heading .line {
width: 100px;
height: 1px;
background-color: #232323;
margin-bottom: 30px;
display: block; }
.section-heading h2 {
font-size: 48px;
margin-bottom: 0;
font-weight: 100;
line-height: 1.5; }
.section-heading h2 span {
font-weight: 400; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.section-heading h2 {
font-size: 36px; } }
@media only screen and (max-width: 767px) {
.section-heading h2 {
font-size: 30px; } }
.sonar-btn {
position: relative;
z-index: 1;
min-width: 180px;
height: 66px;
border: 1px solid;
border-color: #2f2f2f;
text-transform: uppercase;
color: #2f2f2f;
font-size: 12px;
letter-spacing: 1px;
border-radius: 0;
line-height: 64px;
padding: 0;
background-color: #ffffff; }
.sonar-btn:hover, .sonar-btn:focus {
background-color: #2f2f2f;
font-size: 12px;
color: #ffffff; }
.sonar-btn.white-btn {
border-color: #ffffff;
color: #ffffff;
background-color: transparent; }
.sonar-btn.white-btn:hover, .sonar-btn.white-btn:focus {
background-color: #ffffff;
color: #2f2f2f; }
.sonar-btn.btn-2 {
background-color: #2f2f2f;
font-size: 12px;
color: #ffffff; }
.sonar-btn.btn-3 {
background-color: #232323;
color: #ffffff; }
.sonar-btn.btn-3::before {
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
border: 1px solid;
border-color: #232323;
right: -6px;
bottom: -6px;
content: '';
z-index: -100; }
.sonar-btn.btn-3:hover, .sonar-btn.btn-3:focus {
background-color: #232323;
color: #ffffff; }
.bg3{ background: url(img/left.png) no-repeat left 60%,#fff;}
.bg-overlay {
position: relative;
z-index: 1; }
.bg-overlay::after {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2f2f2f;
opacity: 0.85;
content: ''; }
.bg-overlay-black {
position: relative;
z-index: 1; }
.bg-overlay-black::after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.85;
content: ''; }
.bg-overlay-white {
position: relative;
z-index: 1; }
.bg-overlay-white::after {
position: absolute;
z-index: -2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(230, 241, 255, 0.5);
content: ''; }
.slide-background-overlay {
position: relative;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 60%; }
.slide-background-overlay::after {
content: '';
position: absolute;
height: 60%;
width: 100%;
z-index: -1;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0) 100%); }
.grids {
position: fixed;
width: 100%;
height: 100%;
z-index: -1; }
.grids div {
width: 1px;
height: 100%;
background-color: #e0e3e4; }
.grids div:nth-child(5) {
background-color: #bababa; }
.grids div:first-child, .grids div:last-child {
background-color: transparent; }
/* :: Header Area CSS */
.header-area {
position: fixed;
z-index: 995;
top: 0;
left: 0;
width: 100%;
height: auto;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
background:#fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
padding: 4px 10%; }
.header-area .logo-area a {
color: #ffffff;
font-size: 36px;
font-weight: 100; }
.header-area .logo-area img{ height:80px; margin:5px auto;}
@media only screen and (max-width: 767px) {
.header-area .logo-area a {
font-size: 24px; } }
.header-area .menu-content-area .header-social-area {
margin-right: 30px; }
.header-area .menu-content-area .header-social-area a {
font-size: 18px;
padding: 0 20px;
color: #000;
font-weight:normal; }
.copywrite-text .header-social-area {
margin:0 20px; }
.copywrite-text.left{ text-align:center;}
.copywrite-text .header-social-area a {
font-size: 18px;
padding: 0 10px;
color: #ffffff; }
@media only screen and (max-width: 767px) {
.header-area .menu-content-area .header-social-area a{
padding: 0 5px;
font-size: 14px; }
.copywrite-text .header-social-area a{
padding: 0 5px;
line-height:50px;} }
@media only screen and (max-width: 767px) {
.header-area .menu-content-area .header-social-area{
margin-right: 15px; } }
@media only screen and (max-width: 480px) {
.header-area .menu-content-area .header-social-area{
margin-right: 5px; } }
@media only screen and (max-width: 767px) {
.header-area {
padding: 0px 0; } }
.navbar-toggler-icon{display:none;}
.PC-menu li,.PC-menu a.info-btn{display:inline-block; text-decoration:none;
padding: 5px 0px 0!important; width:auto!important; }
.PC-menu li a span{ display:block; margin:auto; font-size:12px; text-align:center;}
.PC-menu li img{ padding-left:5px;}
.PC-menu li a:hover img{opacity:0.6;}
@media only screen and (max-width: 1679px) {
.PC-menu li{ padding:12px 15px!important;}
}
.navbar-toggler-icon {
background-image: url("img/menu-icon.png");
background-size:100% auto;
width:40px;
height:30px;
cursor: pointer; }
.mainMenu {
position: fixed;
width: 480px;
height: 100%;
top: 0;
right: -500px;
background: rgba(255,255,255,0.9);
z-index: 99999;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 30px 15px;
-webkit-transition-duration: 800ms;
transition-duration: 800ms;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); }
.mainMenu .closeIcon {
position: absolute;
right: 50px;
top: 50px;
z-index: 9;
color: #626262;
font-size: 35px;
font-weight:900;
cursor: pointer;
-webkit-transition-duration: 750ms;
transition-duration: 750ms; }
.mainMenu .closeIcon:hover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
@media only screen and (max-width: 767px) {
.mainMenu .closeIcon {
right: 30px;
top: 30px; } }
.mainMenu .logo-area a {
color: #ffffff;
font-size: 30px;
display: block;
font-weight: 100; }
@media only screen and (max-width: 767px) {
.mainMenu .logo-area a {
font-size: 24px; } }
.mainMenu .copywrite-text p {
margin-bottom: 0;
color: #2b2b2b; }
@media only screen and (max-width: 767px) {
.mainMenu .copywrite-text p {
font-size: 14px; } }
.mainMenu .copywrite-text p{
font-weight: 100;
color: #2b2b2b;
font-size: 14px;
margin-top:10px;
padding-top:5px;
border-top:1px solid #967048;
font-family:'Microsoft JhengHei'; }
.mainMenu .nav-link {
color: #000;
font-size: 18px;
position: relative;
z-index: 1;
font-weight: 300;
padding: 12px 15px; }
.mainMenu .nav-link span{ display:block; margin:auto; font-size:12px;}
.nav-link:hover{opacity:0.6;-webkit-transition-duration: 500ms;
transition-duration: 500ms; }
.nav-link:hover a{color:#d1141b;}
@media only screen and (max-width: 767px) {
.mainMenu .nav-link {
font-size: 14px;
padding: 10px; } }
/*.mainMenu .nav-link::after {
content: '';
bottom: 0;
width: 30px;
height: 1px;
background-color: rgba(255, 255, 255, 0.5);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
z-index: 5;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; }
.mainMenu .nav-link:hover::after, .mainMenu .nav-link:focus::after {
width: 70px;
background-color: white; }*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.mainMenu {
padding: 30px 15px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.mainMenu {
padding: 30px 15px; } }
@media only screen and (max-width: 767px) {
.mainMenu {
padding: 0 15px;
width: 300px; } }
@media only screen and (max-width: 1679px) {
.PC-menu li a{padding: 0px!important;}
}
@media only screen and (max-width: 1439px) {
.PC-menu li{ padding:12px 8px!important;}
}
@media only screen and (max-width: 1365px) {
.PC-menu li{ padding:12px 3px!important;}
}
@media only screen and (max-width: 1279px) {
.PC-menu{display:none;}
.navbar-toggler-icon{display:block;}
}
/* :: Menu Open CSS */
.menu-open .mainMenu {
right: 0; }
/* :: Hero Slides Area CSS */
/*.hero-slides .single-hero-slide:after{ position:absolute; background:url(img/bg-img/slider-top.png) no-repeat center bottom; width:100%; height:430px;}*/
.hero-slides .single-hero-slide {
height: 1000px;
position: relative;
z-index: 1;
padding: 0 40px 100px;
/*-webkit-transition-duration: 800ms;
transition-duration: 800ms;*/
overflow: visible;
cursor: pointer; }
.hero-slides .single-hero-slide .hero-slides-content {
position: relative;
z-index: 1;
bottom: 0; }
.hero-slides .single-hero-slide .hero-slides-content .line {
width: 100px;
height: 2px;
background-color: #d3b14b;
margin-bottom: 0px;
display: block;
}
.hero-slides .single-hero-slide .hero-slides-content h2 {
color: #d3b14b;
font-weight:400;
}
.hero-slides .single-hero-slide .hero-slides-content p {
color: #ffffff;
margin-bottom: 0;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
margin-top: 140px; }
.hero-slides .single-hero-slide:hover p {
margin-top: 40px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-slides .single-hero-slide {
height: 800px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-slides .single-hero-slide {
height: 700px; } }
@media only screen and (max-width: 767px) {
.hero-slides .single-hero-slide {
height: 550px;
} }
@media only screen and (max-width: 480px) {
.hero-slides .single-hero-slide {
height: 400px; } }
.hero-slides .owl-dots {
position: absolute;
left: 50px;
bottom: 50px; }
.hero-slides .owl-dots .owl-dot {
width: 8px;
height: 8px;
border: 1px solid #6a6a67;
margin: 0 5px;
border-radius: 50%;
display: inline-block; }
.hero-slides .owl-dots .owl-dot.active {
border: 1px solid #ffffff;
background-color: #ffffff; }
/* :: Portfolio Area CSS */
#about,#rooms,#rooms1,#rooms2,#rooms3,#news,#scenic,#r_content,#3d{ margin-top:-90px; padding-top:90px;}
#fac,#media{ margin-top:-90px; padding-top:90px;}
#rooms1,#rooms2,#rooms3,#location{margin-top:-100px; padding-top:100px;}
.star-bg{height:90px; background:url(img/star-0.png) no-repeat left center,url(img/star-1.png) no-repeat 100% center;}
.portfolio-area {
overflow:hidden;
padding:90px 0px 0px;
}
.portfolio-area .container{max-width:85%;}
.portfolio-area .portfolio-title h2{
font-size: 54px;
line-height:90px;
text-align: center;
font-weight: 100;
color:#fff;
letter-spacing:1px;}
.portfolio-area .portfolio-title h2 span{display:block;}
.portfolio-area .portfolio-title h2 span {
font-weight: 400; }
.about{ background: #fff; padding-bottom:60px; padding-top:100px;}
.about p{color:#000000;}
.about .bottom img{border-radius:15px; margin-bottom:10px;}
.about .bottom span{ font-size:20px; font-weight:500; padding:7px 5px 5px; width:auto;}
.about .bottom a {color:#000000;}
.about .bottom a:after{ display:block; height:1px; width:80%; content:''; background:#df0010; margin-bottom:30px;}
.about .bottom a:hover{color:#df0010;-webkit-transition: 300ms;
transition: 300ms;}
.about1{ padding:90px 0 0;}
.about1 .left1{ padding:0px 70px 70px 50px;}
.about1 .left1 img{ margin-bottom:30px;}
.about1 .left1 p { font-size:18px;}
.about1 .left1 p span{ display:block;}
.about1 .right1{padding-top:25px; padding-bottom:25px; position:relative;}
.about1 img:nth-child(1){position:relative; z-index:0;}
.about-owl .owl-nav,.about-owl .owl-dots{display:none;}
.about1-2 p{font-size:18px;}
.btn1{ position:absolute; top:0%; right:3%;}
.btn2{ position:absolute; top:19%; right:3%;}
.btn3{ position:absolute; top:13%; right:35%;}
.btn4{ position:absolute; top:37%; right:30%;}
.btn5{ position:absolute; top:65%; left:15%;}
.btn1 a:hover img,.btn2 a:hover img,.btn3 a:hover img,.btn4 a:hover img,.btn5 a:hover img{transform:translateY(-3px);-webkit-transition: 500ms;
transition: 500ms;}
.about1 .right1 img{border-radius:15px; }
.about1 .right1 p{ margin:30px auto auto; width:65%; display:block;}
.about1 .right1 p span{ display:block;}
.about-stit img{ margin:auto auto 30px;}
.about-slider img:nth-child(2){ display:none;}
.about3 { padding:0 90px 90px; background:url(img/r-bg-line.jpg) no-repeat left 95%,url(img/r-bg.jpg) no-repeat center -50px;}
.about3 .left2{ margin-top:-80px;}
.abtn{ position:relative; width:33.3333%; padding:15px; overflow:hidden;}
.abtn a{width:120%!important; margin-left:8px; background:#ccc; padding:0;}
.abtn span{font-family:'Microsoft JhengHei'; width:100%; color:#fff; font-size:25px; font-weight:bold; text-align:center;-webkit-transition-duration: 500ms;
transition-duration: 500ms;opacity:1; z-index:2; top:47%; position:absolute; display:block; margin-left:-15px}
.abtn:after{ position:absolute; height:6%; width:6%; z-index:2;bottom:20px; left:48%;display:inline-block;font:normal normal normal 20px/1 FontAwesome;font-size:30px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; content:"\f067";color:#FFFFFF;-webkit-transition-duration: 500ms;
transition-duration: 500ms;opacity: 0;}
.abtn:hover:after{ bottom:45%;opacity: 1;}
.abtn:hover span{ opacity: 0;}
.abtn img{background:rgba(56,37,30,1);-webkit-transition-duration: 500ms;
transition-duration: 500ms;position:relative; zindex:1;}
.abtn img:before{ background:rgba(0,0,0,1); width:100%; height:100%; position:absolute; z-index:2;display:block; content:'123';}
.abtn:hover img{}
.abtn:hover span{}
.rooms {padding:40px 0px 45px; background: url(img/room-bg2.png) no-repeat 95% 90%,url(img/room-bg1.png) no-repeat bottom center, #fff; background-size:auto,auto;}
.rooms .tit{ margin-top:10px;}
.fac {padding:40px 0px 150px; background: url(img/bg-img/fac-bg.png) no-repeat 10% 58%,url(img/location-stit.png) no-repeat bottom right, url(img/fac-bottom.jpg) no-repeat center bottom, url(img/bg-img/bg.jpg) no-repeat center; background-size:auto,auto;}
.location p{font-size:18px; color:#000000; padding:50px 0;}
.about5 img{width:100%; height:auto!important; display:block;}
.about-page {padding:150px 0px 100px; background:url(img/bg-img/about-page-bg.jpg) no-repeat center bottom #cab6a1;}
.about-page .stit{ text-align:right; margin-bottom:20px;}
.about-page .stit img{ margin-right:0;}
.about-page .text{-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl; float:right; padding:50px; font-size:18px; background:rgba(255,255,255,0.8); height:500px;}
.about-page .text span{ display:inline-block}
.news{padding:0px 0px; background:url(img/new-top.png) no-repeat center top #d1141b;border-radius:15px;
display:flex;
align-items:stretch;}
.new-left{ background:url(img/news-pic.jpg) no-repeat center center; background-size:cover;border-radius:15px;}
.news img{border-radius:15px;}
.meal{padding:100px 0px 100px; min-height:749px; background:url(img/bg-img/meal-bg.jpg) no-repeat center 10%;}
.art{background:url(img/bg-img/art-bg.jpg) no-repeat center 10%;}
.package{background:url(img/bg-img/package-bg.jpg) no-repeat center 10%;}
.meal-box{ background:rgba(255,255,255,0.8)}
.art .meal-box{ background:rgba(204,204,204,1); border:3px solid #333;}
.package .col-md-4,.package .col-md-8{ padding:0;}
.meal-box .img{ overflow:hidden;}
.meal-box .img img:nth-child(2){ display:none;}
.meal-box .text{ padding:0 20px 20px;}
.meal-box .text h2{color:#5F2903;}
.meal-box .text p{color:#dab866;}
.art .text p{color:#fff;}
.meal .col-md-4,.meal .col-md-8{ float:left;}
.meal-box .img img{
transition: all .35s linear;
}
.meal-box .img:hover img{ -webkit-transform: scale(1.1);
transform: scale(1.1);
}
.news .stit,.meal .stit{ padding-top:80px;}
.new-left{ padding:0!important; z-index:2;}
.news-txt{ padding:50px;}
.news-txt h2{font-size: 18px;
line-height:26px;
color:#fff;
font-weight:bold;
margin-top:30px;
font-family:'Microsoft JhengHei';}
.scenic h2{
font-size: 22px;
line-height:30px;
color:#85745d;
font-weight:bold;
margin-top:15px;
font-family:'Microsoft JhengHei';}
.news-txt a:hover{text-decoration:none;}
.news-txt a:hover h2{color:#000;}
.scenic h2 span{ display:inline-block;}
.news-txt p{color:#fff;font-size: 16px;font-family:'Microsoft JhengHei'; border-bottom:1px solid #efefef;}
.scenic p{color:#000;font-size: 16px;font-family:'Microsoft JhengHei';}
.scenic{ background:url(img/scenic-bg.png) no-repeat left bottom; padding:80px 0 220px;}
.scenic-owl .owl-dots .owl-dot,.news-owl .owl-dots .owl-dot {
width: 10px;
height: 10px;
border: 1px solid #6a6a67;
margin: 0 5px;
border-radius: 50%;
display: inline-block; }
.scenic-owl .owl-dots .owl-dot.active,.news-owl .owl-dots .owl-dot.active {
border: 1px solid #6a6a67;
background-color: #6a6a67; }
#new-owl .owl-nav{ bottom:0px!important;position:relative;}
.scenic-owl .owl-nav,.news-owl .owl-nav{ display:none;}
.scenic-owl .owl-nav .owl-next {
background: url(../images/next.png) no-repeat center!important;
position: absolute;
width:45px;
height:30px;
right: 0%;
bottom:0;
color:none!important;
}
.scenic-owl .owl-nav .owl-prev {
background: url(../images/pre.png) no-repeat center!important;
position: absolute;
left: 0%;
width:45px;
height:30px;
bottom:0;
}@media only screen and (max-width: 1680px) {
.btn1,.btn2,.btn3,.btn5{ max-width:22%;}
.btn4{max-width:33%;}
}
@media only screen and (min-width: 1080px) and (max-width: 1680px) {
.btn1{ position:absolute; top:0%; right:7%;}
.btn2{ position:absolute; top:19%; right:7%;}
}
@media only screen and (max-width: 1679px) {
.portfolio-area {
background:url(img/about/about-bg-right.png) no-repeat right 50%,url(img/bg-img/about-left.png) no-repeat left 20%,#fff;
background-size:auto,65% auto;
}
.about4 {padding:80px 0px; background: url(img/bg-img/room-bg.png) no-repeat left bottom, url(img/bg-img/room-bg2.png) no-repeat right 20%,url(img/bg-img/rooms-bg.png) no-repeat bottom left, url(img/bg-img/rooms-bg.jpg) repeat-y top left;
background-size:15% auto,15% auto,auto,auto}
.new-left{ min-height:500px;}
.fac {padding:80px 0px 180px; background: url(img/bg-img/fac-bg.png) no-repeat 10% 58%,url(img/location-stit.png) no-repeat bottom 130%, url(img/fac-bottom.jpg) no-repeat center bottom, url(img/bg-img/bg.jpg) no-repeat center; background-size:33%,120%,auto,auto;}
.rooms {background-size:30%,auto;}
}
@media only screen and (max-width: 1366px) {
.portfolio-area {
background:url(img/about/about-bg-right.png) no-repeat right 60%,url(img/bg-img/about-left.png) no-repeat left 20%,#fff;
background-size:auto,65% auto;
}
.about4 {padding:80px 0px; background: url(img/bg-img/room-bg.png) no-repeat left bottom, url(img/bg-img/room-bg2.png) no-repeat right 30%,url(img/bg-img/rooms-bg.png) no-repeat bottom left, url(img/bg-img/rooms-bg.jpg) repeat-y top left;
background-size:15% auto,15% auto,auto,auto}
.about1 .right1 p{ width:75%;}
}
@media only screen and (max-width: 1365px) {
/*.about1 .col-md-6{ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
.about1{display:flex;
flex-direction:column-reverse;}*/
}
}
@media only screen and (max-width: 1279px) {
.about4 {padding:80px 0px; background: url(img/bg-img/rooms-bg.png) no-repeat bottom left, url(img/bg-img/rooms-bg.jpg) repeat-y top left;
background-size:auto,auto}
.news{}
.about-slider{ margin-top:-50px;}
}
@media only screen and (max-width: 1080px){
.portfolio-area {
background:url(img/about/about-bg-right.png) no-repeat right 70%,url(img/bg-img/about-left.png) no-repeat left 20%,#fff;
background-size:auto,65% auto;
}
.about1 .right1 p{ width:100%;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.portfolio-area {
background:url(img/about/about-bg-right.png) no-repeat right 30%,url(img/bg-img/about-left.png) no-repeat left 20%,#fff;
background-size:70% auto,65% auto;
}
.portfolio-area .portfolio-title h2 {
font-size: 36px; }
}
@media only screen and (max-width: 767px) {
.portfolio-area .portfolio-title h2 {
font-size: 30px; }
.portfolio-area .portfolio-title h2{line-height:60px;}
}
.single-portfolio-item {
position: relative;
text-align:right;
z-index: 1; width:100%;}
.single-portfolio-item .backend-content .dots {
position: absolute;
z-index: -1;
top: -100px;
left: -150px; }
.single-portfolio-item .backend-content{width:100%;}
.single-portfolio-item .backend-content h2 {
position: absolute;
font-size: 180px;
color: #44332b;
z-index: -10;
top: -150px;
font-weight:400;
left: 45%;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.single-portfolio-item .backend-content h2 {
font-size: 170px;
top: -120px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.single-portfolio-item .backend-content h2 {
font-size: 80px;
top: -100px; } }
@media only screen and (max-width: 767px) {
.single-portfolio-item .backend-content h2 {
font-size: 80px;
top: -100px; }
}
.portfolio-meta {
background:url(img/about/text-bg.png) no-repeat center;
padding: 90px 60px 35px 260px;
width:900px;
min-height:260px;
position:absolute;
bottom:0;
right:0;
}
.single-portfolio-item .portfolio-meta p {
font-weight: 500;
font-size: 14px;
margin-bottom: 5px; }
.portfolio-meta h2 {
font-size: 18px;
line-height:30px;
font-family:'Microsoft JhengHei';}
.portfolio-meta-left h2{ margin-top:-110px; padding-right:20px;}
.offset-md-half{margin-left:4%;}
.single-portfolio-item .portfolio-meta span{display:block;}
@media only screen and (max-width: 1679px) {
.portfolio-meta-left h2{ margin-top:-80px; padding-right:0px;}
.about1 .right1 p span{ display:inline; text-align:left!important;}
}
.single-portfolio-item.portfolio-item-2 .backend-content .dots {
position: absolute;
z-index: -1;
top: 75px;
left: auto;
right: 70px; }
.single-portfolio-item.portfolio-item-3 .backend-content .dots {
top: 0;
left: -200px;
right: auto;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.single-portfolio-item.portfolio-item-3 .backend-content h2 {
top: -150px;
left: 40%;
right: auto; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.single-portfolio-item.portfolio-item-3 .backend-content h2 {
top: -130px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.single-portfolio-item.portfolio-item-3 .backend-content h2 {
top: -90px;
font-size: 100px; } }
@media only screen and (max-width: 767px) {
.single-portfolio-item.portfolio-item-3 .backend-content h2 {
top: -70px; } }
@media only screen and (max-width: 767px) {
.single-portfolio-item.portfolio-item-3 {
margin-bottom: 0px; } }
.single-portfolio-item.portfolio-item-4 {
top: 0px;
z-index:0; }
.single-portfolio-item.portfolio-item-4 .backend-content .dots {
top:-70px;
bottom: px;
left: 68%;
right: auto;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.single-portfolio-item.portfolio-item-4 .backend-content h2{
left:270px;
}
@media only screen and (max-width: 767px) {
.single-portfolio-item.portfolio-item-4 {
top: 0;
margin-bottom: px; } }
.single-portfolio-item.portfolio-item-5 {
top: 60px;
z-index:0;}
.single-portfolio-item.portfolio-item-5 .backend-content .dots { position: absolute;left:-50px;top: -200px;}
@media only screen and (max-width: 767px) {
.single-portfolio-item.portfolio-item-5 {
top: 0;
height: auto;
margin-bottom: 100px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.single-portfolio-item.portfolio-item-5 {
top:80px; }
.single-portfolio-item.portfolio-item-5 .backend-content .dots{display:none;} }
.single-portfolio-item.portfolio-item-6 {
top: 0;
float:right;
}
p.portfolio-date{color:#fff; font-family:'Microsoft JhengHei';font-size:18px; line-height:46px; width:80%; margin: 20px auto 0; position:relative;}
p.portfolio-date span{display:inline-block;}
@media only screen and (max-width: 767px) {
.single-portfolio-item.portfolio-item-6 {
height: auto;
margin-bottom: 0px; } }
.single-portfolio-item.portfolio-item-7 {
margin-top: 50px;
height:auto; }
.single-portfolio-item.portfolio-item-7 .backend-content .dots {
position: absolute;
z-index: -1;
top: auto;
bottom: 0;
left: auto;
right: -150px; }
.single-portfolio-item.portfolio-item-7 .backend-content h2 {
top: -0px;
left:-1%;
right: auto;
z-index:0;
position:absolute;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.single-portfolio-item.portfolio-item-7 .backend-content h2 {
top: -100px; } }
@media only screen and (max-width: 767px) {
.single-portfolio-item.portfolio-item-7 .backend-content h2 {
top: -0px; } }
.rbtn {width:25%; float:left; padding:0 8px;text-align:center;}
.rbtn p{ color:#000000; line-height:30px; border-left:3px solid #d1141b; text-align:left; padding-left:15px; margin-top:5px; width:100%;position:relative;font-family:'Microsoft JhengHei';font-size:18px;}
.rbtn p span{font-size:14px;}
.rbtn p img{ position:absolute; right:10px;}
.rbtn a img{ margin:0px auto 0; max-width:100%;}
.rbtn a:hover{ text-decoration:none;}
.rbtn:hover img{
opacity:0.8;
-webkit-transition: 500ms;
transition: 500ms;}
.rbtns:hover {background:url(img/bg-img/rbtns-bg2.jpg) no-repeat center center;-webkit-transition-duration: 500ms;
transition-duration: 500ms;}
.fbtn {width:33%; float:left; padding:0 8px;text-align:center;}
.fbtn2 {width:33%; float:left; padding:8px;text-align:center;}
.fbtn p{ background:#efefef; font-size:18px; color:#000000; text-align:left; padding-left:10px;}
.fbtn a { margin:5px auto 0; max-width:100%!important;}
.fbtn:hover img{transform:translateY(-2px);
opacity:0.85;
-webkit-transition: 500ms;
transition: 500ms;}
.fbtn2:hover img{
opacity:0.85;
-webkit-transition: 500ms;
transition: 500ms;}
.fbtns:hover {background:url(img/bg-img/rbtns-bg2.jpg) no-repeat center center;-webkit-transition-duration: 500ms;
transition-duration: 500ms;}
/* :: Call to Action Area CSS */
.call-to-action-content {
text-align: center; }
.call-to-action-content h2 {
font-weight: 100;
font-size: 72px;
margin-bottom: 15px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.call-to-action-content h2 {
font-size: 55px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.call-to-action-content h2 {
font-size: 36px; } }
@media only screen and (max-width: 767px) {
.call-to-action-content h2 {
font-size: 30px; } }
.call-to-action-content h5 {
font-size: 48px;
margin-bottom: 0; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.call-to-action-content h5 {
font-size: 30px; } }
@media only screen and (max-width: 767px) {
.call-to-action-content h5 {
font-size: 24px; } }
.sonar-call-to-action-area {
position: relative;
z-index: 1;
overflow: hidden; }
.sonar-call-to-action-area .backEnd-content h2 {
position: absolute;
font-size: 230px;
color: #f0f0f0;
z-index: -1;
top: -30px;
left: -3%; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sonar-call-to-action-area .backEnd-content h2 {
font-size: 170px;
top: 0; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-call-to-action-area .backEnd-content h2 {
font-size: 150px;
top: 0; } }
@media only screen and (max-width: 767px) {
.sonar-call-to-action-area .backEnd-content h2 {
font-size: 100px; } }
/* :: Footer CSS */
.footer-area {
position: relative;
z-index: 1;
overflow: hidden;
background:#2b2b2b;
padding:0px 0 0;}
.footer-area .icon{ background:#d1141b; min-height:60px; width:60px; display:inline-block; margin-bottom:4px;}
.footer-area .icon:hover{ background:#000;-webkit-transition-duration: 500ms;
transition-duration: 500ms;}
.about .icon{ background:#d1141b; min-height:60px; width:60px; display:inline-block; margin-bottom:4px;}
.about .icon:hover{ background:#000;-webkit-transition-duration: 500ms;
transition-duration: 500ms;}
.footer-area hr{ background:#fff;}
.footer-area .copywrite-text {
padding: 10px;
}
.footer-area .copywrite-text span{ display:block;}
.footer-area .copywrite-text p {
font-weight: 300;
text-align:left;
color:#000;
font-size:18px;
font-family:'Microsoft JhengHei';
display:block;
padding:0 10px;
}
.footer-area .copywrite-text td{ padding:3px 0; letter-spacing:1px;}
.footer-area .copywrite-text td img{ margin:-2px 5px 0 0;}
.footer-area .copy-bottom{display:block;width:100%; margin:auto auto 20px;font-weight: 300;
text-align:left;
color:#fff;
font-size:18px;
padding-top:10px;
font-family:'Microsoft JhengHei'; text-align:center; border-top:1px #e5caa5 solid;}
.footer-area .copy-bottom span{ display:inline-block;}
.footer-area .copywrite-text table td,.footer-area .copywrite-text a ,.footer-area .copy-bottom a{
color: #fff;
font-weight: 300;
font-size: 18px; }
.footer-area .top{ background:#bbbbbb; padding-top:20px;}
.footer-area .bottom{ background:#fff; padding:20px 10px;}
.footer-area .bottom .copywrite-text img{max-width:19%;}
.footer-area .bottom .copywrite-text a:hover img{transform:translateY(-3px);-webkit-transition: 500ms;
transition: 500ms;}
.footer-area .copywrite-text .tit{color:#FFFFFF; border-bottom:1px solid #fff;font-size:18px;}
.footer-area .copywrite-text .tit1{color:#d1141b; border-bottom:1px solid #d1141b;font-size:18px;}
.footer-area .copywrite-text table td:nth-child(1){ vertical-align:top;}
.footer-area .copywrite-text table td{ line-height:32px;}
.footer-area .copywrite-text a{ color:#000000;}
.footer-area .copywrite-text a:hover, .footer-area .copywrite-text a:focus {
color: #fff!important; }
.footer-area .backEnd-content .dots {
position: absolute;
right: -50px;
top: 0;
z-index: -1; }
.footer-area .backEnd-content h2 {
position: absolute;
font-size: 230px;
color: #f0f0f0;
z-index: -1;
top: -50px;
left: -50px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer-area .backEnd-content h2 {
font-size: 170px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer-area .backEnd-content h2 {
font-size: 120px;
top: 0; }
.footer-area .offset-2{ margin-left:0px;}
.footer-area .col-md-3{-ms-flex:0 0 36%;flex:0 0 36%;max-width:36%;}}
@media only screen and (max-width: 767px) {
.footer-area .backEnd-content h2 {
font-size: 80px;
top: 0;
left: -30px; } }
/* :: Hero Area CSS */
.hero-area {
background-color: #232323;
position: relative;
z-index: 1;
overflow: hidden;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.hero-area .backEnd-content .dots {
position: absolute;
right: -200px;
top: 50%;
z-index: -2;
opacity: 0.1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.hero-area .hero-thumbnail,
.hero-area .hero-content {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
min-width: 25%;
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767px) {
.hero-area .hero-thumbnail,
.hero-area .hero-content {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
min-width: 100%; } }
.hero-area .hero-content {
height: 880px;
padding: 100px 0; }
.hero-area .hero-content .line {
width: 100px;
height: 2px;
background-color: #d3b14b;
margin-bottom: 30px;
display: block; }
.hero-area .hero-content h2 {
color: #d3b14b;
font-size: 48px;
margin-bottom: 25px;
font-weight:400px;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .hero-content h2 {
font-size: 40px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .hero-content h2 {
font-size: 30px; } }
@media only screen and (max-width: 767px) {
.hero-area .hero-content h2 {
font-size: 30px; } }
.hero-area .hero-content p {
color: #ffffff;
margin-bottom: 30px; }
.hero-area .hero-content.aboutUs {
height: 1100px; }
@media only screen and (max-width: 767px) {
.hero-area .hero-content.aboutUs {
height: auto; } }
@media only screen and (max-width: 767px) {
.hero-area .hero-content {
height: auto; } }
.hero-area .hero-thumbnail.aboutUs::before {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
left: 0;
background-color: #ffffff;
content: '';
z-index: 1; }
@media only screen and (max-width: 767px) {
.hero-area .hero-thumbnail.aboutUs::before {
display: none; } }
@media only screen and (max-width: 767px) {
.hero-area .hero-thumbnail {
height: 400px; } }
.room-area {
background: url(img/room-bg2.png) no-repeat 95% 90%,url(img/room-bg1.png) no-repeat right bottom,url(img/bg-img/bg.jpg) no-repeat center;
overflow: hidden;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position:relative;
padding:180px 0px 80px;
}
.room-owl img{border-radius:15px;}
.room-right2 p{ font-size:18px; color:#000000; border-bottom:1px solid #d1141b;}
.room-right,.room-right2{ /*background:rgba(51,51,51,0.7); */
padding:35px 15px 0;}
.room-right .line {
width: 100px;
height: 2px;
background-color: #d3b14b;
display: block; }
.room-right h2{color:#d3b14b; font-weight:400; font-size:46px; margin-bottom:20px;}
.room-right p{font-family:'Microsoft JhengHei'!important;color:#000!important;}
.room-right table{
width:100%;
margin:0px auto 0;
}
.room-right table td{
font-family:'Microsoft JhengHei';
line-height:32px;
color:#333;
}
.info table td{
font-family:'Microsoft JhengHei';
line-height:30px;
}
.info table td img{ margin:10px 0 5px;}
.info table td i{ margin-top:5px; margin-right:5px;}
.wbtn:hover img{
box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.3);
-webkit-transition: 500ms;
transition: 500ms;}
.room-right table.price{width:90%; margin:10px 0 30px;}
.room-right table.price td{border:1px solid #333;width:20%;text-align:center;}
.room-right table.price td span{display:inline-block;}
/* :: Service Area CSS */
.single-services-area {
position: relative;
z-index: 1;
margin-bottom: 50px; }
.single-services-area table td{color:#fff; line-height:32px; font-family:'Microsoft JhengHei'; vertical-align:top;}
.single-services-area img {
margin-bottom: 20px; }
.single-services-area h4 {
font-size: 28px;
margin-bottom: 40px; }
.single-services-area p {
margin-bottom: 0; }
.single-services-area table span{display:inline-block;}
/* :: Testimonials Area CSS */
.sonar-services-area{ background:; padding-bottom:250px;}
.sonar-services-area .portfolio-title h2 {
font-size: 54px;
line-height:90px;
text-align: center;
font-weight: 100;
color:#fff;
letter-spacing:1px;
font-weight: 400;
padding: 120px 0 50px;}
.sonar-services-area .container{ max-width:75%;}
#whole{ margin-top:-115px; padding-top:115px;}
.sonar-testimonials-area {
background: url(img/whole.jpg) no-repeat right bottom; background-size:80% auto;
position: relative;
z-index: 1;
padding: 70px 0 70px;
margin: 0 50px;
}
.section-heading {
margin-bottom: 10px;}
.sonar-testimonials-area .section-heading .line {
background-color: #d3b14b;
height:2px;
margin-bottom: 0px;
}
.sonar-testimonials-area .section-heading h2 {
color:#d3b14b;
font-weight:400;}
.sonar-testimonials-area::before {
position: absolute;
width: 20%;
height: 100%;
left: 0;
top: 0;
content: ''; }
.sonar-testimonials-area .testimonial-content {
padding: 50px;
position: relative;
z-index: 1;
left: -15px;
box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.15);
background:#322323; }
.sonar-testimonials-area .testimonial-content table{
border-collapse:separate;
border-spacing:1px;
width:98%;
margin:10px auto 0;
}
.sonar-testimonials-area .testimonial-content table td{
font-family:'Microsoft JhengHei';
line-height:32px;
color:#fff;
text-align:center;
}
.sonar-testimonials-area .testimonial-content table td span{display:inline-block;}
@media only screen and (max-width: 767px) {
.sonar-testimonials-area .testimonial-content {
padding: 50px 15px 50px 15px; } }
.sonar-testimonials-area .single-tes-slide p {
margin-bottom: 40px;
font-style: italic; }
.sonar-testimonials-area .single-tes-slide h6 {
margin-bottom: 0;
font-style: italic; }
.sonar-testimonials-area .owl-dots {
position: absolute;
top: 0;
left: -100px;
z-index: 10;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.sonar-testimonials-area .owl-dots .owl-dot {
width: 8px;
height: 8px;
border: 1px solid #6a6a67;
border-radius: 50%;
margin: 8px 0;
display: block; }
.sonar-testimonials-area .owl-dots .owl-dot.active {
border-color: #232323;
background-color: #232323; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sonar-testimonials-area .owl-dots {
top: 20%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-testimonials-area .owl-dots {
top: 30%; } }
@media only screen and (max-width: 767px) {
.sonar-testimonials-area .owl-dots {
display: none; } }
@media only screen and (max-width: 767px) {
.sonar-testimonials-area {
margin: 0 15px; } }
/* :: Portfolio Area CSS */
.sonar-projects-area {
position: relative;
z-index: 1;
padding: 100px 35px 50px; }
.sonar-projects-area .single_gallery_item {
position: relative;
z-index: 1;
margin-bottom: 50px; }
.sonar-projects-area .single_gallery_item .gallery-content {
padding-top: 30px; }
.sonar-projects-area .single_gallery_item .gallery-content h4 {
margin-bottom: 10px; }
@media only screen and (max-width: 767px) {
.sonar-projects-area .single_gallery_item .gallery-content h4 {
font-size: 20px; } }
.sonar-projects-area .single_gallery_item .gallery-content p {
margin-bottom: 0; }
.sonar-portfolio-menu {
position: absolute;
bottom: 40px;
right: 0;
width: 50%;
z-index: 100; }
.sonar-portfolio-menu .btn {
padding: 5px 0;
border: none;
border-bottom: 2px solid;
border-color: transparent;
background-color: transparent;
color: #ffffff;
border-radius: 0;
margin: 0 20px; }
.sonar-portfolio-menu .btn.active {
border-color: #ffffff; }
.sonar-portfolio-menu .btn:hover, .sonar-portfolio-menu .btn:focus {
box-shadow: none; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sonar-portfolio-menu .btn {
margin: 0 10px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-portfolio-menu .btn {
margin: 0 5px;
font-size: 14px; } }
@media only screen and (max-width: 767px) {
.sonar-portfolio-menu .btn {
margin: 0 5px;
font-size: 14px; } }
@media only screen and (max-width: 767px) {
.sonar-portfolio-menu {
width: 100%;
bottom: 20px; } }
/* :: Blog Area CSS */
sonar-blog-area{ background:url(img/bg-img/bg.jpg) no-repeat center}
.sonar-blog-area,
.sonar-contact-area {
position: relative;
z-index: 1;
overflow: hidden; }
.sonar-blog-area .backEnd-content .dots,
.sonar-contact-area .backEnd-content .dots {
position: absolute;
top: -50px;
right: -200px; }
.single-blog-area {
position: relative;
z-index: 1; }
.single-blog-area .blog-post-thumbnail {
position: relative;
z-index: 1; }
.single-blog-area .blog-post-thumbnail .post-date{
position: absolute;
width: 45px;
height: auto;
padding: 15px 8px;
background-color: #000;
top: -20px;
left: 15px;
font-weight:400;
color: #ffffff;
text-align: center;
line-height: 2;
font-size: 18px; }
.single-blog-area .blog-post-thumbnail .post-date a:hover, .single-blog-area .blog-post-thumbnail .post-date a:focus {
font-weight: 100;
font-size: 15px; }
.single-blog-area .post-content {
padding: 10px;
background:rgba(27,27,27,0.8);
border-bottom:2px solid #e5caa5; }
.single-blog-area .post-content .headline {
font-size: 20px;
margin-bottom: 5px;
font-weight: 300;
font-family:'Microsoft JhengHei';
color: #fff; }
.single-blog-area .post-content .headline:hover, .single-blog-area .post-content .headline:focus {
font-weight: 300; }
.single-blog-area .post-content .post-meta {
margin-bottom: 10px;color: #d3b14b;font-family:'Microsoft JhengHei';font-size: 14px;}
.single-blog-area .post-content .post-meta i{ margin-right:5px;}
.single-blog-area .post-content .post-meta a {
font-size: 12px;
font-weight: 500;
color: #d3b14b; }
.single-blog-area .post-content .post-meta a:hover, .single-blog-area .post-content .post-meta a:focus {
font-size: 12px;
font-weight: 500; }
.single-blog-area .post-content p {
margin-bottom: 0;font-family:'Microsoft JhengHei';color:#fff; }
.search-widget-area form {
position: relative;
z-index: 1; }
.search-widget-area form input {
width: 100%;
height: 42px;
font-size: 12px;
font-style: italic;
border: none;
border-radius: 0;
border-bottom: 2px solid #f3f4fa;
padding: 0 15px;
background-color: transparent; }
.search-widget-area form button {
width: 50px;
height: 42px;
background-color: #232323;
color: #ffffff;
font-size: 16px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 10; }
.sonar-catagories-widget-area h6 {
margin-bottom: 15px; }
.sonar-catagories-widget-area .catagories-menu li a {
padding: 10px 0 10px 40px;
font-size: 12px;
font-weight: 300;
color: #565656;
display: block; }
.latest-news-widget-area h6 {
margin-bottom: 25px; }
.latest-news-widget-area .widget-single-blog-post {
margin-bottom: 30px; }
.latest-news-widget-area .widget-single-blog-post .widget-post-content a {
font-size: 15px;
color: #2f2f2f;
margin-bottom: 5px;
font-weight: 300; }
.latest-news-widget-area .widget-single-blog-post .widget-post-content a:hover, .latest-news-widget-area .widget-single-blog-post .widget-post-content a:focus {
font-size: 15px;
font-weight: 300; }
.latest-news-widget-area .widget-single-blog-post .widget-post-content p {
font-size: 12px;
margin-bottom: 0; }
/* :: Contact Area CSS */
.contact-form h2 {
font-size: 72px;
margin-bottom: 15px;
font-weight: 100; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.contact-form h2 {
font-size: 55px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact-form h2 {
font-size: 36px; } }
@media only screen and (max-width: 767px) {
.contact-form h2 {
font-size: 30px; } }
.contact-form h4 {
font-size: 48px;
margin-bottom: 80px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact-form h4 {
font-size: 30px; } }
@media only screen and (max-width: 767px) {
.contact-form h4 {
font-size: 24px; } }
.contact-form .form-group {
margin-bottom: 30px; }
.contact-form .form-control {
width: 100%;
height: 60px;
padding: 0 15px;
border: none;
border-bottom: 1px solid;
border-color: #c0c0c0;
border-radius: 0;
font-size: 12px;
font-style: italic;
color: #2f2f2f;
background-color: transparent; }
.contact-form .form-control:focus, .contact-form .form-control:hover {
box-shadow: none; }
.contact-form textarea {
margin-bottom: 50px; }
.contact-form textarea.form-control {
height: 220px;
padding: 15px; }
.map-area {
position: relative;
z-index: 1;
margin: 0 50px; }
.map-area #googleMap {
width: 100%;
height: 540px; }
@media only screen and (max-width: 767px) {
.map-area #googleMap {
height: 400px; } }
@media only screen and (max-width: 767px) {
.map-area {
margin: 0 20px; } }
/* :: About Area CSS */
.sonar-about-us-area {
position: relative;
z-index: 1;
padding: 120px 0;
overflow: hidden; }
.sonar-about-us-area::after {
content: "";
width: 50%;
height: 100%;
top: 0;
left: 0;
background-color: #ffffff;
position: absolute;
z-index: -5; }
.sonar-about-us-area.second-part {
position: relative;
padding: 120px 0; }
.sonar-about-us-area.second-part::after {
content: "";
width: 50%;
height: 100%;
top: 0;
left: auto;
right: 0;
background-color: #ffffff;
position: absolute;
z-index: -5; }
.sonar-about-us-area .about-us-content {
padding: 15px 100px 100px;
margin-left: 100px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sonar-about-us-area .about-us-content {
padding: 15px 30px 100px;
margin-left: 50px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-about-us-area .about-us-content {
margin-left: 0; } }
@media only screen and (max-width: 767px) {
.sonar-about-us-area .about-us-content {
margin-left: 0;
padding: 15px 20px 100px; } }
.sonar-about-us-area .backEnd-content h2 {
position: absolute;
font-size: 230px;
color: #f0f0f0;
z-index: -1;
top: -130px;
left: -10%; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sonar-about-us-area .backEnd-content h2 {
font-size: 170px;
top: -90px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-about-us-area .backEnd-content h2 {
font-size: 100px;
top: -30px;
left: -5%; } }
@media only screen and (max-width: 767px) {
.sonar-about-us-area .backEnd-content h2 {
font-size: 60px;
top: 0; } }
.sonar-about-us-area.second-part {
overflow: hidden; }
.sonar-about-us-area.second-part .about-us-content {
padding: 100px;
margin-left: 0;
margin-right: 100px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sonar-about-us-area.second-part .about-us-content {
margin-right: 0; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-about-us-area.second-part .about-us-content {
margin-right: 0; } }
@media only screen and (max-width: 767px) {
.sonar-about-us-area.second-part .about-us-content {
margin-right: 0;
padding: 100px 20px 70px; } }
.sonar-about-us-area.second-part .backEnd-content h2 {
top: -100px;
left: auto;
right: -50px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.sonar-about-us-area.second-part .backEnd-content h2 {
font-size: 100px;
top: 0;
left: auto;
right: 0; } }
/* :: Shortcode Area CSS */
.elements-title h2 {
text-transform: capitalize;
font-size: 48px;
margin-bottom: 100px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.elements-title h2 {
font-size: 30px; } }
@media only screen and (max-width: 767px) {
.elements-title h2 {
font-size: 28px; } }
/* Accordians */
.single-accordion.panel {
background-color: #ffffff;
border: 0 solid transparent;
border-radius: 4px;
box-shadow: 0 0 0 transparent;
margin-bottom: 15px; }
.single-accordion:last-of-type {
margin-bottom: 0; }
.single-accordion h6 {
margin-bottom: 0;
text-transform: uppercase; }
.single-accordion h6 a {
background-color: #1d1d1d;
border-radius: 0;
color: #ffffff;
display: block;
margin: 0;
padding: 20px 60px 20px 20px;
position: relative;
font-size: 14px;
text-transform: capitalize;
font-weight: 500; }
.single-accordion h6 a span {
font-size: 10px;
position: absolute;
right: 20px;
text-align: center;
top: 24px; }
.single-accordion h6 a span.accor-open {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0); }
.single-accordion h6 a.collapsed {
background-color: #2f2f2f;
color: #ffffff; }
.single-accordion h6 a.collapsed span.accor-close {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0); }
.single-accordion h6 a.collapsed span.accor-open {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100); }
.single-accordion .accordion-content {
border-top: 0 solid transparent;
box-shadow: none; }
.single-accordion .accordion-content p {
padding: 20px 15px 5px;
margin-bottom: 0; }
/* Cool Facts CSS */
.single-cool-fact-area {
text-align: center; }
.single-cool-fact-area i {
font-size: 100px;
color: #2f2f2f;
margin-bottom: 30px;
display: block; }
.single-cool-fact-area img {
margin-bottom: 30px; }
.single-cool-fact-area h2 {
font-size: 48px;
margin-bottom: 5px; }
.single-cool-fact-area p {
margin-bottom: 0; }
/* Barfiller */
.single_progress_bar {
margin-bottom: 20px; }
.single_progress_bar:last-of-type {
margin-bottom: 0; }
.single_progress_bar p {
margin-bottom: 0; }
.single_progress_bar .barfiller {
background-color: #e0e0e0;
border: none;
border-radius: 0;
box-shadow: none;
height: 2px;
margin-bottom: 5px;
position: relative;
width: 100%; }
.single_progress_bar .barfiller .fill {
display: block;
position: relative;
width: 0px;
height: 100%;
background-color: #1d1d1d;
z-index: 1; }
.single_progress_bar .barfiller .tip {
margin-top: 10px;
font-size: 14px;
left: 0px;
position: absolute;
z-index: 2;
background-color: #1d1d1d;
color: #ffffff;
width: 60px;
height: 32px;
text-align: center;
line-height: 32px; }
.single_progress_bar .barfiller .tipWrap {
display: none; }
.single-pie-bar p {
margin-bottom: 0;
font-weight: 300;
color: #2f2f2f; }
@media only screen and (max-width: 767px) {
.single-pie-bar {
margin-bottom: 30px; } }
/* The end */
@media only screen and (max-width: 1679px) {
.rooms {}
.hero-slides .single-hero-slide:after{ position:absolute; background:url(img/bg-img/slider-top.png) no-repeat center bottom; width:100%; height:430px; background-size:100%;}
.room-area {
background: url(img/room-bg2.png) no-repeat 95% 95%,url(img/room-bg1.png) no-repeat right bottom,url(img/bg-img/bg.jpg) no-repeat center;
background-size:35%,auto,auto;}
}
@media only screen and (max-width: 1366px) {
.portfolio-meta-left h2{margin-top:-40px;}
}
@media only screen and (max-width: 1280px) {
.sonar-testimonials-area {padding: 500px 0 0px;
background: url(img/whole.jpg) no-repeat right top; background-size:80% auto;}
.sonar-testimonials-area .col-lg-7{ -ms-flex:0 0 80%;flex:0 0 80%;max-width:80%;}
.about1-2 .col-md-5,.about1-2 .col-md-7{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.news .col-md-6{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.news{ padding-bottom:0;align-items:baseline}
.news-txt{ margin-left:0; padding:20px 15px;}
.new-left{ margin-right:0px; margin-top:0px; min-height:auto;}
}
@media only screen and (max-width: 1080px) {
#about .col-md-3{ background:none;}
.about-slider{ margin-top:-50px;}
.btn1,.btn2,.btn3,.btn5{ max-width:25%;}
.btn4{ max-width:37.5%;}
.about4 .col-4,.about4 .col-8{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
p.portfolio-date{width:100%;}
.sonar-testimonials-area {
background: url(img/whole.jpg) no-repeat right top; background-size:90% auto;}
.sonar-testimonials-area .col-lg-7{ -ms-flex:0 0 90%;flex:0 0 90%;max-width:90%;}
.room-area .col-md-6{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%; margin-left:10%;}
.room-right table.price{width:100%; margin-left:0;}
.wbtn{ float:left; display:inline-block; margin:5px;}
.room-stit{ display:none;}
.rbtn {padding:0 5px;}
.room-info .col-md-4{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%;}
.room-info .col-md-4:nth-child(3){-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%;}
}
@media only screen and (max-width: 991px) {
.fac {padding:80px 0px 180px;
background:url(img/location-stit.png) no-repeat 60% bottom,url(img/fac-bottom.jpg) no-repeat center bottom,url(img/bg-img/bg.jpg) no-repeat left top; background-size:auto,auto,auto;}
.single-portfolio-item.portfolio-item-5{display:none;}
.sonar-blog-area .container{
padding:0;
}
.sonar-blog-area .col-md-4{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%;}
.rooms .container{max-width:100%;}
}
@media only screen and (max-width: 990px) {
.sonar-services-area .col-md-6,.sonar-testimonials-area .col-md-7,.sonar-testimonials-area .col-md-5{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
.about1 .col-md-6{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
.sonar-testimonials-area{background: url(img/whole.jpg) no-repeat right top; background-size:100% auto;}
.sonar-testimonials-area .col-lg-7{ -ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
.sonar-testimonials-area .testimonial-content {
padding: 50px;
position: relative;
z-index: 1;
left: 0px;}
.rbtn {width:33.33%;}
.abtn{ padding:5px;}
.abtn span{margin-left:-5px;}
.footer-area .col-md-6{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
}
@media only screen and (max-width:768px) {
.single-portfolio-item .portfolio-meta-left span{display:inline;}
.footer-area .col-md-5{ -ms-flex:0 0 80%;flex:0 0 80%;max-width:80%;}
.sonar-testimonials-area {padding: 400px 0 0px;}
.rbtn{ margin-bottom:20px;}
.rbtn:nth-child(even){ margin-top:0px;}
.fbtn{}
.room-area{
background: url(img/room-bg1.png) no-repeat right bottom,url(img/bg-img/bg.jpg) no-repeat center;
background-size:auto,auto;}
.fac {padding:50px 0px 150px;
background:url(img/location-stit.png) no-repeat 60% bottom,url(img/fac-bottom.jpg) no-repeat center bottom,url(img/bg-img/bg.jpg) no-repeat left top; background-size:200%,auto,auto;}
.room-info .col-md-4{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
.room-info .col-md-4:nth-child(3){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}}
@media only screen and (max-width:767px) {
.mainMenu .logo-area img{display:none;}
.row.about1-2{ margin-left:0px;}
.about1 .left1{ padding:0px 0px 0px 30px; margin:0;}
.about1 .left1 img{ margin-bottom:10px;}
.about1 .right1{ }
.new-left{ min-height:380px;}
.rooms {background: url(img/room-bg2.png) no-repeat 95% 95%,url(img/room-bg1.png) no-repeat bottom center, #fff; background-size:50%,auto;}
.rooms .col-md-3.offset-1{}
.rbtn{ width:33.333%;}
.rbtn a img{ margin:0px auto 0;}
.fbtn{ width:50%;margin-bottom:15px;}
.fbtn2{ width:50%;}
}
@media only screen and (max-width:736px) {
.offset-md-half{ margin-left:0;}
.news .col-6{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
.news .stit,.meal .stit{ padding-top:20px;}
.rbtn:nth-child(2),.rbtn:nth-child(3){margin-top:0px;}
#rooms{ background:url(img/about-pic3.png) no-repeat left 30%;background-size:33% auto}
.single-portfolio-item.portfolio-item-3 .backend-content .dots {
display:none;}
.single-portfolio-item.portfolio-item-4 .backend-content .dots {
top:-300px;
bottom: px;
left: 50%;}
.sonar-blog-area .col-md-4{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
.sonar-blog-area .col-md-4 img{width:100%;}
}
@media only screen and (max-width: 640px) {
.portfolio-meta {
background:url(img/about/text-bg.png) no-repeat right top;
background-size:200%;
padding:90px 50px 0;
max-width:100%;
}
}
@media only screen and (max-width:600px) {
.about3 .abtn{ width:100%;}
.portfolio-area {
overflow:hidden;
background: url(img/bg-img/about-bg.jpg) no-repeat center top,url(img/about/about2-bg.jpg) repeat center;
background-size:200%,auto;
padding:50px 0px 80px;
}
.portfolio-meta-left h2{margin-top:0px;}
.portfolio-meta-left.float-right{ float:left!important;}
#rooms{ background:url(img/about-pic3.png) no-repeat left 18%;background-size:50% auto}
.sonar-testimonials-area {padding: 350px 0 0px;}
.footer-area .col-md-5{ -ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;}
}
@media only screen and (max-width:568px) {
.about1{ position:relative;}
.about-slider{ margin-top:-60px;}
.sonar-blog-area.section-padding-200-50 { padding-top:120px;}
.room-right table.price{width:100%;}
}
@media only screen and (max-width:480px) {
.header-area .logo-area img{ height:80px}
.about{ padding-bottom:40px;padding-top:80px;}
.btn1,.btn2,.btn3,.btn5{ max-width:28%;}
.btn4{ max-width:42%;}
.about1{ padding-top:40px; padding-left:0; padding-right:0;}
.about1 .left1 p span{ margin:12px 0;}
.about1 .right1{ padding-left:0; padding-right:0; margin-bottom:20px;}
.about1 .right1 img{border-radius:10px; }
.about .bottom{ padding-left:12px; padding-right:12px;}
.about1 .mb-30{ margin-bottom:0px;}
.rooms {background: url(img/room-bg1.png) no-repeat bottom center, #fff; background-size:auto;}
.room-area{ padding:130px 0px 50px;}
.rbtn{ width:50%;}
.new-left{ min-height:300px;}
.fbtn{ width:100%;}
.fbtn2{ width:100%;}
.fbtn a img{ margin:0px auto 0;}
.fac {padding:50px 0px 100px; }
.room-right .col-md-6{ padding-bottom:20px;}
.room-area .col-md-6{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%; margin-left:0%;}
.room-right .mt-30{ margin-top:0px;}
.room-right .mb-30{ margin-bottom:0px;}
.room-right a.btn{ margin-top:10px;}
.sonar-testimonials-area {padding: 250px 0 0px;}
.sonar-testimonials-area .testimonial-content {
padding: 50px 10px;}
}
@media only screen and (max-width:479px) {
.footer-area .copywrite-text {
padding:10px 0px 20px;
}
}
@media only screen and (max-width:359px) {
.footer-area .copywrite-text table span {
display:block;
}
.footer-area .copywrite-text table td:nth-child(1){ vertical-align:top;}
}
/*# sourceMappingURL=style.css.map */