*{margin:0; padding: 0;}
body{text-align: center; color: #fff; font-family: 'open sans';}
img{ outline: none; border: none; max-width: 100%; height: auto}

.transition{-webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;}
.floatRight{float: right}
.floatLeft{ float: left}
.clear{clear: both}
.wrapper{width: 100%; max-width:960px; margin: 0 auto; padding: 0 20px; background: #fff}

 /*Header starts */
header#branding{ box-shadow: 0 0 5px rgba(0,0,0,0.2); background: #fff; position: relative; z-index: 8}
header#branding .wall{background: url("../images/wall.png") no-repeat center top; width: 100%; height: 92px; position: absolute; top: 0; left: 0; z-index: 4}
.topHeader .aside{ width: 30%; float: left}
.topHeader .logoImg{position: relative; z-index: 2; margin-top: 30px; text-align: left}
.topHeader .logoMain{ position: relative; z-index: 5; margin-top: 75px; width: 45%}
.topHeader .book{ position: relative; z-index: 5; margin-top: 95px; text-align: center; width: 25%}
.topHeader .book .book-btn{ width: 210px; background: url("../images/gradient.png") repeat-x; height: 47px; margin-bottom: 5px; line-height: 47px; font-family:'PT Sans';
    font-size: 20px;  font-weight: 700; font-style: italic; color: #fff; text-transform: uppercase; text-decoration: none;
    display: inline-block; text-align: center; border-radius: 5px; }
.topHeader .book p{ font-family: 'PT Sans'; font-weight: bold; color: #000; font-size: 20px;}

 /*navigation starts*/
#navigation{padding: 20px 0 40px; transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;}
#navigation li{ display: inline-block; margin: 0 16px}
#navigation li a{ color: #000; font-size: 20px; font-family: 'PT sans'; font-weight: bold; text-decoration: none; transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;}
#navigation li a.fb{background: url("../images/fb-icon.png") no-repeat; text-transform: -9999px;  width: 24px; display: block; overflow: hidden; color: transparent; height: 24px; color: transparent; position: relative; top: 5px;}

 /*sticky navigation*/
/*header#branding.magic{ position: fixed; left: 0; top: 0; width: 100%}
header#branding.magic .wall{ display: none}
header#branding.magic .topHeader{ display: none}
header#branding.magic #navigation{ padding: 10px 0; line-height: 31px}
header#branding.magic #navigation li a{font-size: 16px; font-weight: 500}*/


/* main content starts */
#mainContent{ background: url("../images/bg.png") no-repeat center top #dcc5c5; font-family: 'PT Sans'; font-weight: normal; font-size: 18px; line-height: 22px; color: #575757 ; text-align: left }
#mainContent .wrapper{ padding-bottom: 20px;  box-shadow: 0 0 5px rgba(0,0,0,0.2); }

 /*banner starts*/
#banner{ margin-bottom: 20px;}
#banner .promo-slider li{ position: relative; list-style: none}
#banner .promo-slider li .text{min-height: 240px; position: absolute; top: 0; left: 35px; background: rgba(250,250,250,0.7); padding: 35px; width: 260px; z-index: 7}
#banner .promo-slider li .text span{ display: block; margin-top: 20px}
#banner .promo-slider .owl-controls{position: absolute; left: 64px; top: 270px;}
#banner .promo-slider .owl-controls .owl-page span{background: #fff; opacity: 1; z-index: 8}
#banner .promo-slider .owl-controls .owl-page span:hover, #banner .promo-slider .owl-controls .owl-page.active span{ background: #758b0b}
.content{width: 68%; float: left}
.content h5{ font-size: 24px; margin-bottom: 25px}
.content ul{margin-left: 18px; margin-bottom: 20px}
.content ul li{ padding-left: 10px}
.content label{font-weight: bold; font-size: 20px; margin-bottom: 35px; display: block}

.sidebar{width: 30%; float: right}
.sidebar .map{ width: 100% !important; }
.sidebar .btn{width: 100%; margin-top: 20px; background: url("../images/gradient.png") repeat-x; height: 47px; margin-bottom: 5px; line-height: 47px; font-family:'PT Sans'; font-size: 20px;  font-weight: 700; font-style: italic; color: #fff; text-transform: uppercase; text-decoration: none; display: inline-block; text-align: center; border-radius: 5px; }


 /*footer section*/
.wrapper#colophon{ font-size: 16px; color: #000; font-family:'PT sans'; background: none ; box-shadow: none; padding:15px 0 40px}
#colophon .footerlogo{ float: left}
.links{float: right;}
.links li{ display: inline-block; margin-left: 20px;}
.links li a{ color:#000 ; text-decoration: none}
.copyright{ float: right; }



 /*Contact us starts*/
.contactPage h1{color: #000; margin-bottom: 20px; line-height: 50px}
.contactPage .contact-detail{ margin-bottom: 25px}
.contactPage form{ margin-bottom: 50px;}
.contactPage form label{ margin-bottom: 15px; display: block}
.contactPage form input{ width: 42.5%; height: 45px; line-height: 45px; margin-bottom: 15px; padding: 0 3%; font-size: 19px; font-family:'PT sans'; color: #a9a9a9; border: 1px solid #d7d7d7 }
.contactPage form textarea{ width:94%; resize: none; height: 200px; padding:1.5% 3%; font-family:'PT sans'; font-size: 19px; color: #a9a9a9; border: 1px solid #d7d7d7}
.contactPage form button{width: 200px; cursor:pointer;margin-top: 20px; border: none; background: url("../images/gradient.png") repeat-x; height: 47px; margin-bottom: 5px; line-height: 47px; font-family:'PT Sans'; font-size: 20px;  font-weight: 700; font-style: italic; color: #fff; text-transform: uppercase; text-decoration: none; display: inline-block; text-align: center; border-radius: 5px; }
.contactPage .testimonials{background: #e3e3e3; padding: 20px; border-radius: 8px; position: relative;}
.contactPage .testimonials:after{background: url("../images/arrow.png") no-repeat ; height: 13px; width: 27px; position: absolute; bottom: -13px; right: 40px; display: block; content: ""}
.contactPage .testimonials span{display: block;; margin-top: 20px; font-weight: bold; font-style: italic}
.contactPage .sidebar .btn{ margin-top: 30px}
.contactPage iframe{ width: 100% !important}


 /*gallery page*/
.galleryPage .content{ width: 100%}
.galleryPage .gallery-listing .list{ float: left; width: 32%; margin: 0 2% 2% 0; padding-bottom: 24%; background-size: cover !important; background-position: center}
.galleryPage .gallery-listing .list.third{margin-right: 0}
.btn{width: 100%; background: url("../images/gradient.png") repeat-x; height: 47px; line-height: 47px; font-family:'PT Sans'; font-size: 20px;  font-weight: 700; font-style: italic; color: #fff; text-transform: uppercase; text-decoration: none; display: inline-block; text-align: center; border-radius: 5px; }
.popup{ display: none; background: #fff; padding: 10px; line-height: 0; border-radius: 10px; position: fixed; width: 700px; top: 10%; left: 50%; margin-left: -360px; z-index: 13}
.popup img{ border-radius: 10px}
.popup-overlay{display: none; position: fixed; background: rgba(0,0,0,0.9); width: 100%; left: 0; top: 0; height: 100%; z-index: 12}
.close{ position: absolute; top: 20px; line-height: 0; cursor: pointer; right: 20px;background: #fff;  padding: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.close:hover{ opacity: 0.7;}
.navigation-btn{display: none}


@media screen and (max-width: 1024px ){
    .wrapper{width: 96%; padding: 0 2%}
    .topHeader .book .book-btn{width: 100%}

}

@media screen and (max-width: 950px ){
    .topHeader .aside{ padding: 0 2%; width: 26%}
    .topHeader img{ width: 100%; height: auto}
    .topHeader .book{width: 21%}
    .topHeader .logoMain{width: 41%}
    .topHeader .book p{ font-size: 16px}
}

@media screen and (max-width: 768px ){
    #navigation li a{ font-size: 14px; font-weight: normal}
    #navigation{ padding: 20px 0}
    .topHeader .book p{font-weight: normal; font-size: 12px}
    .topHeader .book .book-btn{ font-size: 16px}
    .content{ width: 100%}
    .sidebar{ width: 100%; margin-top: 30px}
    .links{ width: 100%; text-align: center; margin: 10px 0}
    .copyright{ width: 100%; text-align: center}
    #colophon.wrapper{text-align: center}
    #colophon .footerlogo{ float: none}
    #banner .promo-slider li .text{ position: static; width:96%; min-height: auto; padding: 2% }
    #banner .promo-slider .owl-controls{position: static}
    #banner .promo-slider .owl-controls .owl-page span{ background: #e1e1e1}
    .popup{width: 80%; padding: 1%; margin-left: -41%}

}

@media screen and (max-width: 600px){
    .topHeader .logoImg{ display: none}
    .topHeader .logoMain{ width: 100%;}
    .topHeader .logoMain img{ width: auto}
    .topHeader .book{ width: 100%; margin-top: 30px}
    .topHeader .aside{ padding: 0}
    .topHeader .book .book-btn{ font-size: 16px}
    .topHeader .book p{font-size: 20px; font-weight: bold}
    #mainContent{ font-size: 14px; line-height: 20px}
    .contactPage form input, .contactPage form textarea{ font-size: 14px}
    .content h5{font-size: 18px}
    .contactPage h1{font-size: 20px; line-height: 30px; margin-bottom: 10px}
    #colophon.wrapper{font-size: 14px}
    .topHeader .logoMain{width: 50%}

    .navigation-btn{  cursor: pointer;position: absolute;right: 20px; top:87px; display: block !important;z-index: 10;width: 40px; height: 25px; float: right;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    .navigation-btn.open{right: 240px}
    .navigation-btn p.menu{ margin-top: 5px; font-size: 13px; text-align: center; color: #fff; margin-right: 50px; float: right}
    .navigation-btn span{ height: 5px; background: #000; width: 40px;  display: block; border-radius: 24px; position: absolute; top: 0;right: 0;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    .navigation-btn span.middle{ top: 9px;opacity: 1}
    .navigation-btn span.last{top:18px;}

    .navigation-btn.open span.middle{opacity: 0}
    .navigation-btn.open span.first{top: 10px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);}
    .navigation-btn.open span.last{ top: 10px;	-ms-transform: rotate(-45deg); /* IE 9 */
        -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
        transform: rotate(-45deg);}
   #navigation{position: fixed; top: 0; right:-230px; width: 230px; background: #758b0b; z-index: 11; height: 100%;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       -o-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;}
   #navigation.open{right: 0}
   .topHeader{ position: relative; z-index: 7}
    #navigation li{ display: block; width: 100%; border-bottom: 1px dashed; #fff;}
    #navigation li:first-child{border-top:1px dashed #fff;}
    #navigation li:last-child{display: none}
    #navigation li a{ display: block; text-align: left; color: #fff; padding-left: 15px; padding-top: 8px; padding-bottom: 8px; font-size: 18px; font-weight: bold}
    header#branding{ box-shadow: none; padding-bottom: 20px}
    #mainContent .wrapper{ box-shadow: none}
}
@media screen and (max-width: 500px){
    #colophon.wrapper{ font-size: 12px}
}
@media screen and (max-width: 400px){
    .contactPage form input{ width:92%; float: none; margin: 0 0 10px; padding: 0 4%; z-index: 11}
}