@charset "utf-8";


#info {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;				
	background:#fcf8e3;
	border:1px solid  #fbeed5;
	width:95%;
	max-width:900px;
	margin:0 auto 40px auto;
	font-family:arial;
	font-size:12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

	#info .info-wrapper {
		padding:10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;

	}
	
	#info a {
		color:#c09853;
		text-decoration:none;
	}
	
	#info p {
		margin:5px 0 0 0;
	}


.containeral { 
	position: relative; 
	width: 100%; 
	margin: 0 auto; 
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;	
}
 
#filters {
/*margin:1%;*/
	padding:0;
	list-style:none;
}

	#filters li {
		float:left;
	}
	

 
	#filters li div.active {
                background-color: rgb(0, 153,204);
		color:#fff;
                font-size: 16px;
	}
	#filters li div.unactive {
                background-color: rgb(58, 110, 102);
                font-size: 14px;
		color:#fff;
	}
 
#portfoliolist .portfolio {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	width:100%;
	/*margin:1px;*/
	display:none;
	float:left;
	overflow:hidden;
}

.portfolio-wrapper {
	overflow:hidden;
	/*position: relative !important;
	 background-color: rgb(134, 203, 211);
	/*background: #666;
	cursor:pointer;*/
}
.bg{
 background-color: rgb(0, 102, 153);
color: rgb(255, 255,255);
}
.H100{
height:100%!important;
}
.H300{
height:300px!important;
}

.all {
	width:95%;
        border:0px #e7e7e7 solid;
        margin: 0 auto; 
}
.all_1 {
 width:95%;

}
.top
{
 float:left;
}

.display
{display:block;
}
.hidden2
{display:none;
}
.center
{text-align:center;
}
.display_none
{	display:none!important ;
}
 .pic {
	width:30%;
        height:100%;
        overflow:hidden;
        border:0px #e7e7e7 solid;
        border-right:0px #e7e7e7 solid;
        padding:1.5%;
        padding-left:3%;
        box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
	margin-top:70px;
}

 .pic li{
        width:50%;
	padding:1%;
 	float:left;
        box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;
	overflow:hidden; 
}
.pic img {
   width:100%;
}
.pic img:hover {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
 .info {

	width:68%;
        height:100%;
        line-height:45px;
        border:0px ;
   
        border-left:0px #e7e7e7 solid;
        box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;
 
}
 .info_content {
	padding:5%;
	font-size: 14px;
	color:#fff;
}
.info_table {
        width:93%;
	}	
	.info table {
        width:100%;
      
        line-height:30px;

	}	
	.info tr:hover
	{ 
          background-color: rgb(0, 153,204);
         
	}
	.info td
	{  border:1px #a8a8a8 solid;
           color:#fff;
         line-height:30px
	}	
	
	.portfolio .label {
		position: absolute;
		width: 100%;
		height:40px;
		bottom:-40px;
	}

		.portfolio .label-bg {
			background: #e95a44;
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
		}
	
		.portfolio .label-text {
			color:#fff;
			position: relative;
			z-index:500;
			padding:5px 8px;
		}
			
			.portfolio .text-category {
			display:block;
				font-size:9px;
			}
	
	
	
.clearfix{margin:0 auto;width: 90%;height:50px;line-height:50px;border-left:1px #c9caca solid;}
.clearfix li{width:32.5%;height:50px;line-height:50px;border:1px #c9caca solid;border-left:0px;text-align:center;}
.clearfix li.bo-lal{}

 



/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.containeral {
		width:100%; 
	}
	.clearfix{width:100%;}
	
}

.sol_list {}
.sol_list dl{ width:300px; height:195px; float:left; margin-left:0px;margin-right:36px;  margin-bottom:20px; border:1px solid #ebebeb;}
.sol_list dl dt {}
.sol_list dl dt img{ width:300px; height:150px;}

.sol_list dl dd p{
	line-height: 45px;
	font-size: 14px;
	text-align: left;
	height:45px;
        width:95%;
	clear:both;
	display:block;
	float:left;
        padding-left:5%;
color: rgb(255, 255,255);
       
}

.sol_list dl dd{ margin:0 auto;}
.sol_list dl dd p:hover{  color:#5a9cd9;clear:both;background: url(../images/sol_icon.gif) 270px 14px no-repeat #5a9cd9;  }
.sol_list dl dd a:hover{  color:#5a9cd9;clear:both;background: url(../images/sol_icon.gif) 270px 14px no-repeat #5a9cd9;  }
.sol_list dl:hover{ border:1px solid #cfe4f7;}
.sol_list dl:hover dd a{clear:both;color: rgb(255, 255,255); font-weight:bold; }
.sol_list dl:hover dd p{clear:both;color: rgb(255, 255,255); font-weight:bold; }

.fixed {   position: fixed;
    top: 50%;
    right: 0px;
    z-index: 9998;
    width: 333px;
}
/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	.containeral { 
		width: 480px; 
	}
	.web-sercice{width:95%; }
	.clearfix{width:100%;}
	#portfoliolist .portfolio {
		width:48%;
		margin:1%;
	}		

	#ads {
		display:none;
	}
	
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.containeral {
		width: 70%;
	}
	.web-sercice{width:95%; }
	.clearfix{width:100%;}
	#ads {
		display:none;
	}
	
}

/* #Clearing */

/* Self Clearing Goodness */
.containeral:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

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