@font-face {
  font-family: myFont;
  src: local("Microsoft JhengHei");
}
@font-face {
  font-family: myFont;
  src: url("../fonts/GlacialIndifference-Regular.otf");
  unicode-range: U+00-024F;
}
@font-face {
  font-family: brand;
  src: url("../fonts/nimbus-sans-l_regular.ttf");
  unicode-range: U+00-024F;
}
body{
  font-family: myFont;
}
button{
  border: 1px solid #00223F;
  background: #003865;
  color: snow;
}
button:hover{
  border: 1px solid #00223F;  
  background: snow;
}
.inline-block{
  display: inline-block;
}
.hr{
  margin: auto auto;
}
.hrDesc{
  font-size: 12pt;
  padding: 5px 0 10px;
  line-height: 20px;
}
.button{
  border-radius: 5px;
  padding: 10px 15px;
  color: snow;
}
/* Nav Start*/
nav{
  background: #333;
}
nav a{
  color: snow;
}
nav a:hover{
  color: #BDBDBD;
}
nav .navbar-brand .logo{  
  padding-right: 10px;
}
nav .navbar-brand img{
  margin-top: -24px;
  height: 35px;
}
nav .nameHolder{
  font-family: brand;  
}
nav .nameHolder .company_name{
  margin-top: -7px;
  font-weight: bold;
  font-size: 14pt;
}
nav .nameHolder .company_desc{
  font-size: 9pt;
}
.nav>li>a:focus, .nav>li>a:hover, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover{
  background: none;
  color: #BDBDBD;  
}
nav .dropdown-menu{
  background: #333;
}
nav .dropdown-menu a{
  color: snow;
}
nav .dropdown-menu>li>a:focus, nav .dropdown-menu>li>a:hover{
  background: none;
  color: #BDBDBD;
}
.navbar-toggle .icon-bar{
  color: snow;
  border-color: snow;
  background-color: snow;
}
nav button:hover{
  border: none;
  background: none;
}
/* Nav End */
/* Header Start*/
header .carousel-caption{
  padding-bottom: 60px;
}
header .button{
  background: #003865;
}
header .button:hover{
  text-decoration: none;
  color: #A4A4A4;
}
header .button:focus{
  text-decoration: none;
  color: snow;
}
@media (min-width:768px){
  h2{
    font-size: 30pt;
  }
}
@media (max-width:768px){
  h2{
    font-size: 20pt;
  }
}
/* Header End*/
/* headerdown Start */

#headerdown{
  margin-top: -25px;
  position: relative;
  background: #F4F5F9;
}
/* headerdown End */
/*About us Start*/
#aboutus{
  padding: 40px 0 30px 0;
}
#aboutus h3{
  border-left: 5px solid #003865;
}
#aboutus h3 .title {
    padding-left: 10px;
}
#aboutus img{
  margin-top: 80px;
}
/*About us End*/
/*Service Start*/
#service{
  padding: 30px 0;  
  background: #202020;  
}
#service img{
  margin-top: 85px;
}
#service h3{
  border-right: 5px solid #003865;
  color: snow; 
}
#service h3 .title{
  padding-right: 10px;
}
#service ul{
  list-style-type: square; 
  margin-right: 20px;
}
#service li{
  direction: rtl;
  color: snow;
  text-align: right;
}
#service li p{
  color: #848484;
  padding-bottom: 20px;
}
/*Service End*/
/*Works Start*/
#works{
  background: #F4F5F9;
  padding: 30px 0 0 0;
}
#works .row{
  margin: 0;
}
#works .pic{
  padding: 0;
}
#works .portfolio-box .portfolio-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 0;
    background: rgba(0,56,101,.9);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}
