body{
	margin: 0;
	padding: 0;
	font-family: 'roboto';
}
/* layout */
.grid-10-11{
	display: grid;
	grid-template-columns:   repeat(3, minmax(3em, 1fr))  1fr repeat(3, minmax(3em, 1fr)) 1fr repeat(3, minmax(3em, 1fr));
}
.grid-10-12{
	display: grid;
	grid-template-columns: 10% repeat(12, 1fr) 10%;
}
.grid-10-13{
	display: grid;
	grid-template-columns: 10%  1fr repeat(3, minmax(3em, 1fr))  1fr repeat(3, minmax(3em, 1fr)) 1fr repeat(3, minmax(3em, 1fr)) 1fr 10%;
}
.block-grid-1-15{
	grid-column: 1/15;
}
/* end layout */
/* header */
header, .nav-cont{
	display: grid;
	grid-template-columns: 10% repeat(12, 1fr) 10%;

	font-family: 'roboto';
}
header{	
/* 	background-size: cover; 
	padding-top: 1em; */
	grid-auto-rows: auto;
} 
.lang{
	grid-column: 13/15;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
}
.lang img{
	border-radius: 50%;
}
.lang figure{
	margin: 0.5em 1em;
	text-align: center;
	font-size: 0.75em;
}
/* .lang div{
	position: relative;
}
.lang div a{
	position: absolute;
	top: 50%;
	transform: translate(10%, -50%);
} */
.content{
	font-family: 'roboto';
	color: #fff;
}
.phone{
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row: 1/2;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 1em;
	/* font-size: 1.25em;
	color: #F65D07; */
	color: #18c;
}
.logo{
	grid-column-start:7;
	grid-column-end: 9;
	grid-row: 1	/2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5em;
/* 	background: red; */
	
}
.email{
	grid-column: 1/5;
	grid-row: 2/3;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: auto 1em;
	font-size: 1.25em;
	color: #F65D07;
}
.vp, .vp1, .vp_about{
	grid-column-start: 4;
	grid-column-end: 12;
	display: flex;
	justify-content: center;
}
.vp, .vp_about{
	grid-row-start: 2;
	grid-row-end: 3;
}
.vp1{
	grid-row-start: 3;
	grid-row-end: 4;
	color: #0460b7;
}
.vp a{
	text-decoration: none;
}
.vp a:visited{
	color: #1188CC;
}
.vp p{
	font-size: 2em;
	margin: 0.5em 0 0;
	font-weight: bold;
	color: #1188CC;	
}
.vp1 h1{
	font-weight: 100;
	font-size: 1em;
	margin:  0.5em 0 1.5em 0;
}
/* header */
/* навігація */
.breadcrumbs{
	padding: 0;
	margin: 0;
	grid-column-start: 1;
	grid-column-end: 15;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}
.breadcrumbs li{
	float: left;
	list-style-type:none;
	font-family: 'roboto';
	font-size: 0.8em;
	padding:0em 0.3em 0em 0.3em;
	color: #18C;
}
.breadcrumbs li:last-child{
	color: #075599;
	background: #ddd;
	border-radius: 1em;
}

