/* metro layout */

@media screen and (min-width: 2000px) {

/*.metro-layout { width: 100%; height: 350px;  } .metro-layout { width: 100%; height: 800px;  margin: auto; }*/


.proekti { width: 100%; height: 800px;  margin: auto; }
.portfolio { width: 100%; height: 800px;  margin: auto;}

.metro-layout .header { height: 37%; position: relative; }
.metro-layout .header h1 { position: absolute; top: 40%; margin-top: -0.6em; left: 20px; padding-left: 0.1em; font-size: 3em; line-height: 1em; }
.metro-layout .header .controls { }
.metro-layout .header .controlsleft { position: absolute; top: 40%; height: 48px; margin-top: 324px; right: 20px; }
.metro-layout .header .controls span { float: right; width: 48px; height: 475px; margin-left: 7px; opacity: 0.80; filter: alpha(opacity=25); cursor: pointer; background: url(../images/sprite.png) no-repeat -999px 0; }
.metro-layout .header .controls span:hover { opacity: 1; filter: none; }
.metro-layout .header .controls span.prev { background-position: 0 0; position: absolute; top: 80%;  margin-top: 250px; left: 20px;  z-index:100000000;}
.metro-layout .header .controls span.next { background-position: -90px 0; position: absolute; top: 80%;  margin-top: 250px; right: 20px;  z-index:100000000; }
.horizontal .header .controls span.toggle-view { background-position: -96px 0; }
.vertical .header .controls span.toggle-view { background-position: -144px 0; }
.metro-layout .header .controls span.up { background-position: -192px 0; }
.metro-layout .header .controls span.down { background-position: -240px 0; }
.horizontal .header .controls span.up, .horizontal .header .controls span.down, .vertical .header .controls span.prev, .vertical .header .controls span.next { display: none; z-index:10000000;}
.metro-layout .content { height: 650px; overflow: hidden; }
.metro-layout .content .items { padding: 0 0px; position: relative; overflow: hidden; }
.horizontal .content .items { height: 650px; z-index:10000; }
.vertical .content .items { padding-bottom: 10px; }
.metro-layout .box { float: left; position: relative;    width: 255px; height: 150px;  text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; background: #00a8ec; z-index: 9; border: 1px solid; border-left: 0; border-top: 0; border-image: url(http://mfstand.ru/5.png) 1 round round; }
.metro-layout .box:hover { opacity: 1; filter: alpha(opacity=1); }
.metro-layout .box span { position: absolute; left: 0.5em; bottom: 0.5em; font-size: 1em; font-weight: normal;}
.metro-layout .box img.icon { position: absolute; left: 50%; top: 50%;  z-index: 7;}
.metro-layout .box img.big { margin-left: -64px; margin-top: -64px;}
.metro-layout .box img.cover { position: absolute; left: 0; top: 0; width: 100%; z-index: 6;}
.metro-layout .width2 { width: 32em; }
.metro-layout .width3 { width: 49em; }
.metro-layout .width4 { width: 66em; }
.metro-layout .height2 { height: 18em; }
.metro-layout .height3 { height: 28em; }
.metro-layout .height4 { height: 38em; }



::selection { background: #158ca0; color: #fff; }
::-moz-selection { background: #158ca0; color: #fff; }

/* mobile support */
@media handheld, only screen and (max-width: 1024px){
	.metro-layout .header h1 { font-size: 2.2em; margin-top: -0.5em; }
}
/* mobile support */
@media handheld, only screen and (max-width: 480px){
	.metro-layout .header { position: relative; text-align: center; }
	.metro-layout .header h1 { left: 5px; font-size: 1.5em; margin-top: -0.5em; }
	.metro-layout .header .controls { position: static; width: 100%; height: auto; margin-top: 0; }
	.metro-layout .header .controls span { display: none !important; }
	.metro-layout .content .items { padding: 0 5px; }
	.vertical .content .items { padding-bottom: 0; }

}


}


@media screen and (min-width:1500px) and (max-width:1999px)  {

.proekti { width: 100%; height: 800px;  margin: auto; }
.portfolio { width: 100%; height: 800px;  margin: auto;}

.metro-layout .header { height: 29%; position: relative; }
.metro-layout .header h1 { position: absolute; top: 40%; margin-top: -0.6em; left: 20px; padding-left: 0.1em; font-size: 3em; line-height: 1em; }
.metro-layout .header .controls { }
.metro-layout .header .controlsleft { position: absolute; top: 40%; height: 48px; margin-top: 324px; right: 20px; }
.metro-layout .header .controls span { float: right; width: 48px; height: 475px; margin-left: 5px; opacity: 0.80; filter: alpha(opacity=25); cursor: pointer; background: url(../images/sprite.png) no-repeat -999px 0; }
.metro-layout .header .controls span:hover { opacity: 1; filter: none; }
.metro-layout .header .controls span.prev { background-position: 0 0; position: absolute; top: 80%;  margin-top: 250px; left: 20px;  z-index:100000000;}
.metro-layout .header .controls span.next { background-position: -90px 0; position: absolute; top: 80%;  margin-top: 250px; right: 20px;  z-index:100000000; }
.horizontal .header .controls span.toggle-view { background-position: -96px 0; }
.vertical .header .controls span.toggle-view { background-position: -144px 0; }
.metro-layout .header .controls span.up { background-position: -192px 0; }
.metro-layout .header .controls span.down { background-position: -240px 0; }
.horizontal .header .controls span.up, .horizontal .header .controls span.down, .vertical .header .controls span.prev, .vertical .header .controls span.next { display: none; z-index:10000000;}
.metro-layout .content { height: 650px; overflow: hidden; }
.metro-layout .content .items { padding: 0 0px; position: relative; overflow: hidden; }
.horizontal .content .items { height: 450px; z-index:10000; }
.vertical .content .items { padding-bottom: 10px; }
.metro-layout .box { float: left; position: relative;    width: 160px; height: 106px;  text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; background: #00a8ec; z-index: 9; border: 1px solid; border-left: 0; border-top: 0; border-image: url(http://mfstand.ru/5.png) 1 round round; }
.metro-layout .box:hover { opacity: 1; filter: alpha(opacity=1); }
.metro-layout .box span { position: absolute; left: 0.5em; bottom: 0.5em; font-size: 1em; font-weight: normal;}
.metro-layout .box img.icon { position: absolute; left: 50%; top: 50%;  z-index: 7;}
.metro-layout .box img.big { margin-left: -64px; margin-top: -64px;}
.metro-layout .box img.cover { position: absolute; left: 0; top: 0; width: 100%; z-index: 6;}
.metro-layout .width2 { width: 32em; }
.metro-layout .width3 { width: 49em; }
.metro-layout .width4 { width: 66em; }
.metro-layout .height2 { height: 18em; }
.metro-layout .height3 { height: 28em; }
.metro-layout .height4 { height: 38em; }



::selection { background: #158ca0; color: #fff; }
::-moz-selection { background: #158ca0; color: #fff; }

/* mobile support */
@media handheld, only screen and (max-width: 1024px){
	.metro-layout .header h1 { font-size: 2.2em; margin-top: -0.5em; }
}
/* mobile support */
@media handheld, only screen and (max-width: 480px){
	.metro-layout .header { position: relative; text-align: center; }
	.metro-layout .header h1 { left: 5px; font-size: 1.5em; margin-top: -0.5em; }
	.metro-layout .header .controls { position: static; width: 100%; height: auto; margin-top: 0; }
	.metro-layout .header .controls span { display: none !important; }
	.metro-layout .content .items { padding: 0 5px; }
	.vertical .content .items { padding-bottom: 0; }

}
}

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


.proekti { width: 100%; height: 800px;  margin: auto; }
.portfolio { width: 100%; height: 800px;  margin: auto;}


.metro-layout .header {height: 35%;position: relative;}
.metro-layout .header h1 { position: absolute; top: 40%; margin-top: -0.6em; left: 20px; padding-left: 0.1em; font-size: 3em; line-height: 1em; }
.metro-layout .header .controls { }
.metro-layout .header .controlsleft { position: absolute; top: 40%; height: 48px; margin-top: 324px; right: 20px; }
.metro-layout .header .controls span { float: right; width: 48px; height: 475px; margin-left: 5px; opacity: 0.80; filter: alpha(opacity=25); cursor: pointer; background: url(../images/sprite.png) no-repeat -999px 0; }
.metro-layout .header .controls span:hover { opacity: 1; filter: none; }
.metro-layout .header .controls span.prev {background-position: 0 0;position: absolute;top: 50%;margin-top: 250px;left: 20px;z-index:100000000;}
.metro-layout .header .controls span.next {background-position: -90px 0;position: absolute;top: 50%;margin-top: 250px;right: 20px;z-index:100000000;}
.horizontal .header .controls span.toggle-view { background-position: -96px 0; }
.vertical .header .controls span.toggle-view { background-position: -144px 0; }
.metro-layout .header .controls span.up { background-position: -192px 0; }
.metro-layout .header .controls span.down { background-position: -240px 0; }
.horizontal .header .controls span.up, .horizontal .header .controls span.down, .vertical .header .controls span.prev, .vertical .header .controls span.next { display: none; z-index:10000000;}
.metro-layout .content {/* height: 500px; */overflow: hidden;}
.metro-layout .content .items { padding: 0 0px; position: relative; overflow: hidden; }
.horizontal .content .items { height: 400px; z-index:10000; }
.vertical .content .items { padding-bottom: 10px; }
.metro-layout .box { float: left; position: relative;    width: 130px; height: 86px;  text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; background: #00a8ec; z-index: 9; border: 1px solid; border-left: 0; border-top: 0; border-image: url(http://mfstand.ru/5.png) 1 round round; }
.metro-layout .box:hover { opacity: 1; filter: alpha(opacity=1); }
.metro-layout .box span { position: absolute; left: 0.5em; bottom: 0.5em; font-size: 1em; font-weight: normal;}
.metro-layout .box img.icon { position: absolute; left: 50%; top: 50%;  z-index: 7;}
.metro-layout .box img.big { margin-left: -64px; margin-top: -64px;}
.metro-layout .box img.cover { position: absolute; left: 0; top: 0; width: 100%; z-index: 6;}
.metro-layout .width2 { width: 32em; }
.metro-layout .width3 { width: 49em; }
.metro-layout .width4 { width: 66em; }
.metro-layout .height2 { height: 18em; }
.metro-layout .height3 { height: 28em; }
.metro-layout .height4 { height: 38em; }



::selection { background: #158ca0; color: #fff; }
::-moz-selection { background: #158ca0; color: #fff; }

/* mobile support */
@media handheld, only screen and (max-width: 1024px){
	.metro-layout .header h1 { font-size: 2.2em; margin-top: -0.5em; }
}
/* mobile support */
@media handheld, only screen and (max-width: 480px){
	.metro-layout .header { position: relative; text-align: center; }
	.metro-layout .header h1 { left: 5px; font-size: 1.5em; margin-top: -0.5em; }
	.metro-layout .header .controls { position: static; width: 100%; height: auto; margin-top: 0; }

	.metro-layout .content .items { padding: 0 5px; }
	.vertical .content .items { padding-bottom: 0; }

}

}


.portf {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}


.portf:hover {
	  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
  filter: gray; /* IE 6-9 */
	

}