#lightbox{

	background-color:#eee;

	padding: 10px;

	border-bottom: 2px solid #666;

	border-right: 2px solid #666;

	}

#lightboxDetails{

	font-size: 0.8em;

	padding-top: 0.4em;

	}	

#lightboxCaption{ float: left; }

#keyboardMsg{ float: right; }

#closeButton{ top: 5px; right: 5px; }



#lightbox img{ border: none; clear: both;} 

#overlay img{ border: none; }



#overlay{ background-image: url(/lightbox/overlay.png); }



* html #overlay{

	background-color: #333;

	back\ground-color: transparent;

	background-image: url(blank.gif);

	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");

	}

	





/*------------ Портфолио -----------------*/

.img{

	position: relative;

	background-size: cover;

	width: 100%;

	height: 100%;

-webkit-transition: all 300ms ease-in-out;

   -moz-transition: all 300ms ease-in-out;

    -ms-transition: all 300ms ease-in-out;

     -o-transition: all 300ms ease-in-out;

		transition: all 300ms ease-in-out;

}

.img:hover{

	width: 94%;

	height: 88%;

	margin: 3%;

-webkit-transition: all 300ms ease-in-out;

   -moz-transition: all 300ms ease-in-out;

    -ms-transition: all 300ms ease-in-out;

     -o-transition: all 300ms ease-in-out;

		transition: all 300ms ease-in-out;

}

.desc{

	position: absolute;

	display: block;

	width: 100%;

	height: 100%;

	opacity:0;

	color: #fff;

	text-align: center;

	text-decoration: none!important;

-webkit-transition: all 300ms ease-in-out;

   -moz-transition: all 300ms ease-in-out;

    -ms-transition: all 300ms ease-in-out;

     -o-transition: all 300ms ease-in-out;

		transition: all 300ms ease-in-out;

}

.img:hover .desc{

	opacity: 1;

	background-color: rgba(0, 0, 0, 0.701961);

-webkit-transition: all 300ms ease-in-out;

   -moz-transition: all 300ms ease-in-out;

    -ms-transition: all 300ms ease-in-out;

     -o-transition: all 300ms ease-in-out;

		transition: all 300ms ease-in-out;

}

.left{float: left;}

.big{

	width: 49.5%;

	background-color: #fff;

	height: 250px;

	/*margin-bottom: 5px;*/

	margin: 0 0.25% 5px;

}

.small{

	width: 100%;

	margin-bottom: 2%;

	height: 49%;

	background-color: #fff;

}

.m-left{margin: 0 0.25%;}

.m-right{margin-right: 0.5%;}

.column{

	width: 24.5%;

	height: 250px;

	margin-bottom: 5px;

}

.column .small:last-child{margin-bottom:0;}

.big .client_name{font-size: 26px;}

.small .client_name{font-size: 15px; padding-top: 5%;}

.big .client_desc{font-size: 16px;}

.small .client_desc{	font-size: 12px; padding: 2px 5%!important;}

.small .client_desc p{	margin: 0; padding: 0!important;font-size: 10px!important;}

.client_name{padding-top: 15%;color:#fff!important;text-decoration: none!important;}

.big .client_name:after{ height:5px;}

.small .client_name:after{ height:3px;}

.client_name:after{

	content:"";

	display:block;

	width: 10%;

	margin-left: 45%;

	margin-top: 2%;

	background-color: #fff;

}

.client_desc {padding: 2% 5%;width: 100%; box-sizing: border-box; color:#fff!important;text-decoration: none!important;}

.client_desc p{color:#fff!important;}



@media(min-width:480px) and (max-width:767px) { 

	.big{width:100%;}

	.column{ width: 100%; margin:0 0 5px 0!important;}

	.column .small{ width: 49.5%; height: 100%; margin-right: 0.5%; margin-bottom:0;}

	.column .small:last-child{ width: 50%; margin-right: 0;}

}

@media(max-width:480px) {

	.big{width:100%;margin-bottom: 10px;}

	.column{ width: 100%; height: 500px; margin:0 0 10px 0!important;}

	.column .small{ width: 100%; height: 49%; }

	.small .client_name{font-size: 26px;}

	.small .client_desc{font-size: 16px;}

	.small .client_name:after{ height:5px;}

}