.breadcrumbs a, .nav-creating-description a{
	color: #1188CC;
	text-decoration: none;
	transition: background .3s ease-in-out;
}
.breadcrumbs a:hover, .nav-creating-description a:hover{
	background: yellow;
	text-decoration: underline;
}
.nav{
	grid-column-start: 5;
	grid-column-end: 11;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.nav li{
	float: left;
	list-style-type:none;
	font-family: 'roboto';
	padding:0.3em 2em 0.5em 0;
}
.nav a{
	color: #F65D07;
	transition: color .3s linear;
}
.nav a:hover{
	color: yellow;
}
/* навігація */
/* інфраструктура */
.structure{
	display: grid;
	grid-template-columns: 10% repeat(12, 1fr) 10%;
	grid-gap: 1em;
	font-family: 'roboto';
	padding: 1em 0;
}
.str-outsourcing{
	background: url('../img/back-index.jpg');
	background-size: 100%;
}
.str-index{
	background: url('../img/back-index.jpg');
	background-size: 100%;
}
.left-shadow-window{
	grid-column-start: 3;
	grid-column-end: 8;
}
.cont-out{
	margin: 1em 1em 1em 1.5em;
	line-height: 1.5;
}
.cont-out li{
	margin-bottom: 0.5em;
}
.cont-out a{
	color: #fff;
	text-decoration: none;
	padding: 0.2em 0;
	transition: color .3s linear;
}
.cont-out a:hover{
	color: yellow;
	text-decoration:underline;
}
.right-shadow-window{
	grid-column-start: 8;
	grid-column-end: 13;
}
.right-shadow-window, .left-shadow-window{
	flex-wrap: wrap;
	justify-content: center;
	justify-content: center;
	padding: 1em 0;
	background: rgba(85, 85, 85, 0.85);
	border-radius: 0.3em;
}
.title-str a{
	color: #F65D07;
	text-decoration: none;
	padding: 0.2em 0;
	transition: color .3s linear;
}
.title-str a:hover{
	color: yellow;
	text-decoration:underline;
	
}
.right-shadow-window p, .left-shadow-window p{
	margin: 0;
	padding: 0;
}
.st1{
	font-size: 1.5em;
}
.title-str{
	text-align: center;
	padding: 0 0 .5em;
}
.title-str ul{
	list-style-type: disc;
}
.title-str span{
	font-size: 0.67em;
}
.title-str h2{
	font-weight: 100;
	font-size: 1em;
	padding: 0;
	margin: 0;
}
/* інфраструктура */
/* сайти */
.web{
	display: grid;
	grid-template-columns: 10% repeat(12, 1fr) 10%;
	padding: 0;
	margin: 0;
	background: url('../img/webbackground.jpg');
}
.new{
	grid-column-start: 2;
	grid-column-end: 14;
	display: flex;
	justify-content: center;
	padding: 2em 0 0;
	margin: 0;
}
.new-0{
	padding: 0;
}
.new a{
	color: #18C;
	background: yellow;
	transition: background .3s linear, color .3s linear; 
}
.new a:hover{
	background:black;
	color: yellow;
}
.p_new{
	font-family: 'roboto';
	font-size: 2em;
	color: #F65D07;
	padding: 0.3em;
	margin: 0;
}
.webtitle{
	font-family: 'roboto';
	font-size: 1.5em;
	
	padding: 0;
	margin: 0;

}
.webimg{
	grid-column-start: 2;
	grid-column-end: 14;
	display: flex;
	justify-content: center;
	margin: 3em 0 4em 0;
}
/* сайти */
/* футер */
footer{
	height: 6em;
	background: #555;
}
/* футер */
/* outsoursing */
.out-title{
	grid-column-start: 3;
	grid-column-end: 13;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background: rgba(85, 85, 85, .9);
	border-radius: 3px;
}
.out-title h1{
	color: #F65D07;
	font-weight: 100;	
	padding: 0.5em 1.5em;
	margin: 0;
}
.out-title p{
	color: #eee;
	padding: 0.5em 7% 1em 13%;
	line-height: 1.75em;
}
.out-text{
	display: grid;
	grid-template-columns: 10% repeat(12, 1fr) 10%;
	padding: 0;
	margin: 0;	
}
.text-outsourcing{
	font-family: 'roboto';
	font-size: 1.2em;
	line-height:1.5;
	grid-column-start: 4;
	grid-column-end: 12;
	padding: 0 2em 1em;
}
.service-back{
	grid-column: 4/12;
/* 	background: url('../img/back-service.jpg');
	background-size: 100%; */
	margin: 0.5em 0;
}
.service{
/* 	background: rgba(85, 85, 85, .7); */
	margin: 0;
	display: flex;
	justify-content: center;
}
.service ul{
	padding: 2em;
}
.service li{
	color: /* #F65D07 */#334;
	margin: 0.5em;
	list-style-type: circle;
}

/* end outsoursing */
.dark-nav{
	background: #555;
	margin:0;
}
.dark-nav a, .nav-abonent-item a{
	color: #ddf;
	transition: color .3s linear;
}
.nav-abonent-item a:hover{
	color: yellow;
}
.dark-nav li{
	margin:0 2em;
}
.nav-abonent-item{
	width: 30%;
	min-width: 12em;
}
.nav-abonent-item p{
	text-align: center;
}
.sub-back-abonent{
	background: #234;
	margin:0;
	padding: 0;
}
.back-abonent{
	background: url('../img/back-abonent.jpg') no-repeat;
	background-size: 100%;
	margin:0;
	padding: 0;
}
.nav-abonent{
	margin: 3em 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.text-abonent{
	grid-column-start: 3;
	grid-column-end: 13;
	background: rgba(85, 85, 85, .9);
	padding: 1em 4em 1em 6em;
	color:#dedede;
	font-family: 'Roboto';
}
.text-abonent p{
	line-height: 2;
}
.text-abonent h3{
	font-weight: 100;
	color: #18c;
	text-align: center;
}
.p-title{
	text-align: center;
	font-size: 1.3em;
	font-weight: 100;
	color:#F65D07;
	margin: 1.4em 0 0 0;
}
.text-abonent h1, .incident-content h1{
	font-weight: 100;
	text-align: center;
	margin: 0;
	color: #F65D07;
	font-size: 1.6em;
}
.text-abonent li{
	color: #F65D07;
}
.text-abonent li p{
	color: #dedede;
}
.img{
	text-align: center;
	transform:translateX(-950px);
	opacity: 0;
	transition: transform  .5s ease-out, opacity .5s ease-in-out;
}
.img-coming{
	transform:translateX(-0px);
	opacity: 1;
	
}
/* end abonent */
.calculator{
	width: 100%;
	display:grid;
	grid-template-columns: 10% repeat(2, 1fr) 10%;
	padding: 0;
}
.calculator input[type="number"]{
	width: 2.2em;
	height: 1.5em;
	border-radius: 0.2em;
	border: none;
	text-align: center;
	font-size: 1.25em;
	color:#18C; 
	font-weight: 600;
}
.calc-elem-name, .calc-elem-input{
	background: rgba(85, 85, 85, .85);
	display: flex;
	align-items: center;
	padding: 0 2em;
	color:#dde;
}
.calc-elem-name{
	grid-column: 2/3;
}
.calc-elem-input{
	grid-column: 3/4;
}
.calc-result, .calc-title{
	grid-column: 2/4;
	display: flex;
	background: rgba(85, 85, 85, .85);
	justify-content: center;
	align-items: center;
}
.calc-title h2{
	color:#F65D07;
	font-weight: 100;
}
.calc-result button{
	margin: 0.5em 0 1.5em;
	padding: 0.25em 1.5em;
	background: #dde;
	color: #F65D07;
	border: none;
	border-radius: 0.15em;
	font-size: 1.25em; 
}
.calc-result button:hover{
	cursor: pointer; 
}
.calc-result p{
	font-size: 1.25em;
}
.calc-result span{
	font-size: 1.25em;
	color:#F65D07;
}
.abonent-includes{
	background: #efefef;
	color: #335;
	margin-top: 2em;
	padding: 0.5em 2em;
}
/* end abonent */
/* span */
.italic{
	font-style: italic;
}
/* end span */
/* modal window */
.modal{
	display: none;
	position: fixed;
	top: 7.5%;
	left: 25%;
	width: 50%;
	background: #fff;
	z-index: 1001;
}
.overlay{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .8);
	z-index: 1000;
}
.overlay:hover{
	cursor: pointer;
}
.visible{
	display: block;
}
.modal-cover{
	display: none;
}
.modal-for-mprice-oursoursing{
	margin: 0 15%;
	font-family: 'Roboto';
}
.modal-for-mprice-oursoursing input{
	width: 100%;
	border: none;
	outline:none;
	/* background: #eee; */
	font-size: 1.5em;
	padding: 0.2em;
	margin-bottom: 1.75em;
	color:#555;
	border-bottom: solid;
	border-color: #ddd;
	border-width: thin;
}
::-webkit-input-placeholder {color:#ccc;}
::-moz-placeholder          {color:#ccc;}/* Firefox 19+ */
:-moz-placeholder           {color:#ccc;}/* Firefox 18- */
:-ms-input-placeholder      {color:#ccc;}
.modal-for-mprice-oursoursing p{
	font-size: 1.75em;
	margin-bottom: 0.3em;
	color:#F65D07;
}
.send-button{
	display: flex;
	justify-content: center;
}
.send-button button:hover{
	cursor: pointer;
	box-shadow: 5px 10px 30px grey;
	color: yellow;
}
.modal-for-mprice-oursoursing button{
	margin-bottom: 1.5em;
	padding: 0.25em 1.5em;
	background: #18c;
	font-size: 1.25em;
	border: none;
	border-radius: 3px;
	transition: color .3s linear, box-shadow .3s linear;
}
.x{
	position: absolute;
	height: 2em;
	width: 2em;
	top: -2em;
	right: -2em;
	background: black;
	border-radius: 50%;
	border: 1px #aaa solid;
	text-align: center;
}
.x:before, .x:after {
	position: absolute;
	left: 1em;
	content: ' ';
	height: 2em;
	width: 1px;
	background-color: #aaa;
	}
.x:before {
	transform: rotate(45deg);
}
.x:after {
	transform: rotate(-45deg);
}
.x:hover{
	cursor: pointer;
}
/* end modal window */
/* incident */
.incident-content{
	grid-column-start: 4;
	grid-column-end: 12;
	font-family: 'Roboto';
	padding: 0 4%;
}
.incident-content p{
	line-height: 1.75em;
	color: #335;
}
.incident-content h1{
	margin-top: 1em;
}
.incident-content h2, h4{
	font-weight: 100;
	text-align: center;
	margin: 1em 0 0.5em;
	color: #F65D07;
}
.incident-content h2{
	font-size: 1.4em;	
}
.incident-content h4{
	color: #555;}
.incident-content h3{
	font-weight: 100;
	text-align: center;
	margin: 1em 0 0.5em;
	color: #18c;
	font-size: 1.3em;
}
.incident-content table{
	width: 100%;
	color: #335;
}
.incident-content td{
	background: #efefef;
	padding: 0.5em;
}
.incident-content td:last-child{
	width: 6em;
	text-align: right;
	padding-right: 1em;
}
/* incident */
/* creating */
.nav-circle-8{
	width: 8em;
	height: 8em;
	border-radius: 50%;
	margin: 1em auto 0;
}
.nav-creating-network{
	background: url('../img/creating-menu-back.jpg');
}
.nav-creating-servers{
	background: url('../img/creating-servers-back.jpg');
}
.nav-creating-proektuvannya{
	background: url('../img/creating-servers-back.jpg');
}
.nav-creating-ipphone{
	background: url('../img/creating-servers-back.jpg');
}
.nav-creating-video{
	background: url('../img/creating-servers-back.jpg');
}
.nav-creating-backup{
	background: url('../img/creating-servers-back.jpg');
}
.nav-creating-description{
	margin: 1em auto 1.5em;
	display: flex;
	justify-content: center;
}
.nav-creating-description p{
	margin:0 0 1em;
	font-family: Roboto;
}
.nav-creating-1{
	grid-column-start: 3;
	grid-column-end: 6;
}
.nav-creating-2{
	grid-column-start: 7;
	grid-column-end: 10;
}
.nav-creating-3{
	grid-column-start: 11;
	grid-column-end: 14;
}
.in-work{
	grid-column: 3/13;
	/* height: 5em; */
	display: flex;
	justify-content: center;	
}
.in-work h1{
	font-family: Roboto;
	font-size: 2em;
	color: #F65D07;
	margin-top:0;
	font-weight: 100;
}
.in-work p{
	font-family: Roboto;
	font-size: 2em;
	color: #17c;
	margin:0 0 12em;
}
/* end creating */
.about, .about-title{
	grid-column: 3/13;
}
.vp_about h1{
	font-family: Roboto;
	font-size: 2em;
	margin: 0.5em 0 0;
	font-weight: bold;
	color: #1188CC;	
}
.vp_about a{
	text-decoration: none;
}
.about p{
	font-family: Roboto;
	line-height: 1.75em;
	margin: 0.5em 15%;
}
.about-title h2{
	font-family: Roboto;
	font-weight: 100;
	text-align: center;
	margin: 1em 0 0.5em;
	color: #F65D07;

}

/* end about */
 @font-face {
    font-family: Roboto; 
    src: url(../fonts/roboto.ttf); 
}