@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
margin:0;
padding:0; 
}
body{
background-color:#000000;
}
li{
list-style-type:none; /* Убираем маркеры */
}
img{
border: none;
} 
select, input, textarea {
outline:none; 
resize:none;
}
/*//////////*/
/*Картинка На любой фон*/  
.background{
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
width:100%;	
}
/*Верхняя плашка с текстом и картинкой*/
.img-background{
	text-align: center;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	width:100%;
	height: auto;
    display: block;
	padding:10% 0 11%;
	margin-bottom:30px;	/*Отступ с низу*/	
	}	
/*Распорки-strut*/
#strut20{ margin:20px 0 20px;} /*.strut*/
#strut40{ padding:40px 0;
}
#strut100{ padding:100px 0;
}
@media screen and (max-width: 600px) {
#strut100{ padding:50px 0;}
}
/*////////////////////////////////////*/
/*////////////////////////////////////*/
/*////////////////////////////////////*/
/*Сетка картинок на галереях */
.img-centr{
	margin:0 11%;
	}		 
.block-img-centr{
	display: block;
	margin:0 11%;  
	}
.block-img-centr img{		                
	width:100%;
	height:auto;
	vertical-align: top;
	margin-bottom:20px;
	}
	#strut-margin-5{ 
	margin:5% 0;
	display:inline-block;
	width:100%;
	height:auto;
	}				
@media screen and (max-width: 600px) {
	.block-img-centr{ 
	text-align: center;
	}	
}
@media screen and (max-width: 430px) {	
	.img-background{padding:20% 0 19%;}	
	}
/*////////////////////////////////////*/
.block5	{	
}
.block5 a{padding:10px;}
@media screen and (max-width: 900px) {
	.block5 a{
		padding:5px;
	}
}
@media screen and (max-width: 430px) {
	.block5 a{
		padding:5px 5px;
	}
}
.block5 img{
	-webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
.block5 img:hover{     	
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(100%); 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
}
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*ТИПОГРАФМКА*/
.text-centr{ 
	margin:0 19%; 
	text-align: left; /*Левая выключка*/
	}	
@media screen and (max-width: 768px) {	
  .text-centr{
	margin:0 14%;
	}
  }
@media screen and (min-width: 1200px) {
.text-centr{
	margin:0 27%;
	}
}
/*Расстояние между блоками - Картинки с подъписью*/
.img-identi{ 
text-align:center;
}
.img-identi p{  /*li > */
	margin:0 0px; /*Сузит ширину колонки margin:0 100px;*/
    text-align: left; /*Левая выключка*/
	padding:10px 0; /*верхнее расстояние между параграфами*/
	}
.img-identi li{ 
margin:150px 0;/*расстояние между блоками*/
}
#img-podpis{ 
text-align:center;
margin-top:10px;
margin-bottom:10px;
font-size:1em; /*16 pt*/
line-height:1.25em; /*20 pt*/
font-family:myPTSerif-Italic;
color: #666;
}
#img-podpis-a{ 
margin-top:20px;
margin-bottom:10px;
font-size:1em; /*16 pt*/
line-height:1.25em; /*20 pt*/
font-family:myPTSerif-Italic;
}
/*Кнопка Курсивом*/
#send-bttn { 
	font-size:1em; /*16 pt*/
	line-height:1.25em; /*20 pt*/
	font-family:myPTSerif-Italic;
    color: #666;  
    display:block;
	text-align:center;
   /* cursor:pointer;*/
    padding:13px 15px 14px 15px;
	letter-spacing: 2px;
    border: 1px solid #666; 
    width:180px;
	height:50px;
	outline: none;
	/*background:#888;*/
}
#send-bttn:hover {
    /*background: #333;*/
	border-color: #fff;
	color: #fff;
}
	
.img-identi img{ 
width:100%;
height:auto;
max-width:874px;
}
/*Клиент/Задача/Решение*/
.strut-task{ 
  margin:50px 0 70px;
}
.strut-task p{ 
  margin-bottom:10px;
  font-size:1em; /*16 pt*/
  line-height:1.25em; /*20 pt*/
  color:#666;
}
#strochka-centr{ text-align:center;}
@media screen and (max-width: 430px) {	
	#strochka-centr{ text-align:left;}
	.strut-task{ margin:50px 0 50px;}
	#img-podpis{margin-top:5px; font-size:0.8em;  }
	.img-podpis-a{margin-top:10px; }
	.img-identi li{ margin:30px 0;}	/*верхнее и нижнее расстояние между блоками*/
	}
