/* 
	Shanyan Koder
	by ESD Services Limited
*/
body {font:normal 14px/1.8 Georgia, "Times New Roman", Times, serif;background:url(../img/top-bg.gif) no-repeat 50% 0%;color:#939598;}
p {margin-bottom:1.2em;}
a {color:#404040;text-decoration:none; outline:0;}
a:hover {color:#404040;text-decoration:underline;}
.container {width:960px;margin:0 auto;}
#content a {color:#71757b;text-decoration:none;border-bottom:1px solid #71757b;}
#content a:hover {color:#404040;text-decoration:none;border-bottom:1px solid #404040;}

img {border:0;}

#header {height:160px;padding-bottom:35px;}
#logo {display:block;float:left;width:280px;height:80px;background:url(../img/shanyan-koder.png) no-repeat;text-indent:-2000px;margin:40px 20px;}
#nav {float:right;margin:0 10px;}
#nav li {float:left;width:100px;margin:0;padding:0;text-align:center;}
#nav li a {display:block;height:40px;color:#b0b3b8;text-decoration:none;font-size:14px;line-height:40px;text-transform:uppercase;letter-spacing:.5px;margin-top:50px;}
#nav li a {background:url(../img/nav-hover-bg.png) no-repeat -100px 0;}
#nav li a:hover {background-position: 0 0;color:#404040;}
#nav li.current a {background-position: 0 0 !important;color:#404040;}

.left {float:left;}
.right {float:right;}

body.home {background:none;}
.welcome {display:block;position:absolute;top:50%;width:400px;left:50%;margin-left:-200px;;margin-top:-150px;text-align:center;color:#ddd;text-decoration:none !important;}
.enter {display:block;text-transform:uppercase;letter-spacing:1px;margin-top:160px;}

#content {margin:35px 0;}
#content .two-col {width:600px;margin:0 10px;padding:0 10px;}
#content .one-col {width:280px;margin:0 10px;padding:0 10px;}
#content .grid-item { 
  float: left;
  width: 33.3333%; 
  border: 15px solid transparent;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
#content .grid-item-wide { 
  width: 66.6666%; 
}
#content .grid-item-4{
  width: 25%;
}
#content .grid-item-2{
  width: 50%;
}
#content .grid-item-1{
  width: 100%;
}
#content .grid-item-64{
  width: 64%;
}
#content .grid-item-36{
  width: 36%;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 9;
}
.text{
  padding: 0 15px;
}
.text h3{
  font-size: 18px;
}
.caption {
  display: none;
}
.hovertxt{
  position: absolute;
  top: 50%;
  margin-top: -12px;
  z-index: 10;
  color: #fff;
  width: 100%;
  text-align: center;
  padding: 0 15px;
  box-sizing: border-box;
}
#content .grid-item:hover {color: inherit; border-bottom:15px solid transparent;}
.grid-item img{
  width: 100%;
  display: block;
}
.grid-item:hover img {
  overflow: hidden;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; 
}
.grid-item:hover .overlay {
  opacity: 1;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.link-row{
  display: flex;
  width: 100%;
  padding: 0 15px;
  justify-content: center;
}
#content .link-row a{
  text-decoration: underline;
  border-bottom: none;
  width: 33.333%;
  text-align: center;
}
#content .link-row a.link-wide{
  width: 66.666%;
}
#content .link-row a.link-wide-1{
  width: auto
}
#content p {text-align: justify; text-justify: newspaper; *text-justify:auto;}

ul.services li{border-bottom:1px solid #ececed;color:#71757b;font-style:italic;line-height:1.4;padding:5px;}

#footer {font-size:11px;margin:35px 10px;padding:0 10px;-webkit-text-size-adjust:100%; position:relative; width:100%; }
#footer img {vertical-align:bottom;}

/* =============================================================================
   11. Clearing
   ========================================================================== */ 

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12 {
  zoom: 1;
}

#insta { position:absolute; top:0; right:10px;}
#insta img {vertical-align:middle;}
#insta a { color:#71757B;}

.remark { font-size: 12px; }