html, body { padding: 0; margin: 0;	outline: none;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; box-sizing: border-box;	font-family:'SF Pro Display';	font-size: 16px;	font-weight: 400; line-height:1.6em; color: #000000;  height: 100%; background:#fff; }

/* targetdigit */
.targetspec { display:block; position:fixed; background:#fff; top:0; z-index:9999; } 





/* main config */
.disnone { display:none; }
.boxsize { -webkit-box-sizing: border-box;	-moz-box-sizing: border-box; box-sizing: border-box; }
.flexdisplay { display:-webkit-flex; display: -moz-flex;  display: -ms-flex;  display: -o-flex; display: flex;  }
.mainwidth {  width:100%;  min-width: 280px; margin:0 auto; max-width: 1200px; /* check same as .wrap-inside*/  }
.transition { -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;  -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.divider { flex-grow:1; }
.shadow { -webkit-box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.3), -6px 0px 12px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.3), -6px 0px 12px 0px rgba(0, 0, 0, 0.3);
box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.3), -6px 0px 12px 0px rgba(0, 0, 0, 0.3); }
.flex-wrap { flex-wrap:wrap; }


/* textzone */
.textzone {  }



h1 { font-size:1.6em; color:#000; font-weight:600; margin:0 0 30px 0; }



/* block css */
.wrap {  min-height: 100%;  min-width: 280px; max-width:100%;  background:#fff;  margin: 0 auto; align-items:flex-start;  flex-direction:column;  }


/* переназначаем центрирование внутри основного wrap если хотим сделать фиксированную единую ширину сайта */
/* .wrap { align-items:center; } */
/* в этом случае включаем в состав кода после wrap дополнительную обертку */
/* .wrap-inside { min-width:200px; max-width:700px; width:100%; background:#fff; flex-grow:1; flex-direction:column; } */

.wrap { align-items:center; } 
.wrap-inside { min-width:200px; max-width:1000px; /* check same as .mainwidth */  width:100%; background:#fff; flex-grow:1; flex-direction:column; } 




/* *****************************************************************************************  */
/* *****************************************************************************************  */
/* modal group start modal group start modal group start modal group start modal group start  */ 







/*  darkoverlay darkoverlay darkoverlay   */
#overlay {	z-index: 3000; position: fixed; background-color: #000; opacity: 0.8; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; display:none; } 


/* overlay leftmenu overlay leftmenu */
.leftmenu-modal { width:400px; z-index: 4000; position: fixed; top:0; height:100%; background:#fff; flex-direction:column;  overflow-y: auto;  }
.leftmenu-modal { left:-420px; display:none; }
.leftmenu-modal-widthfull { width:100%; }
.close-leftmenu-modal { text-align:center; padding:20px 0; border-bottom:1px #e0e0e0 solid; color:#bbb; width:100%; min-width:100%;justify-content:center; line-height:1em; font-weight:600; text-decoration:none; }
.close-leftmenu-modal:hover { color:#000; }

.leftmenu-modal-block { flex-direction:column; padding:0 0 30px 0; }
.leftmenu-modal-block-link { padding:20px 30px; border-bottom:1px #c4c4c4 dotted; font-size:1.2em; font-weight:500; }
.leftmenu-modal-block-link:hover { background:rgba(0,0,0,0.1); }

.leftmenu-modal-contact { padding:20px 30px 50px 30px; }
.leftmenu-modal-contact span { display:block; font-size:1.4em; font-weight:600; color:#4c4c4c; line-height:1.4em; }
.leftmenu-modal-contact span:first-child { margin:0 0 10px 0; }


/* modal group finish modal group finishmodal group finishmodal group finishmodal group finish */ 
/* *****************************************************************************************  */
/* *****************************************************************************************  */









/* menusand-fixed */
.menusand-fixed { margin:0 0 0 0px; padding:0px 20px; }
.menusand-main { margin:0 0 0 0px; display:none; padding:0px 20px; }

.menusand { align-items:center;  cursor:pointer;  }
.menusand-div { display: block; width:21px; min-width:21px;	cursor: pointer;   }
.menusand-div .divide { display:block; height:3px;	margin-bottom:5px; background:#fff; }
.menusand-div .divide:last-child { margin-bottom:0px; }
.menusand:hover { background:#000; }
.menusand-text { color:#fff; font-size:0.8em; margin:3px 0 0 0; font-weight:600; }






/* topper */
.topper { flex:0 0 auto; width:100%; min-width:100%; background:rgba(0,0,0,0.7); padding:0 20px;  position:fixed; top:0; left:0; width:100%; z-index:5000; }
.topper-dark { background:rgba(0,0,0,1); }

.topper-inside {  padding:0; align-items:center;  }

.topper-logo { align-items:center; padding:20px 0; }

.topper-logo-short { width:30px; min-width:30px; }
.topper-logo-short img { display:block; width:100%; }

.topper-logo-long { width:140px; min-width:140px; margin:0 0 0 5px; }
.topper-logo-long img { display:block; width:100%; }



.topper-link { padding:10px 15px; text-align:center; }
.topper-link span { color:#fff; border-bottom:1px #fff dotted; font-size:0.9em; }
.topper-link-light span { color:#7dcfdd; border-bottom:1px #7dcfdd dotted; font-weight:600; }
.topper-link:hover span { color:#7dcfdd; border-bottom:0; }
.topper-link:last-child { margin:0; padding:15px 0px 15px 10px; }


.topper-call { color:#fff; font-size:1.2em; font-weight:600; margin:0 0 0 30px; }


/* topshapka */
.topshapka { flex:0 0 auto; width:100%; min-width:100%; flex-direction:column; justify-content:flex-end; }
.topshapka { padding:0px 0px;  background:#0a0e15 url("../images/maintopic-03.jpg") no-repeat top center;  height:320px;   }

.toplogorow {  padding:0px 20px;  justify-content:flex-end; }
.toplogorow-inside { align-items:flex-end; justify-content:flex-end; padding-bottom:70px; }

.toplogorow-anons { color:#fff; font-size:1.6em; font-weight:400; line-height:1.8em; text-align:right; letter-spacing:0.05em; }
.toplogorow-anons span { color:#7dcfdd; font-size:1.22em; font-weight:700; letter-spacing:0.055em; }

/* topshapka-page */
.topshapka-page { background:#0a0e15 url("../images/maintopic-page.jpg") no-repeat top center;  height:auto; }

.toppage {  padding:100px 0px 0 0;  width:100%; min-width:100%; }
.toppage-inside { padding-bottom:0px; flex-direction:column; }


.toppage-head { color:#fff; font-size:1.6em; font-weight:500; line-height:1.4em;  letter-spacing:0.05em; padding:0 0 20px 0; }
.toppage-head-portfolio { color:#fff; font-size:1.7em; font-weight:700; line-height:1.4em;  letter-spacing:0.05em; padding:0 0 0 0; text-align:center; }
.toppage-head-subportfolio { color:#fff; font-size:1.2em; font-weight:500; line-height:1.4em;  padding:10px 0 20px 0; text-align:center; }



.toppage-portfolio { padding:0px 0px; display:grid; gap:20px;	grid-template-columns: 1fr 0.3fr; grid-template-rows:250px; }


.toppage-portfolio-wide { background:#eeeeee; padding:10px 10px 0 10px; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;  border-radius: 5px 5px 0 0;  behavior: url(../scripts/border-radius.htc); flex-direction:column; gap:7px; }
.toppage-portfolio-url-field { background:#fff; padding:5px 10px; color:#7f7f7f; }
.toppage-portfolio-wide-asfasad { background:url('../images/asfasad-screen-top.jpg'); background-size:cover; flex:1 0 auto; }


.toppage-portfolio-mobile { background:#eeeeee; padding:10px 10px 0 10px; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;  border-radius: 5px 5px 0 0;  behavior: url(../scripts/border-radius.htc); flex-direction:column; gap:7px; }
.toppage-portfolio-line { padding:5px 0; }
.toppage-portfolio-line > div { width:50%; margin:0 auto; background:#cdcdcd; -moz-border-radius: 3px; -webkit-border-radius: 3px;  border-radius: 3px;  behavior: url(../scripts/border-radius.htc); padding:3px; }

.toppage-portfolio-line > div { -webkit-box-shadow: 0px 0px 3px 1px rgba(34, 60, 80, 0.5) inset; -moz-box-shadow: 0px 0px 3px 1px rgba(34, 60, 80, 0.5) inset;
box-shadow: 0px 0px 3px 1px rgba(34, 60, 80, 0.5) inset; }

.toppage-portfolio-short-asfasad { background:url('../images/asfasad-mobile-top.jpg'); background-size:cover; flex:1 0 auto; }



/* porturl */
.porturl { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; background:#eee; }
.porturl-inside { padding:30px 0px; justify-content:center;  }

.porturl-head { font-size:1.5em; font-weight:700; line-height:1.4em; }
.porturl-link span { color:#1c54a2; border-bottom:2px #1c54a2 dotted; }
.porturl-link:hover span { color:#1d66cb; border-bottom:0px; }


/* portworks */
.portworks { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; background:#fff; }
.portworks-inside { padding:30px 0px;  }

.portworks-metro { display:grid; gap:10px;	grid-template-columns: 1fr 1.1fr; }
.portworks-metro-done { }
.portworks-metro-head { font-size:1.6em; line-height:1.4em; font-weight:700; color:#1c54a2; margin:0 0 10px 0; }

.portworks-metro-done ul  { list-style-position:inside; padding:0 0 0 0; }
.portworks-metro-done ul li { list-style-type: disc; margin:0 0 5px 0; line-height:1.4em; }
.portworks-metro-done ul li span { font-weight:500; }
.portworks-metro-done ul li strong { font-weight:600; }

.portworks-metro-about { line-height:1.6em; border-left:1px #eee solid; padding:0 0 0 20px; }



/* widescreen */
.widescreen { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; background:#7dcfdd; }
.widescreen-inside { padding:30px 0px; }
.widescreen-pic {  background:#eeeeee; padding:10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px;  behavior: url(../scripts/border-radius.htc); }
.widescreen-pic img { display:block; width:100%; }




/* wantjob */
.wantjob { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; background:#eee; }
.wantjob-inside { padding:30px 0px;  }





/* metroservice */
.metroservice { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; background:#dae2f0; }
.metroservice-inside { padding:30px 0px; display:grid; 	gap:20px;	grid-template-columns: repeat(3, 1fr); }


.metroservice-block { padding:30px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  border-radius: 10px;  behavior: url(../scripts/border-radius.htc); }
.metroservice-block { background:#212121; }

.msblock-head { margin:0 0 10px 0;  }
.msblock-head span { color:#fff; font-size:1.2em; font-weight:600; line-height:1.4em; border-bottom:1px #fff dotted; }

.msblock-sub { color:#fff; font-size:1.0em; font-weight:normal; line-height:1.4em; }

.ms-www { background:url('../images/metroservice-01.jpg') bottom right; }
.ms-design { background:url('../images/metroservice-02.jpg') bottom; }
.ms-seo { background:url('../images/metroservice-03.jpg') bottom left; }


.metroservice-block:hover .msblock-head span { color:#7dcfdd; border-bottom:0px; }
.metroservice-block:hover .msblock-sub { color:#bfdce1; }







.preservice { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; }
.preservice-inside { padding:30px 0px 0px 0px; 	gap:20px; display:grid; grid-template-columns: repeat(2, 1fr); }
.preservice-block { background:url('../images/bluefon.jpg'); background-size:cover; padding:20px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  border-radius: 10px;  behavior: url(../scripts/border-radius.htc); }
.preservice-block:hover { background:url('../images/bluefonhover.jpg'); background-size:cover; }


.preservice-block-head { font-size:1.8em; font-weight:600; line-height:1.4em; margin:0 0 5px 0; color:#fff; }
.preservice-block-text { color:#fff; line-height:1.4em; margin:0 0 5px 0; font-size:0.9em; }
.preservice-block-term { color:#fff; font-weight:700; }
.preservice-block-price { font-size:1.4em; font-weight:700; padding:13px 0 0 0; margin:13px 0 0 0; border-top:2px #bdf4fd dotted; color:#fff; }
















/* mainbody */
.mainbody { flex:1 0 auto; width:100%; min-width:100%; padding:0px 20px; }
.mainbody-inside { padding:30px 0px;  }

.mainbody p { margin:15px 0 0 0; }
.mainbody p:first-child { margin:0 0 0 0; }
.mainbody p strong { font-weight:700; }

.mainbody ul  { list-style-position:inside; padding:10px 0 0 0; }
.mainbody ul li { list-style-type: disc; margin:0 0 5px 0; line-height:1.4em; }
.mainbody ul li span { font-weight:500; }
.mainbody ul li strong { font-weight:600; }



/* portlay */
.portlay { flex:0 0 auto; width:100%; min-width:100%;  padding:0 20px; background:#ebeff4; }
.portlay-inside { padding:30px 0; }
.portlay-metro { display:grid; gap:20px 20px; grid-template-columns: repeat(4, 1fr); }
.portlay-metro-block { -webkit-border-radius: 10px;  border-radius: 10px;  behavior: url(../scripts/border-radius.htc); }
.portlay-metro-block { position:relative;  }
.portlay-metro-head { display:none;  }
.portlay-metro-head span { font-size:1.4em; font-weight:600; text-align:center; line-height:1.4em; }
.portlay-metro-pic {  }
.portlay-metro-pic img { display:block; width:100%; -webkit-border-radius: 10px;  border-radius: 10px;  behavior: url(../scripts/border-radius.htc);  }

.portlay-metro-block:hover .portlay-metro-head { display:-webkit-flex; display: -moz-flex;  display: -ms-flex;  display: -o-flex; display: flex; position:absolute; left:0; top:0; background:url('../images/metro-portlay-fon.jpg'); color:#fff; padding:20px; -webkit-border-radius: 10px;  border-radius: 10px;  behavior: url(../scripts/border-radius.htc);  width:100%; height:100%; }
.portlay-metro-block:hover .portlay-metro-head { align-items:center; justify-content:center; }



/* servicepage */
.servicepage { flex:1 0 auto; width:100%; min-width:100%; background:#fff; padding:0 20px; }
.servicepage-inside { padding:30px 0; }




/* библиотека дизайнера  */
/* servicepage-metro-lib */
.servicepage-metro-lib { display:grid; gap:30px; grid-template-columns: 230px 1fr; }
.servicepage-libmenu {  }
.servicepage-libmenu-nav { flex-direction:column; }
.servicepage-libmenu-navhead { font-size:1.1em; font-weight:700; border-bottom:2px #4c4c4c solid; margin:0 0 5px 0; color:#4c4c4c; }
.servicepage-libmenu-link { padding:5px 0 5px 10px; font-weight:600; }
.servicepage-libmenu-link span { border-bottom:1px #000 dotted; }
.servicepage-libmenu-link:hover { background:rgba(0,0,0,0.05); }
.servicepage-libmenu-link:hover span { border-bottom:0; }

.servicepage-libcenter { flex-direction:column; }

.liboutput { flex-direction:column; }
.liboutput-block { padding:10px; border:1px #efefef solid; margin:0 0 15px 0; }
.liboutput-block:last-child { margin:0; }
.liboutput-block:hover { border:1px #c9c9c9 solid; }









/* intro */
.intro { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; }
.intro-inside { padding:30px 0px; flex-direction:column; }


.intro-head { margin:0px 0 20px 0; font-weight:700; font-size:1.6em; }
.intro-divider { border-bottom:1px #000 solid; margin:0 0 20px 0; }

.intro-inside p { margin:0 0 10px 0; line-height:1.4em; }
.intro-inside p:last-child { margin:0; }


.intro-inside p.preblock { font-weight:700; color:#1e7a8a; }






/* footer */
.footer { flex:0 0 auto; width:100%; min-width:100%; background:url('../images/bottom-fon.jpg') center; background-size:cover; padding:0 20px; }
.footer-inside { justify-content:center; padding:30px 0; flex-direction:column; }

.footer-main {  }
.footer-main-left {  }
.footer-main-copy { color:#fff; line-height:1.4em; font-size:0.9em; }
.footer-main-policy {  }
.footer-main-policy a { border-bottom:1px #fff dotted; color:#fff; font-size:0.8em; line-height:1.4em; }
.footer-main-policy a:hover { border-bottom:0px; }

.footer-main-right {  }
.footer-call { color:#fff; text-align:right; line-height:1.4em; font-size:1.4em; font-weight:600; }
.footer-mail { color:#fff; text-align:right; line-height:1.4em; font-size:0.8em; }


.footer-sub { color:#989898; text-align:center; font-size:0.7em; line-height:1.4em; margin:20px 0 0 0; }


/*  display 1300 display 1300 display 1300 display 1300 display 1300 display 1300 display 1300    */
@media (max-width: 1300px) {
	


}



/*  display 1200 display 1200 display 1200 display 1200 display 1200 display 1200 display 1200    */
@media (max-width: 1200px) {
	

	.portlay-metro { display:grid; gap:20px 20px; grid-template-columns: repeat(3, 1fr); }
	
}





/*  display 1150 display 1150 display 1150 display 1150 display 1150    */
@media (max-width: 1150px) {
	
	.dis1150 { display: block; }
	.disnone1150 { display: none; }



}






/*  display 1100 display 1100 display 1100 display 1100 display 1100    */
@media (max-width: 1100px) {

	.dis1100 { display: block; }
	.disnone1100 { display: none; }
	


	
}





/*  display 1000 display 1000 display 1000 display 1000    */
@media (max-width: 1000px) {

	.dis1000 { display: block; }
	.disnone1000 { display: none; }


	.metroservice-inside { padding:30px 0px; display:grid; 	gap:20px;	grid-template-columns: repeat(2, 1fr); }

	.toplogorow-anons { font-size:1.4em; }
	.topshapka { padding:0px 0px;  background:#0a0e15 url("../images/maintopic-02.jpg") no-repeat top left;  height:320px;   }
	.topshapka-page { background:#0a0e15 url("../images/maintopic-page.jpg") no-repeat top center;  height:160px; }
	.toppage-head { color:#fff; font-size:1.4em; font-weight:500; line-height:1.4em;  letter-spacing:0.05em; }

	.metroservice-inside { gap:10px; }
	.preservice-inside { gap:10px; }

}







/*  display 900 display 900 display 900 display 900 display 900    */
@media (max-width: 900px) {

	.dis900 { display: block; }
	.disnone900 { display: none; }
	.flex900 {  display:-webkit-flex; display: -moz-flex;  display: -ms-flex;  display: -o-flex; display: flex; }



	.topper	{ padding:0 0 0 20px; }

}





/*  display 800 display 800 display 800 display 800 display 800    */
@media (max-width: 800px) {

	.dis800 { display: block; }
	.disnone800 { display: none; }



	.portlay-metro { display:grid; gap:20px; grid-template-columns: repeat(2, 1fr); }



}



/*  display 700 display 700 display 700 display 700 display 700    */
@media (max-width: 700px) {

	.dis700 { display: block; }
	.disnone700 { display: none; }


	.metroservice-inside { padding:30px 0px; display:grid; 	gap:10px;	grid-template-columns: repeat(1, 1fr); }
	.preservice-inside { grid-template-columns: repeat(1, 1fr);

	.toplogorow-inside { padding-bottom:40px; }
	.toplogorow-anons {  font-size:1.2em; }


	
}










/*  display 600 display 600 display 600 display 600 display 600 display 600     */
@media (max-width: 600px) {

	.dis600 { display: block; }
	.disnone600 { display: none; }


	.portlay-metro-head span { font-size:1.2em; font-weight:600; text-align:center; line-height:1.4em; }
	.portlay-metro { display:grid; gap:10px; grid-template-columns: repeat(2, 1fr); }
	.toppage-head { color:#fff; font-size:1.2em; font-weight:500; line-height:1.4em;  letter-spacing:0.05em; }
	

	/* resize 600 width padding 20 --> 10 */
	.metroservice { padding:0 10px; }
	.portlay { padding:0 10px; }
	.topper	{ padding:0 0 0 10px; }
	.toppage {  padding:0px 10px; }
	.preservice {  padding:0px 10px; }
	
}





/*  display 500 display 500 display 500 display 500 display 500    */
@media (max-width: 500px) {


	.dis500 { display: block; }
	.disnone500 { display: none; }


	.portlay-metro-head span { font-size:1.0em; font-weight:600; text-align:center; line-height:1.4em; }
	.topper-call { color:#fff; font-size:1.0em; font-weight:600; margin:0 0 0 30px; }	

}	



/*  display 400 display 400 display 400 display 400     */
@media (max-width: 400px) {

	.dis400 { display: block; }
	.disnone400 { display: none; }


.toplogorow-inside { padding-bottom:30px; }
.toplogorow-anons {  font-size:1.0em; }
.toplogorow-anons span { font-size:1.2em; }

}