/*///////////////////////////////////*/
/* Подпись под картинками (Логотипы) */
	#imagelightbox-caption
	{ font-size:1em; /*16 pt*/
	  line-height:1.35em; /*20 pt*/	
	  text-align: center;
	  color: #fff;
	  background-color: #666;
	  position: fixed;
	  z-index: 10001;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  padding: 1.825em;
	  opacity: .7; 
	}	
	#imagelightbox-caption		
	{
		-webkit-animation: fade-in .25s linear;
		animation: fade-in .25s linear;
	}
		@-webkit-keyframes fade-in
		{
			from	{ opacity: 0; }
			to		{ opacity: .7; }
		}
		@keyframes fade-in
		{
			from	{ opacity: 0; }
			to		{ opacity: .7; }
		}
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/* Форма обратной связи на светлом */
#inline {
font-family:myOpensans;
src: url('../fonts/Futura-Futuris-Medium.ttf') format('truetype');
display: block; 
margin:0 auto; 
max-width:900px;
min-width:270px;
/*height: 500px; */
/*background:#ddd;*/
/*opacity:0.3;*/
padding: 100px 0;
}
#inline h2{ 
letter-spacing: 2px;
text-align:center;
margin: 40px auto;
text-transform: uppercase;
color:#CCC;
}
.centr {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 250px));
grid-column-gap: 20px; /*растояние между ячейками горизонтальное*/
grid-row-gap: 20px; /*растояние между ячейками вертикальное*/
justify-content: center;
}

.txt {	
   display:inline-block;  
   color:#666;
   width:250px;
   height:50px;
   border:1px solid #CCC;
   padding:10px 20px;
   font-size:18px!important;
   line-height:1.4em;  
}
.txtarea {
   display:block;
   color:#666;
   width:790px;
   height:200px;
   margin: 20px auto;
   border:1px solid #CCC;
   padding:10px 20px;
   font-size:18px!important;
   line-height:1.4em;   
}
.txt:focus, .txtarea:focus {
   border-style:solid;
   border-color:#888;
   color:#000;
}
input.error, textarea.error {
    border-color:#888;
    border-style:solid;
    background:# 900;
    color:#A35959;
}
input.error:focus, textarea.error:focus {
    border-color:#888;
    color:#000;
	/*background:# 000;*/
}
/*Кнопка*/
#send { 
    text-transform: uppercase;
    color:#000;
    display:block;
	margin: 40px auto;
	text-align:center;
    cursor:pointer;
    padding:13px 15px 14px 15px;
	font-weight: 500;
    font-size:1.1em;
	letter-spacing: 2px;
    border: 2px solid #333; 
    width:180px;
	height:50px;
	outline: none;
	/*background:#888;*/
}
#send:hover {
    background: #fff;
	border-color: #666;
	color: #666;
}
#send:disabled {
   /* background:#888;*/
	opacity: 0.5;
	pointer-events: none;
}


#send{
	-webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
#send:hover{     	
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(100%); 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
}
@media screen and (max-width: 800px) {	
  #inline { width:300px; padding: 50px 0;
  }
  .txtarea {
   width:290px; 
   padding:12px 15px; 
}
.txt {	
   width:290px;
   padding:12px 15px; 
}
#send {    
    padding:15px 15px 15px 15px;
	width:290px;	
}
.centr {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 290px));
grid-column-gap: 0px; /*растояние между ячейками горизонтальное*/
grid-row-gap: 20px; /*растояние между ячейками вертикальное*/
}
}
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*Видео*/
.video { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow:hidden; 
} 
.video iframe, .video object, .video embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%; 
}
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*///////////////////////////////////*/
/*Авторство. Футор на внутрених страницах*/	
.captions {
	margin:10% 19% 0 19%;
    color: #666;
    text-align: center;
	padding-bottom:40px;
}
.captions h4 {
    margin: 0 50px;
    font-size: 15px; /* 1.2em;*/
	padding-bottom:20px;
	line-height:1.5em;
    font-weight: 200;
    text-align: left;
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
}
.captions span {
    font-weight: 600;
	line-height:2.0em;
}
@media screen and (max-width: 800px) {
	.captions h4 {margin:0 auto;; display:block;}
	.captions {margin:15% 27% 0 27%; text-align:left; display:inline-block;}
}