/*=========================================
	Our Works
==========================================*/

.work-filter {
  margin-bottom: 35px;
  margin-top: 10px;
}

.work-filter ul li {
    display: inline-block;
	
	margin:0px 5px;
}

.work-filter ul li a {
  color: #062033;
  display: block;
  font-size: 17px;
  font-weight: normal;
  padding: 10px 25px;
  border-radius: 0px;
  text-transform: capitalize;
  border:1px solid #e8e8e8;
}

.work-filter ul li a:hover,
.work-filter ul li a.active {
  background-color: #004c98;
  border-radius: 0px;
  color: #fff;
  padding: 10px 25px;
}

.mix {
    display: none;
}
.text-center {
	padding-left:0px !important;
}
.work-item {
    float: left;
    width: 20%;
    position: relative;
	margin:0px 0px 0px 0px;
}

.work-item > img {
  display: block;
  height: auto;
  width: 100%;
}

.work-items {
    float: left;
    width: 23%;
    position: relative;
	margin:10px;
	border: 1px solid #cdccd9;
	
}

.work-items > img {
  display: block;
  height: auto;
  width: 100%;
}



.overlay {
	/*background-color: rgba(0,0,0,.5);*/
	background: linear-gradient(0deg, rgba(91,89,199,0.7) 0%, rgba(254,196,59,0.7) 100%);
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	padding:60px 30px;
	opacity: 0;
	filter: alpha(opacity=0);
	float:left;
	-webkit-transition: all 450ms ease-out 0s;	
	   -moz-transition: all 450ms ease-out 0s;
		 -o-transition: all 450ms ease-out 0s;
		    transition: all 450ms ease-out 0s;
		  
	-webkit-transform: rotateY(180deg) scale(0.5,0.5);
	   -moz-transform: rotateY(180deg) scale(0.5,0.5);
		-ms-transform: rotateY(180deg) scale(0.5,0.5);
		 -o-transform: rotateY(180deg) scale(0.5,0.5);
			transform: rotateY(180deg) scale(0.5,0.5);
}

.work-item:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: rotateY(0deg) scale(1,1);
	   -moz-transform: rotateY(0deg) scale(1,1);
		-ms-transform: rotateY(0deg) scale(1,1);
		 -o-transform: rotateY(0deg) scale(1,1);
		    transform: rotateY(0deg) scale(1,1);
}
.work-item .overlay a {
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  margin-top: 10%;
  padding:10px;
  background:#fff;
  color:#e79800;
}
.work-item .overlay a:hover {
  color: #e79800;
}
.work-item .overlay h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin: 25px 0 8px;
}
.work-item .overlay p {
  font-size: 14px;
  line-height: 24px;
}


.work-items:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
	
	-webkit-transform: rotateY(0deg) scale(1,1);
	   -moz-transform: rotateY(0deg) scale(1,1);
		-ms-transform: rotateY(0deg) scale(1,1);
		 -o-transform: rotateY(0deg) scale(1,1);
		    transform: rotateY(0deg) scale(1,1);
}
.work-items .overlay a {
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  margin-top: 5%;
  padding:11px;
  background:#fff;
  color:#e79800;
}
.work-items .overlay a:hover {
  color: #e79800;
}
.work-items .overlay h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin: 25px 0 8px;
}
.work-items .overlay p {
  font-size: 14px;
  line-height: 24px;
}
.overlay a i{
	color:#e79800;
	font-size:15px !important;
}
.g_tit{
	float: left;
	width: 100%;
	text-align: center;
	font-size: 20px;
	font-weight: 550;
	color: #fff;
}
.g_con{
	float:left;
	width:100%;
	text-align:center;
	padding:10px 0px;
	font-size:16px;
	line-height:1.4;
}


@media only screen and  (max-width:1250px) {
.work-item .overlay a{
	margin-top:0%;
}
}

@media only screen and  (max-width:1200px) { 
.work-filter {
	margin-top:40px;
}
.work-item{
	width:24%;
	margin-left:10px;
}
.work-items{
	width:24%;
	margin-left:10px;
}
}


@media only screen and  (max-width:1000px) { 
.work-item {
	width:22%;
	margin-left:25px;
	margin-bottom:10px;
}
.work-item > img {
	width:100%;
	border:1px solid #ccc;
}
.work-items {
	width:22%;
	margin-left:25px;
	margin-bottom:10px;
}
.work-items > img {
	width:100%;
	border:1px solid #ccc;
}
}
@media only screen and  (max-width:990px) { 
.work-item {
    width: 30%;
}
}
@media only screen and  (max-width:830px) {
/*.work-item {
	width: 43%;
	margin-left: 20px;
}*/
.work-item {
	width:22%;
	margin-left:20px;
	margin-bottom:10px;
}
.work-items {
	width:22%;
	margin-left:20px;
	margin-bottom:10px;
}


}






@media only screen and  (max-width:750px) { 
.work-item {
	width:45%;
	margin-left:27px;
}
.work-items {
	width:45%;
	margin-left:27px;
}
}

@media only screen and  (max-width:680px) { 
.work-filter ul li a.active {
	padding: 10px 15px;
}
.work-filter ul li {
	margin:0px;
}

}

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

.work-item {
	width:45%;
	margin-left:20px;
}
.work-items {
	width:45%;
	margin-left:20px;
}
}

@media only screen and  (max-width:610px) { 
.work-filter ul li{
	margin-bottom:10px;
}
.work-filter {
	margin-bottom:25px;
}

}

@media only screen and  (max-width:560px) { 
.work-item {
	width: 45%;
	margin: 0px 10px 20px 10px;
}
/*.work-item .overlay a {
	margin-top:30%;
}*/
.work-items {
	width: 45%;
	margin: 0px 10px 20px 10px;
}
.work-items .overlay a {
	margin-top:30%;
}
}


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

.work-item {
	width:95%;
	margin:10px;
}
/*.work-item .overlay a {
	margin-top:35%;
}*/
.work-items {
	width:95%;
	margin:10px;
}
.work-items .overlay a {
	margin-top:35%;
}
.gal_hd{
	font-size: 23px !important;
	font-weight:510;
}
.gal_out{
	padding-top:0px;
}
}

@media only screen and  (max-width:400px) {
/*.work-item .overlay a {
	margin-top:25%;
}*/
.work-items .overlay a {
	margin-top:25%;
}
}