html, body {
height: 100%;
font-family: "Microsoft YaHei";
}
body{
overflow-x:hidden;
}
@font-face {
font-family: Montserrat;
src: url(../fonts/Montserrat-Regular.ttf);
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
.topNewsBar p {
margin: 0;
width: 100%;
background-color: #84734e;
color: #fff;
padding: 15px 10px;
display: none;
text-align: center;
font-size: 16px;
}
.topNewsBar a:link , .topNewsBar a:hover{
color: #fff;
text-decoration: none;
}
.topNewsBar img{
max-width: 100%;
}
.more{
background-color:#84734e;
border:1px solid #fff;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:16px;
padding:4px 16px;
text-decoration:none;
}
.TopCloseBTN, .TopCloseBTN:focus, .TopCloseBTN:active, .TopCloseBTN:hover{
float: right;
margin-right: 10px;
background-color: #84734e;
color: #fff;
border: 0px;
}
.TopCloseTxtBTN{
display: none;
margin-top: 10px;
background-color: #84734e;
color: #fff;
border: 1px solid #fff;
padding: 3px 12px;
}
.SocialMedia{
width: 100%;
background-color: #fff;
border-top: 6px solid #b3a078;
}
.media{
font-size: 14px;
float: right;
width: 220px;
background-color: #b3a078;
padding: 12px 8px 15px 18px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.media img{
height: 18px;
width: auto;
}
.media a, .media a:hover{
padding: 5px 8px;
border: 2px solid #fff;
color: #fff;
margin-right: 10px;
text-decoration: none;
}
.logo{
width:auto;
height: 100px;
}
.swiper-container {
width: 100%;
height: 60%;
min-height: 470px;
}
.swiper-slide {
text-align: center;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.swiper-slide img , .swiper-slide a{
width: 100%;
height: 100%;
object-fit:cover;
}
.LatestContactForm{
float: right;
text-align: center;
margin-top: 40px;
color: #000;
background-color: rgba(255,255,255,0.7);
padding: 20px;
width: 300px;
}
.LatestContactForm h2{
font-size: 20px;
line-height: 140%;
color: #000000;
margin: 0;
}
.NewsContactInput{
width: 100%;
margin: 8px 0;
padding: 8px 6px;
font-size: 14px;
border: 0px;
}
.verifyInput{
float: left;
width: 48%;
margin: 8px 0;
padding: 8px 6px;
font-size: 14px;
border: 0px;
}
.LatestContactForm form img{
margin: 8px 0;
height: 36px;
width: 48%;
}
.SliderBTN{
border: 0;
width: 100%;
color: #fff;
background-color: #b3a078;
margin: 8px 0;
padding: 8px 6px;
}
.FlipSection{
background-color: #f1f1f1;
padding: 40px 0;
}
.location{
position: absolute;
top: 200px;
text-align: center;
font-size: 20px;
padding: 10px;
width: 100%;
color: #fff;
background-color: #b3a078;
border: 0px;
}
#FlipIMG{
margin: 30px 0px;
}
.flip-container {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width:auto;
height: 320px;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.8s;
transition: 0.8s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.8s;
transition: 0.8s;
transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.front img{
width: 100%;
height: 320px;
object-fit:cover;
}
/* back, initially hidden pane */
.back {
padding: 0px 30px;
color: #b3a078;
text-align: justify;
line-height: 180%;
font-size: 16px;
overflow: hidden;
background-color: #fff;
border: 2px solid #b3a078;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.back h1{
text-align: center;
font-size: 24px;
color: #b3a078;
}
.back hr{
border: 2px solid #b3a078;
width: 50px;
}
.parallax_section{
position: relative;
height: 300px;
background-repeat: no-repeat;
/*background-attachment: fixed;*/
background-size: cover;
background-position: 100%;
}
.aboutBH{
position: relative;
background-size: cover;
background-repeat: no-repeat;
padding:30px 0 50px 0;
text-align: center;
}
.aboutBH h1 , .CommentTitle h1{
text-align: center;
color: #fff;
}
.aboutBH p{
padding-top: 30px;
margin: 0 auto;
line-height: 180%;
width: 70%;
text-align: center;
color: #fff;
font-size: 16px;
}
.LatestNews{
width: 100%;
background-color: #fff;
height: auto;
padding: 30px 0;
}
.NewsTitle{
width: 100%;
text-align: center;
}
.NewsTitle h1{
color: #b3a078;
}
.headTitle{
font-size: 26px;
}
.headTitle img{
width: auto;
height: 10px;
margin: 0 20px;
}
.tabSection{
padding-top: 30px;
}
.tabContent{
line-height: 220%;
}
.TabTitle{
font-size: 24px;
font-weight:bold;
}
.tabSection img{
width: 100%;
height: auto;
}
.commentSection{
position: relative;
height: 500px;
background-repeat: no-repeat;
background-size: cover;
background-position: 100% auto;
color: #fff;
}
.CommentTitle{
margin-top: 50px;
}
#Comment{
text-align: center;
}
.img-circle {
width: 100px;
height: auto;
border-radius: 50%;
border: 3px solid #b3a078;
margin: 30px 0;
}
.commentIcon , .commentPar{
float: left;
}
.commentIcon{width: 10%;}
.commentPar{width: 80%;}
.commentPar p{
text-align: center;
font-size: 15px;
line-height: 160%;
min-height: 100px;
max-height: 185px;
overflow: hidden;
}
.commentBy{
float: left;
width: 100%;
text-align: center;
margin-top: 40px;
height: 20px;
}
.commentBy img{
margin-top: -2px;
}
.commentBy a{
color: #fff;
text-decoration: underline;
}
a.back-to-top {
width: 50px;
height: 50px;
position: fixed;
z-index: 999;
right: 2%;
bottom: 20px;
background: url("../images/toTopGold.svg") no-repeat center 43%;
}
.footer{
float: left;
width: 100%;
background-color: #84734e;
padding: 15px;
text-align: center;
color: #fff;
}
/*------------------------- News ------------------------- */
.AllNews , .PostSection{
background-color: #f1f1f1;
width: 100%;
height: auto;
padding: 20px 0;
}
.checkboxDiv{
float: left;
width: 100%;
padding: 10px 0;
}
.divBox {
width: 120px;
margin: 0px;
position: relative;
float: left;
}
.divBox label {
margin-top: 2px;
display: block;
width: 17px;
height: 17px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 1px;
z-index: 1;
/*
use this background transparent to check the value of checkbox
background: transparent;
*/
background: #fff;
border: 2px solid #b3a078;
}
.divBox input[type=checkbox]:checked + label {
background: #b3a078;
}
.PostSection .row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
column-width: 18em;
}
.PostSection .item {
display: inline-block;
width: 100%;
}
.PostSection .item a , .PostSection .thumbdiv a{
color: #000;
text-decoration: none;
}
.PostSection .item a:hover > .Post{
background-color: #f9f9f9;
}
.PostSection .thumbdiv a:hover > .Post{
background-color: #f9f9f9;
}
.Post{
width: 100%;
background-color: #fff;
min-height: 100px;
padding: 15px;
border-radius: 10px;
border: 1px solid #d2d2d2;
box-shadow: 0px 3px 5px #b5b5b5;
margin-bottom: 30px;
}
.Post h3{
font-size: 21px;
text-align: center;
margin: 10px 0 15px 0;
}
.Post img{
width: 100%;
height: auto;
}
.Post p{
margin-top: 10px;
font-size: 14px;
text-align: justify;
line-height: 170%;
}
.PostII{
position:relative;
width: 100%;
background-color: #fff;
min-height: 100px;
border-radius: 10px;
border: 1px solid #d2d2d2;
box-shadow: 0px 3px 5px #b5b5b5;
margin-bottom: 30px;
}
.PostII h3{
margin: 15px 0 0 15px;
font-size: 21px;
text-align: left;
}
.PostII img{
width: 100%;
height: auto;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.PostII p{
padding: 10px 15px;
font-size: 14px;
text-align: justify;
line-height: 170%;
}
.newspopup{
width: 80%;
max-width: 600px;
margin: 40px auto;
}
.popIframe{
font-size: 14px;
}
.popIframe h1{
font-size: 28px;
margin: 20px 0;
text-align: center;
}
.popText{
font-size: 14px;
}
.popIframe img{
width: 100%;
height: auto;
}
.shareFB{
width: 160px;
height: auto;
}
/*------------------------- Location ------------------------- */
#locationMenu ul { margin: 0; padding: 0;}
#locationMenu li { margin: 0; padding: 0;}
#locationMenu a { margin: 0; padding: 0;}
#locationMenu ul {list-style: none;}
#locationMenu a {text-decoration: none;}
#locationMenu {
position: relative;
height: auto;
width: 100%;
line-height: normal;
text-align: center;
background-color: #fff;
border-top: 2px solid #e5e4e4;
border-bottom: 2px solid #e5e4e4;
color: #777878;
vertical-align: middle;
}
#locationMenu > ul {
text-align:center;
}
#locationMenu > ul > li {
display:inline-block;
margin-left: 10px;
position: relative;
}
#locationMenu > ul > li > a {
color: #777878;
font-size: 15px;
line-height: 60px;
padding: 0px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#locationMenu > ul > li > a:hover {color: #b3a078; }
#locationMenu > ul > li > ul {
opacity: 0;
visibility: hidden;
background-color: #fff;
text-align: center;
position: absolute;
top: 55px;
left: 50%;
margin-left: -75px;
width: 160px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#locationMenu > ul > li:hover > ul {
z-index: 10;
opacity: 1;
top: 70px;
visibility: visible;
}
#locationMenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#locationMenu > ul ul > li { position: relative;}
#locationMenu ul ul a{
font-size: 15px;
color: #777878;
background-color: rgb(250,250,250);
padding: 15px ;
border:1px solid #e5e4e4;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#locationMenu ul ul a:hover{
color: #fff;
background-color: #b3a078;
}
.currentlocation{
padding: 10px 0px 5px 0;
width: 100%;
color: #fff;
border-top: 1px solid #b3a078;
border-bottom: 1px solid #b3a078;
text-align: center;
background-color: #b3a078;
}
.currentlocation span{
font-size: 14px;
}
.currentlocationII{
margin-top: 45px;
position: absolute;
padding: 10px 12px 5px 12px;
vertical-align: center;
right: 0px;
color: #fff;
background-color: #b3a078;
z-index: 2;
font-size: 18px;
border: 2px solid #fff;
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#currentlocationIcon{
color: #fff;
font-size: 16px;
}
#opensubMenu{
float: right;
color: #b3a078;
border: 1px solid #b3a078;
background-color: #b3a078;
}
#opensubMenu img{
height: 10px;
width: auto;
}
.maps iframe{
pointer-events: none;
}
.Brief{
width: 100%;
height: auto;
background-color: #fff;
padding: 30px 0 50px 0;
text-align: center;
}
.Brief h1{
color: #b3a078;
margin-bottom: 30px;
}
.Brief p{
margin: 0 auto;
width: 80%;
text-align: center;
line-height: 180%;
color: #242424;
}
.locationDetail{
position: relative;
background-size: cover;
background-repeat: no-repeat;
padding:30px 0 60px 0;
}
.Details{
position: relative;
top: 10px;
float:right;
}
#StageTitle , #HeightTitle , #ChairTitle , #EquipmentTitle , #ContactTitle {
margin-top: 15px;
width: 320px;
max-width: 320px;
padding: 10px;
text-align: left;
background-color: #b3a078;
color: #fff;
border: 1px solid #b3a078;
}
#StageTitle img , #HeightTitle img , #ChairTitle img , #EquipmentTitle img , #ContactTitle img {
width: auto;
height: 20px;
margin-right: 10px;
margin-top: -3px;
}
#StageTitle .arrowPosition{float: right; margin-top: 5px;}
#StageTitle .arrowPosition img{ width: auto; height: 3px;}
#StageData , #HeightData , #ChairtData , #EquipmentData , #ContactData{
width: 320px;
max-width: 320px;
padding: 10px;
background-color: #fff;
color: #191919;
display: block;
border: 1px solid #b5b5b5;
}
#StageTitle .FuncationIMG , #HeightTitle .FuncationIMG,
#ChairTitle .FuncationIMG , #EquipmentTitle .FuncationIMG,
#ContactTitle .FuncationIMG {
float: right;
}
#StageTitle .FuncationIMG img , #HeightTitle .FuncationIMG img,
#ChairTitle .FuncationIMG img , #EquipmentTitle .FuncationIMG img,
#ContactTitle .FuncationIMG img{
height: 10px;
width: auto;
}
#EquipmentData{
display: none;
}
.PopupData{
width: 100%;
background-color: #fff;
}
#popupContent{
text-align: center;
font-size: 16px;
color: #343434;
padding: 40px 0;
line-height: 180%;
}
#popupContent img{
width: 50px;
height: auto;
}
#CallingBTN , #FloorBTN , #MenuBTN, #SaleBTN{
border: 0;
background-color: #fff;
color: #85734f;
padding: 4px;
}
#floorPlanIMG{
padding: 20px ;
}
#floorPlanIMG img{
width: 100%;
height: auto;
}
#floorPlanIMG .floorthumbnail{
margin-top: 30px;
text-align: center;
}
#floorPlanIMG .floorthumbnail img{
width: 80px;
margin:0 10px;
height: auto;
}
/* The Modal (background) */
.LocationPopUp {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255,0.6); /* Black w/ opacity */
}
/* Modal Content */
.LocationPopUp-content {
position: relative;
background-color: #fff;
margin: auto;
padding: 0;
border: 0px solid #fff;
width: 80%;
max-width: 600px;
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.LocationPopUp-header {
padding: 2px 16px;
background-color: #b3a078;
color: white;
border: 0px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.LocationPopUp-header h2{
margin: 10px 0;
font-size: 22px;
color: #fff;
}
/* The Close Button */
.CallingClose , .FloorClose , .MenuClose , .SaleClose {
color: #fff;
float: right;
font-weight: bold;
}
#popupContent .LocationPopUp-header img{
width: 12px;
height: 12px;
}
.SaleClose:hover,
.SaleClose:focus,
.MenuClose:hover,
.MenuClose:focus,
.CallingClose:hover,
.CallingClose:focus,
.FloorClose:hover,
.FloorClose:focus{
color: #dfdfdf;
text-decoration: none;
cursor: pointer;
}
.LocationPopUp-body {
margin-top: 10px;
padding: 10px 16px;
}
.LocationPopUp-body img{
width:100%;
height: auto;
}
#MenuSection .LocationPopUp-body p{
line-height: 180%;
text-align: justify;
}
#SaleSection .LocationPopUp-body p{
line-height: 180%;
text-align: justify;
}
/*------------------------- About Us ------------------------- */
.aboutusHead{
position: relative;
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
}
.aboutTopTxT h2{
margin: 0;
margin-top: 10px;
color: #84734e;
}
.aboutTopTxT{
margin: 0;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 40px 80px 20px 80px;
}
.aboutTopTxT a{
text-decoration: none;
color: #434243;
}
.aboutTopTxT a:hover{
text-decoration: underline;
color: #b3a078;
}
.aboutTopTxT hr{
width: 70px;
height: 1px;
border-top: 3px solid #84734e;
}
.DirectorMessage{
width: 100%;
height: auto;
background-color: #fff;
padding: 30px 0 50px 0;
text-align: center;
}
.DirectorMessage h1 {
color: #b3a078;
margin-bottom: 30px;
}
.DirectorMessage p{
line-height: 180%;
color: #242424;
width: 70%;
margin: 0 auto;
}
.service , .believe{
width: 100%;
height: auto;
background-color: #fff;
line-height: 170%;
clear: both;
}
.serviceIMG , .serviceContent , .serviceIIContent , .serviceIMGII , .believeContent , .believeIMG{
width: 50%;
float: left;
}
.serviceIMG img , .believeIMG img{
height: 100%;
}
.serviceContent{
background-color: #fbfbfb;
padding: 40px;
height: 550px;
}
.serviceContent h2{
margin: 10px 0;
color: #b3a078;
font-size: 24px;
}
.serviceContent p{
width: 520px;
text-align: justify;
}
.serviceIMG , .serviceIMGII{
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: 100% auto;
height: 550px;
}
.serviceIIContent{
position: relative;
background-color: #fbfbfb;
padding: 40px;
height: 550px;
}
.moreMessage{
position: absolute;
padding-right: 40px;
right: 0;
width: 550px;
text-align: justify;
}
.serviceBelieve{
position: relative;
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: 100% auto;
text-align: center;
clear: both;
}
.serviceBelieve h1{
color: #b3a078;
margin-bottom: 30px;
margin: 10px 0;
}
.BelieveHeader{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 0px;
}
.BelieveTxT a{
text-decoration: none;
color: #434243;
}
.BelieveTxT a:hover{
text-decoration: underline;
color: #b3a078;
}
.serviceBelieve hr , .awardTxT hr{
width: 70px;
height: 1px;
border-top: 3px solid #b3a078;
}
.believeText{
margin: 0;
font-size: 22px;
color: #b3a078;
}
.BelieveSlogan{
margin: 10px 0;
font-size: 16px;
letter-spacing: 0px;
}
.BelieveSectionIMG{
position: relative;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
.BelieveTextContent {
width: 50%;
padding:40px 10px 40px 30px;
background: #fff;
float: right;text-align: justify;
}
.BelieveTextContent h3{
margin: 5px 0;
font-size: 16px;
color: #b3a078;
}
.awards{
float: left;
position: relative;
width: 100%;
height: 150px;
background-repeat: no-repeat;
background-size: cover;
background-position: 100% auto;
text-align: center;
}
.awards h1{
color: #b3a078;
margin-bottom: 30px;
margin: 10px 0;
}
.awardTxT{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 20px 80px 20px 80px;
}
.awardsTimeline {
width: 100%;
background-color: #fff;
padding: 50px 0;
}
.awardsTimeline .item {
display: inline-block;
padding: 0;
width: 100%;
}
.awardsTimeline .item p{
text-align: left;
line-height: 180%;
margin-left: 30px
}
.timelineHead{
color: #84734e;
font-size: 16px;
margin: 0
}
/*------------------------- Contact ------------------------- */
.contactusHead{
position: relative;
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
}
.contactTopTxT h2{
margin: 0;
color: #84734e;
}
.contactTopTxT{
margin: 0;
background-color: rgba(255, 255, 255, 0);
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 40px 80px 20px 80px;
}
.contactTopTxT a{
text-decoration: none;
color: #434243;
}
.contactTopTxT a:hover{
text-decoration: underline;
color: #b3a078;
}
.contactTopTxT hr{
width: 70px;
height: 1px;
border-top: 3px solid #84734e;
}
.DifferentLocation{
padding:50px 0 20px 0;
width: 100%;
height: auto;
background-color: #fff;
}
.ContactLocation{
width: 100%;
text-align: center;
padding:35px 20px;
background-color: #fff;
border: 2px solid #b3a078;
font-size: 15px;
line-height: 160%;
color: #b3a078;
margin-bottom: 30px;
}
.ContactLocation:hover{
background-color: #b3a078;
color: #fff;
box-shadow: 0px 20px 37px -20px #000000;
}
.ContactLocation:hover > span.glyphicon-map-marker , .ContactLocation:hover > h2{
color: #fff;
}
#contactLocationIcon{
height: 20px;
width: auto;
}
.ContactLocation h2{
color: #b3a078;
font-size: 22px;
margin: 0;
margin-bottom: 10px;
}
span.glyphicon-map-marker {
font-size: 36px;
margin-bottom: 10px;
color: #b3a078;
}
.ContactMap{
margin-top: 20px;
margin-bottom: 30px;
}
#MultiMap{
width: 100%;
height: 500px;
}
.ContactForm{
margin-bottom: 30px;
}
#contactText{
margin-bottom: 30px;
text-align: left;
}
#contactText input{
width: 100%;
padding: 4px 10px;
font-size: 14px;
}
#contactText textarea{
width: 100%;
height: 200px;
padding: 5px 10px;
font-size: 14px;
resize:none;
}
.sendMsgBTN{
float: right;
border: 0px;
background-color: #b3a078;
color: #fff;
padding: 10px 20px;
width: 100px;
}
/*------------------------- Responsive ------------------------- */
@media screen and (max-width: 1199px) {
#FlipIMG { padding: 0 30px;}
.artGroup { height: 280px;}
.artGroup .detail p {
line-height: 160%;
}
.commentPar{
min-height: 110px;
}
.serviceContent p , .believePar p{
width: 400px;
}
.moreMessage{
width: 450px;
}
.ContactLocation{
height: 200px;
padding:35px 2%;
font-size: 14px;
}
.ContactLocation h2{
color: #b3a078;
font-size: 22px;
margin: 0;
margin-bottom: 10px;
}
}
@media screen and (max-width: 991px) {
#FlipIMG { padding: 0 100px;}
.artGroup { height: 300px;}
.artGroup .detail p {
line-height: 180%;
}
.parallax_section{
position: relative;
height: 300px;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
background-position: 100% auto;
}
.serviceContent , .believeContent{
padding: 30px 10%;
height: auto;
}
.serviceContent p , .believePar p , .believePar{
width: 100%;
}
.serviceIMG , .serviceContent , .serviceIIContent , .believeContent{
width: 100%;
}
.serviceIMG{
height: 250px;
}
.serviceIIContent{
padding: 0 10% 30px 10%;
height: auto;
}
.believeBGIMG{
background-color: #fff;
position: relative;
background-size: 0px 0px;
background-repeat: no-repeat;
text-align: center;
clear: both;
}
.BelieveSectionIMG{
position: relative;
background-size: 0;
background-repeat: no-repeat;
text-align: center;
}
.BelieveTextContent {
width: 100%;
padding:30px 3%;
background: #fff;
float: right;text-align: justify;
}
.moreMessage{
position: relative;
padding-right: 0;
right: auto;
width: 100%;
text-align: justify;
}
.serviceIMGII , .believeIMG{
display: none;
height: 250px;
}
}
@media screen and (max-width: 768px) {
.TopCloseBTN, .TopCloseBTN:focus, .TopCloseBTN:active, .TopCloseBTN:hover{
display: none;
}
.TopCloseTxtBTN{
display: inline;
margin-top: 10px;
background-color: #84734e;
color: #fff;
border: 1px solid #fff;
padding: 3px 12px;
}
.media{
display: none;
float: none;
margin: 0 auto;
width: 250px;
background-color: #b3a078;
padding: 10px 5px 10px 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.logo{
width:auto;
height: 80px;
}
.navbar{
margin-bottom: 30px;
}
.navbar-default .navbar-brand{color:#777;margin-top:0px;}
.navbar-default .navbar-nav>li>a{
color: #777;
margin-top:0px;
margin-right: 0;
margin-left: 0px;
margin-bottom: 0px;
}
#FlipIMG { padding: 0 10%;}
.artGroup { height: 300px;}
.artGroup .detail p {
line-height: 160%;
font-size: 15px;
height: 220px;
}
.footer{
font-size: 12px;
padding: 15px 5%;
}
.aboutBH p{
padding-top: 10px;
margin: 0 auto;
line-height: 180%;
width: 80%;
text-align: center;
color: #fff;
font-size: 16px;
}
.PostSection{
padding: 0 2%;
}
.swiper-container {
width: 100%;
height: 70%;
min-height: 450px;
}
.divBox {
width: 80px;
margin: 0 6px 0 0;
position: relative;
float: left;
}
.commentSection{
height: 520px;
}
.carousel-indicators{
bottom: -55px
}
.commentPar{
height: 160px;
}
#popupContent{
padding: 20px 0;
}
.Details{
position: relative;
top: 20px;
float:none;
}
#locationMenu > ul > li > a {
padding: 0px 10px;
}
#StageTitle , #HeightTitle , #ChairTitle , #EquipmentTitle , #ContactTitle {
margin: 0 auto;
margin-top: 15px;
width: 90%;
max-width: 90%;
padding: 10px;
text-align: left;
background-color: #b3a078;
color: #fff;
border: 1px solid #b3a078;
}
#StageData , #HeightData , #ChairtData , #EquipmentData , #ContactData{
margin: 0 auto;
width: 90%;
max-width: 90%;
padding: 10px;
background-color: #fff;
color: #191919;
display: block;
border: 1px solid #b5b5b5;
}
#EquipmentData{
display: none;
}
.aboutTopTxT{
padding: 20px 0 20px 0;
width: 80%;
max-width: 350px;
}
.BelieveTxT , .awardTxT{
padding: 40px 5% 20px 5%;
}
.DirectorMessage p{
width: 80%;
}
.serviceContent , .believeContent{
padding: 30px 5%;
}
.serviceContent p{
width: 100%;
}
.serviceIMG , .serviceContent{
width: 100%;
}
.serviceIMG{
min-height: 250px;
}
.serviceIIContent{
padding: 0px 5% 30px 5%;
}
.ContactMap iframe , #MultiMap{
/*padding: 0 15px;*/
width: 100%;
height: 350px;
}
.sendMsgBTN{width: 100%;}
.DifferentLocation{
padding:15px 0;
width: 100%;
height: auto;
background-color: #fff;
}
.ContactLocation{
margin: 10px 0;
height: auto;
padding:10px 2%;
font-size: 14px;
}
.ContactLocation span{
display: none;
}
.currentlocationII{
margin-top: 12px;
position: absolute;
padding: 10px 12px 5px 12px;
vertical-align: center;
right: 0px;
color: #fff;
background-color: #b3a078;
z-index: 2;
font-size: 16px;
border: 2px solid #fff;
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
}
@media screen and (max-width: 520px) {
.DifferentLocation .col-xs-6{
width: 100%;
}
}
@media screen and (max-width: 479px) {
#FlipIMG { padding: 0 5%;}
.artGroup { height: 300px;}
.artGroup .detail p {
line-height: 160%;
font-size: 15px;
height: 220px;
}
.parallax_section{
height: 380px;
}
.aboutBH p{
padding-top: 10px;
margin: 0 auto;
line-height: 150%;
width: 80%;
text-align: center;
color: #fff;
font-size: 16px;
}
#locationMenu > ul > li > a {
padding: 0px 5px;
}
}
@media screen and (max-width: 410px) {
#locationMenu > ul > li > a {
font-size: 13px;
}
#locationMenu ul ul a{
font-size: 13px;
}
.item p{
margin-left: 50px;
}
.currentlocation {
font-size: 13px
}
#currentlocationIcon{
font-size: 13px;
}
}