#works .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}
#works .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}
#works h4{
  color: #848484;
  font-size: 12pt;
}
/*Works End*/
/*Contact Start*/
#contact{
  padding: 30px 0;  
  background: #F4F5F9;
}
#contact h4{
  color: #848484;
}
#contact iframe{
  pointer-events: none;
}
#contact iframe.clicked{
  pointer-events: auto;
}
/*Contact End*/
/*Footer Start*/
footer{
  color: snow;
  background: #333;
  margin: 0;
  padding-top: 30px;
  padding-bottom: 10px;  
}
footer a{
  color: snow;
}
footer li{
  display: inline-block;
  width:30px;
  height:30px;
  border-radius:50px;
  font-size:12px;
  color:#fff;
  line-height:30px;
  text-align:center;
  background:#000; 
}
footer .footerIcon{
  padding: 0;
}
/*Footer End*/
/*Tips Start*/
#tips{
  padding: 60px 0;
}
#tips p{
  line-height: 20px;
  font-size: 11pt;
  padding-bottom: 10px;
}
#tips .content img{
  padding-top: 30px;
}
/*Tips End*/
/*Reference Start*/
#reference{
  color: snow;
  background-size: cover;
  background-image: url('../img/background.png'); 
  z-index: -2;  
  padding: 50px 0 0 0;
  min-height: 1000px;
  color: snow;
}
#reference #distristHolder{
  color: #00223F; 
}
#reference ul{
  margin: 20px;
  padding: 0;
}
#reference li{
  color: #F2AF4D;
  list-style-type: square;
}
#reference #distristHolder h3{
  color: #FFFFFF;
}
#reference .itemStyle{
  color: #FFFFFF;
}
#reference .itemLinks{
  cursor: pointer;
}
#reference .itemStyle:hover{
  color: #D5745A;
}
#reference #flatTitle{
  color: #FFFFFF;
}
#reference .thumbnailHolder {
  text-align: center;
	display: inline;
	width: 100px;
	height: 100px;
	overflow: hidden;
  position: relative;
}
#reference .thumbnailHolder .flatThumb{
  min-height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
}
#reference .thumbImg{
  margin: 0;
  padding: 0;
  margin: 2px;
  width: 100px;
  height: 100px;
}
#reference .thumbImg:hover{
  cursor: pointer;
}
#reference .flatMenu{
  padding-left: 45px;
}
#reference .flatPic{
  display: none;
  padding-left: 30px;
}
#reference .items{
  display: inline;
}
#reference .hovereffect{
  padding: 3px;
}
#reference .hovereffect .overlay {
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}
#reference .items .hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}
#reference .items .hovereffect img{
  width: 256px;
  height: 170px;
  overflow: hidden;
}
#reference .items .hovereffect h2{
  margin: 2px 0 0 0;
  color: #FFFFFF;
  font-size: 11pt;
  margin-left: 3px;
  text-align: left;
}
#reference .items .hovereffect:hover{
  cursor: pointer;
}
#reference .items .hovereffect:hover h2{
  color: #D5745A;
  /*background:rgba(0, 29, 71, 1);*/
}
#reference #randomFlat{
  padding-top: 20px;
}
/*Reference End*/
/*portfolioList Start*/
#portfolioList{
  background-size: cover;
  background-image: url('../img/background.png');
  z-index: -2;  
  padding: 50px 0 0 0;
  min-height: 1000px;
  color: snow;
}
#portfolioList #distristHolder{
  color: #00223F; 
}
#portfolioList ul{
  margin: 20px;
  padding: 0;
}
#portfolioList li{
  color: #F2AF4D;
  list-style-type: square;
}
#portfolioList #distristHolder h3{
  color: #FFFFFF;
}
#portfolioList .itemStyle{
  color: #FFFFFF;
}
#portfolioList .itemLinks{
  cursor: pointer;
}
#portfolioList .itemStyle:hover{
  color: #D5745A;
}
#portfolioList .moreFlat{
  margin-top: 15px;
  margin-bottom: 0px;
  margin-right: 10px;
}
#portfolioList .dropdown-menu{
  background-color: #424242;
}
#portfolioList .titleHolder{
  padding-left: 0px;
}
#portfolioList .randomHolder{
  padding-left: 30px;
}
#portfolioList #flatTitle{
  color: #FFFFFF;
}
#portfolioList .thumbnailHolder {
  text-align: center;
	display: inline;
	width: 100px;
	height: 100px;
	overflow: hidden;
  position: relative;
}
#portfolioList .thumbnailHolder .flatThumb{
  min-height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
}
#portfolioList .thumbImg{
  margin: 0;
  padding: 0;
  margin: 2px;
  width: 100px;
  height: 100px;
}
#portfolioList .thumbImg:hover{
  cursor: pointer;
}
#portfolioList .flatMenu{
  padding-left: 45px;
}
#portfolioList .flatPic{
  display: none;
  padding-left: 30px;
}
#portfolioList .items{
  display: inline;
}
#portfolioList .hovereffect{
  padding: 3px;
}
#portfolioList .hovereffect .overlay {
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}
#portfolioList .items .hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}
#portfolioList .items .hovereffect img{
  width: 256px;
  height: 170px;
  overflow: hidden;
}
#portfolioList .items .hovereffect h2{
  margin: 2px 0 0 0;
  color: #FFFFFF;
  font-size: 11pt;
  margin-left: 3px;
  text-align: left;
}
#portfolioList .items .hovereffect:hover{
  cursor: pointer;
}
#portfolioList .items .hovereffect:hover h2{
  color: #D5745A;
  /*background:rgba(0, 29, 71, 1);*/
}
#portfolioList #randomFlat{
  padding-top: 20px;
}
/*#portfolioList .items{
  position: relative; 
  padding: 0;
}
#portfolioList .items img{
  position: relative; 
  padding: 0;
}
#portfolioList .hovereffect{
  padding: 3px;
}
#portfolioList .hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
#portfolioList .items .hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}
#portfolioList .items .hovereffect h2{
  color: snow;
  position: absolute;
  font-size: 17px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.9);
  padding: 10px;
  margin-left: 3px;
}
#portfolioList .items .hovereffect:hover{
  cursor: pointer;
}
#portfolioList .items .hovereffect:hover h2{
  background:rgba(0, 12, 29, 0.7);
}
#portfolioList .lightbox i{
  font-size: 30pt;
}*/
/*portfolioList End*/