@import url('reset.css');
@charset "utf-8";
/* CSS Document */
body{ font-family: 'titillium_webregular' !important; background-color:#e8dacc !important; overflow-x:hidden; font-size:17px !important; color:#535051 !important; }

@font-face {
    font-family: 'titillium_webregular';
    src: url('font/titilliumweb-regular-webfont.woff2') format('woff2'),
         url('font/titilliumweb-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


::selection {
	color: #fff;
	background: #e09d5a;
	text-shadow: none;
}
::-webkit-selection {
color:#fff;
background:#e09d5a;
text-shadow: none;
}

::-moz-selection {
color:#fff;
background:#e09d5a;
text-shadow: none;
}
/*nav*/
.main-preloader {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 999999999;
      background-color: #3e2914;
      text-align: center;
    }
    .main-preloader .main-preloader-inner {
      position: absolute;
      top: 20%;
      width: 100%;
    }
    .main-preloader .preloader-percentage {
      color: #ffffff;
      margin: 0;
    }
    .main-preloader .preloader-percentage span {
      display: inline-block;
      float: center;
      font-size: 50px;
    }
	.main-inner{float:left; width:100%; height:141px; background-color:#000; background-image:url(../images/about-banner.jpg); background-repeat:no-repeat; background-size:cover; background-position:center; background-attachment:fixed;}
	.main-inner img{width:100%;}
	.main-inner h1{ font-size: 30px; padding: 11px; z-index: 1000; position: relative; text-align: right; background-color: #f7a72c; width: 17%; float: right; text-align: center;
top: 66px;
right: 21px;
color: #000;}
	.in-pages{ background-color:#000 !important; position:relative !important;}
	.santhome{ margin-bottom:0px;}
.main-section{float:left; width:100%; height:auto; }
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a{ background:url(../images/bor.jpg) no-repeat -200px bottom !important;transition: all ease-in-out .5s;
transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;}
.navbar-default{ background-color:transparent !important; border:none !important;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{ color:#d7b493 !important; background-color:transparent !important;}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{background: url(../images/bor.jpg) no-repeat 0px bottom !important;
transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;}
.nav > li{  text-transform:uppercase; font-size:16px;}
.navbar-nav > li > a{ line-height:28px !important;}
.navbar-nav > li > a{ padding-top:0px !important; padding-bottom:0px !important;}
.navbar-default .navbar-nav > li > a{color:#ad8d6d !important;}
.navbar-brand{ padding:0px !important; margin-top:-15px;}
.navbar-brand > img{ margin-top:12px;}
.navbar{min-height:46px !important; margin-bottom:0px !important;}
.nav > li > a{padding: 0px 18px 12px !important; color:#998067;}
/*nav*/


<!-- START OF GALLERY CATAGORY-->



.gal-caption {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.gal-caption h4 { white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-transform:uppercase; }

.overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(51,51,51,.7); overflow:hidden; width:100%; height:0; -webkit-transition:.3s ease; transition:.3s ease; }
.gal-pic:hover .overlay { height:100%; }
.gal-pic { position:relative; }
   <!-- end OF GALLERY CATAGORY--> 



/*transition*/
.about a{-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;}
.top-menu ul{ margin-top:15px !important;}
.top-right{float:right;  text-align:right; padding-top:10px;}
/*slider*/
.top-slider{ position:relative; width:100%; height:auto; }
.top-frame{position:absolute; width:100%;}
.top-frame img{width:100%;}
.slide{ width:100%; height:auto;}
.slide img{ width:100%; height:auto;}
.top-section{width:100%; z-index:1000; position:absolute; border-bottom:solid 2px #3e2914;}
.top-section img{ width:100%;  height:auto;}
.main,.projects{float:left; width:100%; height:auto; background-image:url(../images/shadow.png); background-position:top center; background-repeat:no-repeat; border-top:solid 10px #fff;}
.border{ margin-top:0px; float:right;}
.about{ padding:130px 0px;}
.about h1{font-size:50px; margin-bottom:15px;}
.about h2{font-size:30px; margin-bottom:15px; line-height:32px;}
.about p{ line-height:25px; text-align:justify; margin-bottom:47px;}
.about a{border:solid 3px #535051; padding:15px; color:#535051;}
.about a:hover{ background-color:#535051; color:#eee; text-decoration:none;}
.santhome-team{ float:left;background-color:#fff; text-align:center; height:auto; padding-bottom:37px;}
.santhome-projects{ background-color:#e8dacc; text-align:center; padding-bottom:80px;}
.santhome{ margin-top:30px;}
.team{float:left; text-align:center; width:100%; margin-top:20px;}
.team h2{ margin-top:15px; margin-bottom:5px; color:#e86811; font-size:23px; font-weight:600;}
.team h3{ font-size:25px; font-weight:600;color:#66be11; margin-top:0px;}
.team h4{font-size:20px; color:#000;}
.projects{ background-color:#fff !important; height:auto; border-top:0px;}
.project-details{ padding-left:2% !important;}
.bottom-section{float:left; width:100%; height:auto; padding-top:2%; padding-bottom:2%; }
.bottom-section h2{ margin-top:15px; margin-bottom:15px; color:#f38d2b; font-size:50px; font-weight:600;}
.bottom-section ul li{ padding:10px 0px; list-style:circle; color:#eee; margin-left:15px;}
.bottom-section ul li:hover{ list-style:disc;}
.footer{float:left; width:100%; height:auto; background-color:#000; padding-top:30px; padding-bottom:30px;}
.social{float:left; width:100%;}
.social i{ text-align:center !important;}
.social a i:hover{ background-color:#F90;  transition: all 0.3s ease-in-out;-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: all ease-in-out 0.5s;}
.social i {
    background: #2D2A27;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 20px;
    text-align: center;
    margin-right: 10px;
    padding-top: 10px;
    transition: all 0.3s ease-in-out;
}
.fa-facebook {
    background:#3b5998
} 
.fa-linkedin {
    background:#007bb6
}
.fa-twitter {
    background:#00aced
}
.google-plus {
    background:#dd4b39
}
.social ul li a i:hover {
    opacity: .7;
}
.nopadding{ padding-left:0px !important; padding-right:0px !important;}
.copyright p{font-size:16px; padding-top:10px;}
.copyright span{ margin-left:25px;}
.navbar-default .navbar-toggle{ border-color:#f59271;}
.navbar-toggle{ background-color:#eb8f36 !important; border:solid 1px #fff;}
 .jlr {font-size: 0;}

.jlr .jlr_item {
    font-size: 1rem;
    display: inline-block;
    box-sizing: border-box;     
    padding: 5px;
}

.jlr img.jlr_img {
    height: 200px;
    opacity: 0;

}

.jlr img.jlr_loaded {
     -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    opacity: 1;
}

.gray_out {
    background-color: #eee;
}
@media screen and (max-width: 1350px) {
	.siz{width:78%;}
@media screen and (max-width: 1199px) {
.siz{width:75%;}
}
@media screen and (max-width: 991px) {
	.santhome-team{width:100%;}
	.project-details{ padding:0px;}
 .hidden-md {
    display: none !important;
  }
  .Mobile{ display:block !important;}
  .Mobile{ width:141px; padding-top:8px !important; height:auto !important;}
.top-section{ position:relative; background-color:#000;}
.siz{z-index:1000; position:relative;}
}
@media screen and (max-width: 767px) {
 .hidden-sm {
    display: none !important;
  }
   .hidden-xs {
    display: none !important;
  }
  .nav > li{border-bottom: dashed 1px #7e6453;}
  }
		@media screen and (max-width: 680px) {
		
		}
		@media screen and (max-width: 500px) {
		
		}
		
@media screen and (max-width: 480px) {

}

@media screen and (max-width: 320px) {

	
}
@media screen and (max-width: 287px) {

	
}