*{
    padding: 0;
    margin: 0;
}

html{
    height: 100%;
    padding: 0 2%;
}

body{
    height: 100%;
    background-color: #AFA069;
    background-image: url(images/body-texture-bg.jpg);
    background-attachment: fixed;
    
    font-family: 'Ubuntu Condensed', Trebuchet MS, Verdana, sans-serif;
    font-size: 16px;
    
    -moz-box-sizing: border-box;    /*Firefox*/
    -webkit-box-sizing: border-box; /*Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0*/
    box-sizing: border-box; /*По спецификации*/
    //padding-left: 20px;
    //padding-right: 20px;
    
    min-width: 1240px;
    max-width: 1580px;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6{
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    //padding-bottom: 0.8em;
    //padding-top: 0.8em;
    width: 50%;
    margin: 0.8em auto; 
}

a{
    color: #00EEEE;
    
    transition: color 0.5s;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -o-transition: color 0.5s;
}

a:hover{
    color: #12FF12;
}

li{
    list-style-position: inside;
}

#wrapper{
   // border: 3px solid green;
    
    -moz-box-sizing: border-box;    /*Firefox*/
    -webkit-box-sizing: border-box; /*Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0*/
    box-sizing: border-box; /*По спецификации*/  
    //max-width: 1580px;  /*Safari не понимает. Как вариант, можно завернуть wrapper в обычный блок и задать min-и max-width для него, а wrapper'у проставить width: 100%*/
    //min-width: 1240px;   /*Safari не понимает. Это собственно нормальное поведение, скорей всего, ведь для таблиц не работают атрибцты min- max- */
    /*min- и max-width лучше выставим с помощью метода "распорки" через ячейку #main с table-cell*/
    margin: 0px auto;
    //min-height: 100%;   /* В firefox и safari wrapper не растягивается на всю высоту родителя, только по содержимому растягивается. В принципе, это обяснимо ведь для table нет атрибутов min- max- -height - width*/
   // height: 100%; /*Работает во всех браузерах, поэтому используем это правило вместо min-height. Height для таблицы работает как min-height (по правилам таблиц table)*/
  //  height: 1px;
  //  width: 100%;
    
   display: table;
   //display: block;
   height: 100%; 
  //  width: 100%;
  table-layout: fixed;
    position: relative;
    padding: 310px 0px 160px 0px;
   /* padding: 310px 250px 60px 300px; */
   
   width: 100%;
   //overflow: hidden;
}

#wraphgper:before{
    content: "table-cell";
    background-color: silver;
    display: table-cell;
    //width: 1400px;
    //height: 0;
    
}

#header{
  //  border: 1px solid yellow;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    display: block;
    height: 300px;  /* min-height: 300px; */
    position: absolute;
    top: 5px; 
    left: 0;
    width: 100%;
    
    border: 3px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
 //   behavior: url(PIE.htc);
 
    background-color: #52A2AD;
    background-image:  url(images/header-bg-right.png), url(images/header-bg-left.jpg);
    background-repeat: no-repeat;
    background-position: right top, left top;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto 100%, auto 100%;  /* background-size: auto 100%, auto 100%; */
 /*   background: url(images/sis/header-bg-right.png) right top no-repeat, #52A2AD url(images/sis/header-bg-left.jpg) left top no-repeat; */
    -pie-background: url(images/sis/header-bg-right.png) right top no-repeat, url(images/sis/header-bg-left.jpg) left top no-repeat, #52A2AD; /* IE6-IE9 */
    behavior(PIE.htc);
    background-origin: padding-box, padding-box; /*По умолчанию padding-box*/
    
    box-shadow: -8px 0px 15px 0px #696969, 8px 0px 15px 0px #696969;
}

#header::after{
    content: "after-header";
   // background: silver;
    display: block;
    clear: both;
    height: 0px;
    display: none;
}

#main{
    //border: 1px solid yellow;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    //display: table-cell;
    display: inline-table;
    //width: 1400px;
    width: 100%;
    font-size: 15px;
    color: #fff;
    background-color: transparent; /*#363636; */
    height: 100%;
    min-height: 100%;
  
    padding-bottom: 0px;
    padding-top:  0px;
    position: relative;
}

/*Прием "Распорка" для эмуляции min-width для #wrapper'а (table)'*/ /*С распоркой колонки перестают быть одинаковой высоты!!!*/
#maisn:before{
    content: "rasporka";
    display:  block;
    width: 1240px;
    height: 0;
    background-color: silver;
}

/*В Firefox в main обязательно должен быть хотя бы одна колонка с inline-table - только в этом случае остальные колонки с inline-block растянуться на 100% высоты main*/
#main:after{
    content: "";
    background-color: silver;
    display: inline-table;
    height: 100%;
    width: 0;
    //min-height: 100%;
    vertical-align: middle;
    
    float: left;
    margin-left: -100%;
}

#center{  
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    border: 3px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #363636;
    
    display: inline-block; /* inline-block тоже подходит*/
    height: 100%;   /*Для block в IE не становится больше 100%*/
    min-height: 100%; /*Для block в IE  не становится больше 100%*/ 
    vertical-align: top;
    
    margin: 0 7px 0 7px;
    
    text-align: justify;
    font-family: Tahoma, Trebucher MS, Arial;
    padding: 15px 10px;
}

#center:after{
    content: "rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka rasporka ";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

#left-bar{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    //border: 3px solid #000;   /* В Weblit из-за наличия этого border'а и возникает зазор между inline-block-колонкой (left, right, CONTENT) и и их родителем #main. Соответтсвенно, колонки станут одинаковой высоты только если
                                    убрать эти border'ы. Тогда их нужно будет как-то сымитировать - быть может с помощью after ? */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #363636;
    
    display: inline-block;
    height: 100%;
    min-height: 100%;
    vertical-align: middle;
   
   width: 300px;
   float: left;
   margin-left: -100%;
   //position: relative;
   //left: 250px;
   
   position: relative;
   //padding: 15px 5px;   /* Если есть вертикальные padding'и, то возникают эти самые отступы под колонками, если эти paddin'и убрать, то все отлично*/
   padding: 0px 5px;
   
   box-shadow: -8px 0px 15px 0px #696969;

}

#left-bar>*, #right-bar>*{
    position: relative; /* Обязательно нужно задать position не static, чтобы z-index сработало*/
    z-index: 1;
}

/* Границы левого блока сделам с помошью псевдоэлемента after, растянутого на всю ширину и высоту блока left-bar. Также этот слой нужно расположить выше по оси z относительно #left-bar и ниже, чем любой другой элемент
этого блока, чтобы after не перекрывал другие элементы левой колонки*/
#left-bar:after, #right-bar:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    border: 3px solid #000; 
    background-color: transparent;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#right-bar{ 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
   // border: 3px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #363636;
    
    display: inline-block;
    height: 100%; /*Для всех кроме IE*/
    vertical-align: middle;
    
    width: 250px;
    float: left;
    margin-left: -250px;
    margin-right: 0px;
    position: relative;
    padding: 0px 5px;
    
    box-shadow: 8px 0 15px 0 #696969;
}
#risght:after{
    content: "inline-block";
    background-color: silver;

}

/*Так как мы теперь не можем назначать верхний и нижний паддинги колонкам-inline-block'ам
(это вызывает отступ в webkit под колонкой), то мы добавим margin-top и margin-bottom
для первого и последнего элементов в этих колонках*/
#left-bar>*:first-child, #right-bar>*:first-child{
    margin-top: 15px;
}

#left-bar>*:last-child, #right-bar>*:last-child{
    margin-bottom: 15px;
}

#content{
    //border:  2px dashed white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    //border: 3px solid red;
    
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%; /*Везде работает, кроме IE - для block*/
    min-height: 100%;  /*Везде работает, кроме Webkit - для block*/

    //position: relative;
  
    float: left;
    padding: 0 250px 0 300px;
    //margin-right: -250px;
}

#footer {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    border: 3px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #363636;
    
    display: block; 
    position:  absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 150px;
    
    box-shadow: -8px 0px 15px 0 #696969, 8px 0px 15px 0 #696969;
    
    text-align: center; /*Чтобы inline-block-содержимое центрировалось посередине футера*/
    color: #fff;
}

/*CSS-хак для IE9 и IE10*/
/*@media screen and (min-width:0\0) {
    
    #center, #right-bar, #content, #left-bar{
        display: inline-table;
    }

}
/*CSS-хак для IE8*/
/*@media \0screen {
    #content, #center, #right-bar, #left-bar{
        display: inline-table;
    }
    
}*/

/*-----------------------Элементы в header-----------------------*/

ul.nav{
    //border: 1px dotted yellow;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    list-style-position: inside;
    list-style-type: none;

    display: inline-block;    
    padding: 5px 10px;
    
    position: absolute;
    bottom: 5px;
    left: 2%;
    z-index: 15;
    margin-right: 200px; /*При уменьшении окна чтобы меню не наезжало на правую фоновую картинку и блок с логотипом и контактами*/
    
    //background-color: rgba(0,0,0,0.3);
}

ul.nav:after{
    content: "";
    display: block;
    clear:  both;
    
}

ul.nav>li{
  //  border: 3px solid black;
    
    display: block;
    float: left;
    margin-right: 7px;
    margin-bottom: 5px;
    
    position: relative;
}

ul.nav>li:last-child {
    margin-right: 0;
}

ul.nav>li>a{
  //  border: 1px solid black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url(PIE.htc);
    
    background-color: #008B00;
  //  background-image: -webkit-linear-gradient(bottom, #008B00 0%, #00EE00 100%);
  //  background-image: -ms-linear-gradient(top, #008B00 0%, #00EE00 100%); /* IE10 */
  //  background: linear-gradient(to bottom, #008B00 0%, #00EE00 100%); /* IE10+*/
  //  -pie-background: linear-gradient(#008B00, #00EE00);  /* IE6-IE9 */
  //  behavior: url(PIE.htc);
  
    -webkit-box-shadow: 0px 2px 5px #fff, 0 -3px 5px #fff, inset 0 3px 5px #fff, inset 0 -10px 30px #00EE00; /*Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 */
    -moz-box-shadow: 0px 2px 5px #fff, 0 -3px 5px #fff, inset 0 3px 5px #fff, inset 0 -10px 30px #00EE00; /*Firefox до версии 4.0*/
    box-shadow: 0px 2px 5px #fff, 0 -3px 5px #fff, inset 0 3px 5px #fff, inset 0 -10px 30px #00EE00; /*PIE не поддерживает внутренние тени в IE8, а вот в IE7 почему-то поддерживает*/

    display: block;
    padding: 7px 10px;
    
    font-size: 19px;
 //   text-transform: uppercase;
    color: #0000CD; /*#0000EE;*/ 
    text-decoration: none;  
    
/*    transition-property:  top;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 1s;   */

  //  transition: top 1s, margin-top 1s, box-shadow 0.3s ease 0s;   /*transition свойства top работает корректно только в браузерах Safari и Chrome, а вот в других при hover переход не работает. ЗАМЕНИМ top НА margin!!!*/
  //  -webkit-transition: top 0.2s, box-shadow 0.3s; /*Работает отлично*/
  //  -moz-transition: top 0.2s linear 0s, box-shadow 0.3s;  /*при hover не работает вобще переход для mozilla*/
  //  -o-transition: top 0.2s linear 0s, box-shadow 0.3s; /*При hover на изменение top не работает*/
 //   -ms-transition: top 0.2s linear 0s, box-shadow 0.3s; /*Не работает для изменения top. И вобще префикса -ms- не бывает*/
 
    /*Рабочий вариант transiton!*/
    transition: top 0.2s, margin-top 0.2s, box-shadow 0.3s ease 0s; /* IE10+*/
    -webkit-transition: top 0.2s, margin-top 0.2s, box-shadow 0.3s ease 0s;
    -moz-transition: top 0.2s, margin-top 0.2s, box-shadow 0.3s ease 0s;
    -o-transition: top 0.2s, margin-top 0.2s, box-shadow 0.3s ease 0s;
    
    position: relative; /*Обязательно зададим свойства, к которым в дальнейшем будут применяться переходы. Иначе, переходы применяться не корректно.*/ 
    top: 0;
}

ul.nav>li:first-child>a{
 //   box-shadow: 0px 2px 5px #fff, 0 -2px 5px #fff, inset 0 3px 5px #fff, inset 1px 0 5px #fff, inset 0 -10px 30px #00EE00, -2px 0 5px #fff;
}

ul.nav>li:hover>a{
    border:  1px solid black;
    padding: 6px 9px;   /* (padding <a> )- (border-width <a>:hover) */
    box-shadow: inset 0 -10px 30px #00EE00, 0px 10px 20px #000;
    color: #000;
    position: relative;
    top: -3px; /*Переход для top работает хорошо только в Safari и Chrome, в остальных он изменяется скачкообразно. Даже используя margin проставим все равно top=0 для Opera, т.к. без этого там top при active изменяется скачкообразно*/
 //   margin-top: -3px;
}

ul.nav>li>a:active{
    position: relative;
    top: 0.3em; /*Переход для этого top работает, в принципе, нормально*/
    color: #FFD700;
   // margin-top: 3px; /*Список деформируется*/
}

ul.nav ul.sub {
   // background-color: green;
    
    //border: 2px solid red;
    
    list-style-position: inside;
    list-style-type: none;
    
    position: absolute;
   // white-space: nowrap;
   // left: -30px;
   // right: -30px;
  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    //border-top-left-radius: 50px 20px;
    //border-top-right-radius: 50px 20px;
    behavior: url(PIE.htc);
  //  transition: margin-top 1s;
   // margin-top: -100px;
   
    //width: 100%;
    height: 0px;
    left: -30%;
    right: -30%;
    top: 100%;
    //overflow: hidden;  /*Из-за вот этого firefox отказывается применять свойство transition для scale от 0.2 до 1 для li:hover>.sub>li*/
    
   // transition: height 0.5s;
   // -webkit-transition: height 0.5s;
   // -moz-transition: height 0.5s;
   // -o-transition: height 0.5s;
}

ul.nav>li:hover>ul.sub{
    left: -30%;
    right: -30%;
    top: auto;
    width: auto;
    height: auto;
    //overflow: visible;
}

ul.nav ul.sub li{ 
    margin-bottom: 3px;
 //  display: none; /* Если есть display:block, то переходы transition не работают */
   // position: absolute;
    //top: -30px;
    //opacity: 0;
    width: 100%;
    
    -webkit-transform: scale(0.000001); /* Chrome 5+, Safari, Android и iOS */
    -moz-transform: scale(0.000001); /* Firefoz 3.5-16*/
    -o-transform: scale(0.000001);  /* Opera 10.5-12.10*/
    //-ms-transform: scale(0.000001);  /* IE9+ */
    transform: scale(0.000001);

    transition: transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s; /* Chrome 1-26, Safari, Android и iOS*/
    -moz-transition: -moz-transform 0.5s; /* Firefox версии 4-16*/
    -o-transition: -o-transform 0.5s; /* Opera версии 11.6-12.10*/
    //-ms-transition: -ms-transform 0.5s;  /* IE10 */
    
}

ul.nav ul.sub li:hover{ 
    z-index: 10;
}

ul.nav ul.sub li:first-child{ 
    margin-top: 10px;
}

/*СSS-хак для IE 9-10*/
@media screen and (min-width:0\0) {
    
    /* По каким-то причинам вблизи границы li:hover перестает генерироваться событие hover - поэтому уберем отступ между элементами меню li*/
        /*Причины такого поведения выявлены! Дело в том, что li>ul.sub споциционирован абсолютно и поэтому может выходить (и выходит!) за пределы родителя ul.nav. Так вот та часть ul.sub (кроме областей ее пунктов
        ul.sub>li) уже не ригистррует событие ul.nav>li:hover. В данном случае, IE буквоедствует*/
        
    ul.nav ul.sub li {
        margin-bottom: 0px;      
    }
    ul.nav ul.sub li:first-child{ 
    margin-top: 7px;
    }
}

ul.nav>li:hover>.sub>li{
   // top: auto;
    //display: block; /* Если есть display:block, то переходы transition не работают */
    //opacity: 1;   
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    //-ms-transform: scale(1);
    transform: scale(1);
}

ul.nav ul.sub li a{
    display: block;
    padding: 0.5em 0.5em;
    font-size: 0.9em;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    
    border: 2px solid black; /*rgb(255, 255, 224)*/
    border-color: #000;
    border-radius: 5px;
    
    background-color: rgba(50, 205, 50, .9);
    -webkit-box-shadow: ; /*Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 */
    -moz-box-shadow: ; /*Firefox до версии 4.0*/
    box-shadow: ; /*PIE не поддерживает внутренние тени в IE8, а вот в IE7 почему-то поддерживает*/
    
   // -webkit-transform: scale(1);
   // -moz-transform: scale(1);
   
    transition: border-color 0.4s, transform 0.5s;
    -webkit-transition: border-color 0.4s, -webkit-transform 0.5s;
    -moz-transition: border-color 0.4s, -moz-transform 0.5s;
    -o-transition: border-color 0.4s, -moz-transform 0.5s;
    -ms-transition: border-color 0.4s, -ms-transform 0.5s;
    
}

ul.nav ul.sub li a:hover {
    border-color: #F5F5DC;
    color: #0000CD;
    box-shadow: inset 0 -10px 30px #00EE00, 0px 10px 20px #000;

    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

ul.nav ul.sub li a:active {
    border-color: #FFD700;
    color: #FFD700;
    //-webkit-transform: scale(1.05);
}

.header-info {
    //background-color: rgba(0,0,0,0.45);
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0.1) 100%);
    background-image: -webkit-gradient(linear, left, right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0.1) 100%);
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0.1) 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0.1) 100%);
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0.1) 100%);
    background-image: linear-gradient(to left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0.1) 100%);
    -pie-background: linear-gradient(right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0.1) 100%);;
    behavior: url(PIE.htc);
    
    float: right;
    height: 100%;
    width: 460px;
    padding: 0 0 0 30%;
    
    box-sizing:  border-box;
    padding: 0 0 0 0;
    
    position: relative;
}
 
:root .header-info:before {
    content: '';
    background-color: #000\9;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .header-info:before {
        content: '';
        display: none;
    }
}

.header-info a.logo{
    //border: 1px dashed white;
    
    display: block;
    margin: 0px 0 0 30%;
    padding: 20px 10px 20px 10px;
    
    text-align: center; 
    color: red;
    text-decoration: none;
    font-weight: bold;
    
    position: relative;
}

.header-info a.logo span.logo-name{
    display: block;
    font-size: 3em;
    text-shadow: 2px 0px 10px #00FFFF, -2px 0 10px #00FFFF, 0 2px 10px #00FFFF, 0 -2px 10px #00FFFF;
}

.header-info a.logo span.logo-explanation{
    font-size: 1.3em;
    text-shadow: 2px 0px 10px #00FFFF, -2px 0 10px #00FFFF, 0 2px 10px #00FFFF, 0 -2px 10px #00FFFF;
}

/*
.header-info div.header-contacts{
    border: 1px dashed yellow;
  //  position: absolute;
    bottom: 0;
    right: 0;
  //  float: right;
    margin: 0 0 0 30%;
    
    height: 25%;
}

.header-info div.header-contacts:after{
    content: "after";
    background: silver;
    display: inline-block;
    height: 100%;
    width: auto;
    vertical-align: middle;
}

.header-info div.header-contacts span{
    background:  yellow;
    
    display: inline-block;
    vertical-align: bottom;
}
*/

.header-info div.header-contacts{
    //border: 1px dashed yellow;
 
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 0 10px 10px 0;
     
    color: red;
    text-shadow: 2px 0px 10px #00FFFF, -2px 0 10px #00FFFF, 0 2px 10px #00FFFF, 0 -2px 10px #00FFFF;
    font-weight:  bold;
    font-family: "Trebuchet MS";
    font-size: 1.1em;
    text-align: center;
   // letter-spacing: 2px;
}

/*-----------------------Элементы в header-----------------------*/

/*-----------------------Элементы в main-----------------------*/

/*-----------------------Хлебные хрошки------------------------*/

.bread-crumbs{
    margin-bottom: 1em;
    padding: 0 0 0 3%;
}

.bread-crumbs:after{
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.bread-crumbs a{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    color: #fff;
    text-decoration: none;
    font-size: 0.8em;
    font-family: 'Trebuchet MS';
    
    float: left;
    padding: 0em 0 0 1.4em;
    position: relative;
    line-height: 2em;
    margin-right: 0.2em;
    margin-bottom: 0.8em;
    z-index: 0;
    
    background-color: #00DD00;
    background-image:  -webkit-linear-gradient(right, #00DD00 0%, green 40%, green 60%, #00DD00 100%);
    background-image: -webkit-gradient(linear, left, right, #00DD00 0%, green 40%, green 60%, #00DD00 100%);
    background-image:  -moz-linear-gradient(right, #00DD00 0%, green 40%, green 60%, #00DD00 100%);
    background-image:  -o-linear-gradient(right, #00DD00 0%, green 40%, green 60%, #00DD00 100%);
    background-image:  -ms-linear-gradient(right, #00DD00 0%, green 40%, green 60%, #00DD00 100%);
    background-image: linear-gradient(to right, #00DD00 0%, green 40%, green 60%, #00DD00 100%);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(right, #00DD00 0%, green 40%, green 60%, #00DD00 100%);
    box-shadow: 0 1px 2px #fff, 0 -1px 2px #fff;
    
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.bread-crumbs a:hover{
    background-color: green;
    background-image: none;
    box-shadow: 0 0 0 #000;
}

.bread-crumbs a:hover:after{
    background-color: green;
    background-image: none;
    
}

.bread-crumbs a:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    background-color: #00DD00;    
    background-image:  -webkit-linear-gradient(right top, #00CC00, #00DD00);
    background-image: -webkit-gradient(linear, left bottom, right top, #00CC00, #00DD00);
    background-image:  -moz-linear-gradient(right top, #00CC00, #00DD00);
    background-image:  -o-linear-gradient(right top, #00CC00, #00DD00);
    background-image:  -ms-linear-gradient(right top, #00CC00, #00DD00);
    background-image: linear-gradient(to right top, #00CC00, #00DD00);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(right top, #00CC00, #00DD00);
    
    content: '';
    display: inline-block;
    height: 1.514em;    /* 1.414 (=sqrt(2em-line-height)) + 0.2em(border-radius) */
    width: 1.514em;
    position: absolute;
    top: 50%;
    margin-top: -0.757em;   /* 0.707 (1.414) + 0.1 (border-radius/2) или height/2 */
    right: 0;
    margin-right: -0.757em; /* 0.707 (1.414) + 0.1 (border-radius/2) или width/2 */
    border-radius: 0.2em 0.2em;
    
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: -1;
    
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.bread-crumbs a:before{
    background-color: #363636;
    
    content: '';
    display: inline-block;
    height: 1.514em;    /* 1.414 (=sqrt(2em-line-height)) + 0.2em(border-radius) */
    width: 1.514em;
    position: absolute;
    top: 50%;
    margin-top: -0.757em;
    left: 0;
    margin-left: -0.757em;
    border-radius: 0.2em 0.2em;
    
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: -1;
    
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.bread-crumbs a:last-child:after{
    box-shadow: 1px -1px 2px 1px #fff;
}

.bread-crumbs a:last-child:hover:after{
    box-shadow: 0 0 0 #fff;
}

.bread-crumbs a:nth-child(1){
    z-index: 10;
    
    border-bottom-left-radius: 0.5em 1em;
    border-top-left-radius: 0.5em 1em;
    padding: 0 0 0 0.8em;
    box-shadow: -2px 0 2px #fff, 0 1px 2px #fff, 0 -1px 2px #fff;
}

.bread-crumbs a:nth-child(1):hover{
    box-shadow: 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff;
}

.bread-crumbs a:nth-child(1):before{
    display: none;
}

.bread-crumbs a:nth-child(2){
    z-index: 9;
}

.bread-crumbs a:nth-child(3){
    z-index: 8;
}

.bread-crumbs a:nth-child(4){
    z-index: 7;
}

.bread-crumbs a:nth-child(5){
    z-index: 6;
}

.bread-crumbs a:nth-child(6){
    z-index: 5;
}

.bread-crumbs a:nth-child(7){
    z-index: 4;
}

.bread-crumbs a:nth-child(8){
    z-index: 3;
}

.bread-crumbs a:nth-child(9){
    z-index: 2;
}

.bread-crumbs a:nth-child(10){
    z-index: 1;
}



/*-----------------------Хлебные хрошки------------------------*/

/*-----------------------Элементы в #main>#center-----------------------*/

p.introduction{
    border-bottom: 1px solid #00FF00;
    padding-bottom: 5px;
}

p.caption{
   display: block;
   font-size: 17px;
   font-weight: bold;
   text-align: center;
   width: 50%;
   margin: 0.8em auto; 
}

br.br-clear{
    clear: both;
}

img[class^="img"]{
    border:  5px groove #CFCFCF;
    width: 30%;
    box-shadow: 1px 0 10px white;
    
    transition: box-shadow 0.3s;
    -webkit-transition: box-shadow 0.3s;
    -moz-transition: box-shadow 0.4s;
    -o-transition: box-shadow 0.4s;
    -ms-transition: box-shadow 0.4s;
}

img[class^="img"]:hover{
    box-shadow: 1px 0 10px #FF7F24;
    //border-color: black;
}

.img-right{
    display: block;
    float: right;
    margin: 5px 0 0px 10px;
    
   // vertical-align: bottom;
    
}

.img-left{
    float: left;
    margin: 5px 10px 3px 0px;
}

ul.types-of-construction{
    //list-style-type: none;
    margin: 10px 0 0px 20px;
}

ul.types-of-construction>li:befosre{
    content: "before";
    display: inline-block;
    height: 50px;
    width: 61px;
    vertical-align: middle;
    background-image: url(images/penoblock-icon.jpg);
    background-size: 100% 100%;
}

ul.sibling-links{
    display: inline-block;
    float: right;
    list-style-type: circle;
    margin-top: 1em;
}

ul.sibling-links a{
    color: #00F;
    text-decoration: none;
}

ul.sibling-links a:hover {
    text-decoration: underline;
    color: #008000;
}

#center ul{
    margin-left: 1em;
}

div.conclusion{
    border: 1px solid #00CD00;
    margin: 30px;
    padding: 10px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 2px 20px #000, 0px -1px 10px #000, 1px 0px 10px #000, -1px 0px 10px #000;
    
    transition: border-color 0.4s;
    -webkit-transition: border-color 0.4s;
    -moz-transition: border-color 0.4s;
    -o-transition: border-color 0.4s;
    -ms-transition: border-color 0.4s;
}

div.conclusion:hover{
    border: 1px solid green;
    box-shadow: 0px 2px 15px #000, 0px -1px 15px #000, 1px 0px 15px #000, -1px 0px 15px #000;
}

/*Вариант чтобы все figure одинаковой высоты, равной высоте самой высокой колонки (пропорционально высоте самого высокого изображения)*/
div.row{
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    //border: 2px solid red;
    
    display: block;
    width: 100%;
    text-align: center;
    
    margin-top: 1.5em;
    margin-bottom: 0em;
}

div.row>figure { /*div.row>**/
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    border: 4px solid #000;
    background-image: url(http://subtlepatterns.com/patterns/old_map.png);                   /*http://subtlepatterns.com/patterns/brickwall.png);*/
    display: inline-block;
    width: 35%;
    min-width: 200px;
    margin-right: 5%; 
    margin-left: 5%;
    /*Для крайних элементов в строке эти margin'ы являются как бы паддингами (левый от левой границы div.row, правый - от правой границы), а 
    расстояние между соседними элементами = сумме margin-right правого элемента и margin-left левого*/ 
    margin-bottom: 2em;
    /* Расстояние между соседними элементами разных строк - расстояние между строками. При этом между верхней границей div.row и первой строкой появиться нежелательный margin - его уберем
    с помощью псевдокласса div.row:first-line. Псевдоэлемент :first-line задает стиль первой строки форматированного текста (не работает!). Или можно назначить отрицательный margin-top для div.row*/
    
    vertical-align: bottom;
    
    padding: 15px 15px 10px;
    box-shadow: 0 -1px 3px 1px #fff,0 8px 20px 2px #000;
    border-radius: 2px 2px 0px 0px;
    //border-bottom-left-radius: 50px 10px;
    //border-bottom-right-radius: 50px 10px;
    cursor: pointer;
    overflow: hidden;
    
    -moz-transition: all 0.2s, background-position 5s linear 0s;
    -webkit-transition: all 0.2s, background-position 5s linear 0s;
    -o-transition: all 0.2s, background-position 5s linear 0s;
    transition: all 0.2s, background-position 5s linear 0s;
}

div.row figcaption a{
    display: block;
    //width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    margin-bottom: 0em;
    color: #eee;
    text-shadow: 2px 0px 1px #000, -2px 0px 1px #000, 0px 2px 1px #000, 0px -2px 1px #000;
    //font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
}

:root .row figcaption a{
    color: #000\9;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .row figcaption a {
        color: #eee!important;
    }
}

div.row>figure>img{
    width: 100%;
    //border: 2px solid #fff;
    box-shadow: 0 0 5px 2px #000;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;  
    -moz-transition: all 0.4s;
}

div.row figcaption{
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    
}

div.row>figure:hover {
    border-color:  transparent;
    box-shadow: 0 0 20px 3px #FF7F24,0 8px 20px 2px #000;
    background-position: 0 -400%;
}

div.row>figure:hover img {
    box-shadow: 0 0 10px 5px #000;
    border-radius: 10px;
}

div.row>figure:hover figcaption {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

div.row.projects{
    //border: 2px solid red;
    border-top: 2px dashed #12FF12;
    border-bottom: 2px dashed #12FF12;
    text-align: left;
    padding-top: 1.5em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

div.row.projects>figure{
    width: 20%;
    min-width: 100px;
    margin-left: 2%;
    margin-right: 2%;
    
    padding: 1.3% 1.3% 0%;
    text-align: center;
}

div.row.projects span.look-more{
    float: right;
    margin-bottom: 0.8em;
    margin-right: 0.5em;
    display: inline-block;
    
    text-align: center;
    font-size: 0.8em;
    //background-image: url(images/fresh_snow.png);
    background-color: green;
    background-image: -webkit-linear-gradient(bottom, #004000, #00a000); /*rgba(0,64,0,1), rgba(0,160,0,1)*/
    background: -webkit-gradient(linear, bottom, top, color-stop(0%, #004000), color-stop(100%,#00a000));    
    background-image: -moz-linear-gradient(bottom, #004000, #00a000);
    background-image: -o-linear-gradient(bottom, #004000, #00a000);
    background-image: -ms-linear-gradient(bottom, #004000, #00a000);
    background: linear-gradient(to top, #004000, #00a000);
    
    behavior: url(PIE.htc);
    //border: 2px solid black;
    
    box-shadow: 0 0px 10px #fff;
    padding: 0.5em 0.5em 0.7em;
}

div.row.projects span.look-more a{
    color: #00FFFF;
}

div.row.projects>figure a {
    padding-bottom: 5%;
    font-weight: bold;
}

div.row.projects>figure:hover a {
    text-shadow: 2px 0px 1px #000, -2px 0px 1px #000, 0px 2px 1px #000, 0px -2px 1px #000, 0 0.4em 2px rgb(100,100,100);
    
    //color: #00FFFF;
    //font-weight: bold;
}

div.row.projects:after{
    content: "";
    display: block;
    clear: both;
    width: 0;
    height: 0;
}

p.steps-building:first-line{
    font-style: italic;
}

/*-------------------------------Каталог новостей--------------------------*/

div.news-list{
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    
    margin: 0 10%;
    margin-bottom: 3em;
    background-image: url(http://subtlepatterns.com/patterns/handmadepaper.png);
    color: #000;
    box-shadow: 0 0 20px 5px #000;
    border-radius: 5px;
}

div.news-list .news-title{
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    
    display: block;
    padding: 0.3em 0.5em;
    color: #fff;
    background-color: #0000CC;
    background-image:  -webkit-linear-gradient(bottom, #0000CC, #0000DD);
    background-image: -webkit-gradient(linear, top, bottom, #0000CC, #0000DD);
    background-image:  -moz-linear-gradient(bottom, #0000CC, #0000DD);
    background-image:  -o-linear-gradient(bottom, #0000CC, #0000DD);
    background-image:  -ms-linear-gradient(bottom, #0000CC, #0000DD);
    background-image: linear-gradient(to top, #0000FF 0%, #00BFFF 100%);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #0000CC, #0000CC);
    box-shadow: 0 2px 10px #000, inset 0 1px 10px #fff;
}

div.news-list .news-date{
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    
    display: block;
    //float: left;
    text-align: right;
    padding: 0.3em 0.5em;
    border-top: 1px dotted #000;
}

div.news-list a{
    text-decoration: underline;
    display: inline-block;
    float: left;
    margin: 0.3em 1em;
    color: #0000FF;
}

div.news-list a:hover{
    color: #12AA12;
    text-decoration: none;
}

div.news-list p{
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    
    padding: 1em;
}

/*-------------------------------Каталог новостей--------------------------*/

/*\\\\\\\\\\\\\\\\\\\\\\\\\\Страница "карточка проекта"////////////////////*/

div.navigation-projects {
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    //border: 3px solid white;
    
    position: relative;
    text-align: center;
    margin: 1em 0;
}

div.navigation-projects:bjkefore {
    background-color: silver;
    
    content: 'rasporka';
    display: inline-block;
    //position: absolute;
    height: 100%;
    vertical-align: middle;
}

div.navigation-projects>figure{
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    display: inline-block;
    vertical-align: middle;
    width: 78%;
    //min-width: 400px;
}

div.navigation-projects>figure>img{
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;    
    
    width: 100%;
    border: 2px solid #008000;
    border-radius: 15px;
    box-shadow: 0 0px 15px 5px #000;
    
    //-webkit-transition: box-shadow 0.2s;
   // -moz-transition: box-shadow 0.2s;
   // -o-transition: box-shadow 0.2s;
   // transition: box-shadow 0.2s;
}

div.navigation-projects>figure>img:hover{
    box-shadow: 0 0px 15px 5px #000, 0 0 10px 3px #00FF00;
}

a.next-project,
a.previous-project {
    
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    //border: 2px solid yellow;
    
    display: inline-block;
    vertical-align: middle;
    width: 10%;
    font-size: 0.7em;
    
    position: relative;
    top: 0;
    padding-bottom: 1em;
    
    
    -o-transition: top 0.3s, box-shadow 0.2s;
    -webkit-transition: top 0.3s, box-shadow 0.2s;
    -moz-transition: top 0.3s, box-shadow 0.2s;
    transition: top 0.3s, box-shadow 0.2s;
}

a.next-project{
    
    margin-left: -100px;     /* Чтобы убрать отступ между inline-элементами сделам так чтобы соседние элементы могли заходить друг на друга, а потом сдвинем (relative) элемент на велечину 'захода' обратно */
    left: 100px;
}

a.previous-project{

    margin-right: -100px;
    right: 100px;
}

a.next-project:hover, a.previous-project:hover {
    box-shadow: 0 10px 10px -10px #000, inset 0 -5px 10px -10px #000;

}

a.next-project img, a.previous-project img {
    width: 100%;
    display: block;
    border: none;   /* В IE надо убрать рамку - она там откуда-то есть */
    //transform: rotateX(0deg);
    transform:  scale(1);
    
    transition: transform 0.5s;
}

a.next-project:hover img, a.previous-project:hover img {
    width: 100%;    
    //transform: rotateX(360deg);
    transform: scale(1.1);

}

a.next-project:active, a.previous-project:active {
    top: 3px;
}

img.stats-project{
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    width: 30%;
    display: inline-block;
    min-width: 200px;
    box-shadow: -5px 0 10px 10px #fff; 
   // margin-left: 5%;
    margin-top: 20px;
    float: left;
    margin-right: 5%;
    //margin-bottom: 10%;
    cursor: pointer;
}

div.description-project{
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    //border: 1px solid red;
    margin-left: 5%;
    margin-top: 50px;
    margin-right: 5%;
    //text-align: left;
}

div.description-project:after{
    content: "";
    display: block;
    clear: both;
    height: 0;
    width: 0;
}

div.description-projejct{
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
   // border: 1px solid blue;
    
    display: inline-block;

}

div.description-project h2{
    //border: 2px solid white;
    display: block;
    width: auto;
    margin-top: -20px;
}

div.description-project h2 span{
    -webkit-box-sizing: border-box; /* Safari 5-, Chrome 10-, Android 4- и iOS Safari 5- */
    -moz-box-sizing: border-box;    /*Все версии Firefox*/
    box-sizing: border-box;
    
    //border: 2px solid green;
    display: inline-block;
    padding-top: 20px;
}

img.scheme-project{
    display: block;
    width: 80%;
    margin: 0 auto;
    cursor: pointer;
    box-shadow: 0px 0 10px 5px #fff;
}

div.poppup.images-projects
{
    max-width: 100%;
}

div.poppup.images-projects img{
    width: auto;
    box-shadow: 0px 0 10px 5px #fff;
    max-width: 100%;
}

img.scheme-project+.poppup-overlay img{
    min-width: 750px;
}

img.scheme-project+.poppup-overlay .poppup{
    min-width: 750px;
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\Страница "карточка проекта"////////////////////*/

/*----------------------------Regauth_Layout------------------------------*/

div.form-wrapper{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    position: relative;
}

div.form-wrapper.log-in{
    height: 500px;
    text-align: center;
}

div.form-wrapper>span.header{
    display: block;
    text-align: center;
    font-size: 1.2em;
}

div.form-wrapper form {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    //border: 2px solid red;
    text-align: center;
    //margin-right: -20%;
}
div.form-wrapper form div{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    border: 2px solid red;
    //text-align: center;
}

div.form-wrapper span.error{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    //border: 1px solid black;
    float: right;
    font-size: 0.8em;
    margin-left: -100%;
    padding: 0.2em;
    border-radius: 5px;
    display: inline-block;
    width: 120px;
    min-width: 120px;
    //margin-left: -20%;
    position: relative;
    //left: 20%;
    //bottom: 1em;
    top: -0.6em;
    
    transition: all 1s;
}

div.form-wrapper span.error:before{
    border-color: transparent;
    border-right-color: #FF3030;
    top: 50%;
    left: -1em;
    margin-left: 0;
    margin-top: -0.5em;
}

div.form-wrapper input:focus~span.error{
    opacity: 1;
}

div.form-wrapper label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    display: block;
    //background-color: silver;
    //width: 30%;
    //margin: 0 auto;
    margin-top: 0.5em;
    padding: 0.3em 0.5em 0.3em 0.5em;
    vertical-align: bottom;
    text-align: center;
    //font-size: 1.1em;
    //cursor: pointer;
}

div.form-wrapper label span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    font-size: 0.8em;
}

div.form-wrapper input{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    display: block;
    width: 30%;
    margin: 0 auto;
    min-width: 200px;
    vertical-align: bottom;
    padding: 0.3em 0 0.2em 0.2em;
    //margin-top: 0.5em;
    //margin-left: 50%;
    //position: relative;
    //left: -50%;
    border-radius: 2px;
    
    border: 1px solid #696969;
    
    -webkit-transition: border-color 0.3s, box-shadow 0.3s;
    -moz-transition: border-color 0.3s, box-shadow 0.3s;
    -o-transition: border-color 0.3s, box-shadow 0.3s;
    transition: border-color 0.3s, box-shadow 0.3s;
}

div.form-wrapper input:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    content: 'Обязательное поле не заполнено';
    background-color: silver;
}

div.form-wrapper input:hover{
    border-color: #8B8989;
    box-shadow: 0 0 5px #696969;
}

div.form-wrapper input:focus{
    border-color: #FF7F24;
    box-shadow: 0 0 8px #FF7F24;
}

div.form-wrapper input:focus+span{
    border: 3px solid red;

}

div.form-wrapper input[type="submit"],
div.form-wrapper input[type="reset"] {
   // display: block; /*display для submit не работает*/
   // width: 30%;
    margin: 2em 3% 1em auto;
    padding: 0.3em 0em;
    color: #fff;
    text-decoration: none;
    font-size: 0.8em;
    cursor: pointer;
    text-transform: uppercase;
    border: 1px solid #000;
    background-color: #008000;
    background-image:  -webkit-linear-gradient(bottom, #004000, #00a000);
    background-image: -webkit-gradient(linear, top, bottom, #004000, #00a000);
    background-image:  -moz-linear-gradient(bottom, #004000, #00a000);
    background-image:  -o-linear-gradient(bottom, #004000, #00a000);
    background-image:  -ms-linear-gradient(bottom, #004000, #00a000);
    background-image: linear-gradient(to top, #004000, #00a000);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #004000, #00a000);
    
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 0 10px 3px #000;
    border-radius:  0%;
    
    transform: scale(1);
    -webkit-transform: scale(1);
    
    transition: border-radius 0.5s, transform 0.5s, box-shadow 0.1s;
    -webkit-transition: border-radius 0.5s, -webkit-transform 0.5s;
}

div.form-wrapper input[type="reset"]{
    margin: 2em 0 1em 3%;
    float: left;
}

div.form-wrapper input[type="submit"]:hover,
div.form-wrapper input[type="reset"]:hover {
    border-radius: 10%;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    //border-color: red;
}

div.form-wrapper input[type="submit"]:active,
div.form-wrapper input[type="reset"]:active {
    border-color: red;
    box-shadow: 0 0 10px 5px #800000;
}

div.form-wrapper a{
    position: absolute;
    bottom: 0.5em;
    left: 0.5em;
    
    color: blue;
    text-decoration: underline;
}

div.form-wrapper a:hover{
    color: green;
    text-decoration: none;
}

div.form-wrapper.log-in:before{
    content: '';
    display: inline-block;
    //border: 1px solid black;
    height: 100%;
    vertical-align: middle;
    width: 0;
    margin-right: -10px;
}

p.message-success.center{
    display: inline-block;
    vertical-align: middle;
    padding: 0.5em;
}

/*----------------------------Regauth_Layout------------------------------*/

/*-----------------------Элементы в #main>#center-----------------------*/

/*---------------------------Footer----------------------------------*/

#footer-left{
    //border: 1px solid yellow;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    float:left;
    height: 100%;
    width: 25%;
    
    text-align: left;
    padding: 5px;
}

/*Прием для того, чтобы выровнять span.copyright по нижнему краю блока*/
#footer-left:before{
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    //border: 1px solid red;
    vertical-align: middle;
}

#footer-left span.copyright{
    vertical-align: bottom;
}

#footer-center{
    //border: 1px solid red;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    margin-right: 200px;
}

.footer-logo{
    //border: 1px dotted blue;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    display: inline-block;
    width:49%;
    //height: 100%;
    //margin-left: 25%;
    text-align: center;
    color: red;
    //line-height: 1em; /*Межстрочный интервал*/
    text-shadow: 2px 0px 10px #00FFFF, -2px 0 10px #00FFFF, 0 2px 10px #00FFFF, 0 -2px 10px #00FFFF;
    vertical-align: middle;
}

.footer-logo .name-company{
    //border: 1px solid white;
    font-size: 3em;
    //border-bottom: 2px solid aqua;
    display: inline-block;
    padding: 0 0 3px 0;
    box-shadow: 0 11px 2px -10px aqua;
    //font-family: "Trebuchet MS";
    //font-weight: bold;
}
.footer-logo .explanation{
    //border-top: 2px solid green;
    font-size: 1.3em;
    display:  inline-block;
    margin-top: 7px;
    box-shadow: 0 -11px 2px -10px aqua;
    font-family: "Trebuchet MS";
    font-weight: bold;
}

#footer-right{
    //border: 1px solid white;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    float: right;
    height: 100%;
    width: 25%;
}

/*Отмена обтекания*/
#footer:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    //border:  2px solid red;
    
    content: "";
    display: block;
    clear: both;
}

/*Вертикальное выравнивание по центру центрального блока*/
#footer:before{
    //border: 1px dotted red;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;

}


/*---------------------------Footer----------------------------------*/

/*---------------------------Left-Bar--------------------------------*/

span.caption{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    display: block;
    background-color: green;
    width: 50%;
    margin: 50px auto 15px;
    border: 2px solid #000;
    padding: 0.3em;
    font-size: 1.1em;
    text-align: center;
    text-transform: capitalize;
    box-shadow: 0 0px 15px 3px #000;
    text-shadow: 1px 1px 0px #000, -1px -1px 0px #000;
    background-image: -webkit-linear-gradient(bottom, #004000, #00a000); /*rgba(0,64,0,1), rgba(0,160,0,1)*/
    background: -webkit-gradient(linear, bottom, top, color-stop(0%, #004000), color-stop(100%,#00a000));    
    background-image: -moz-linear-gradient(bottom, #004000, #00a000);
    background-image: -o-linear-gradient(bottom, #004000, #00a000);
    background-image: -ms-linear-gradient(bottom, #004000, #00a000);
    background: linear-gradient(to top, #004000, #00a000);
    
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #004000, #00a000);
    position: relative; 
    
}

/*div>span.caption:first-child{
    /*margin-top: 15px;
    margin-top: 0px;
}*/
/*#left-bar>*:first-child{
    margin-top: 0;
}*/

ul.menu-leftbar{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    background-color: green;
    //background-image: url(http://subtlepatterns.com/patterns/ricepaper_v3.png);
    margin: 0 10px;
    border: 2px dotted #000;
    //padding: 5px;
    box-shadow: 0 0 15px 3px #000;
    border-bottom-left-radius: 45px 15px;
    border-bottom-right-radius: 45px 15px;
    
    overflow: hidden;
    list-style-type: none;
    
    behavior: url(PIE.htc);
    position: relative;
}

ul.menu-leftbar a{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    display: block;
    background-color: green;/*rgba(0,128,0, 1);*/
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    //line-height: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-decoration: none;
    text-shadow: 0 1px 5px #000;
}

ul.menu-leftbar a:hover{
    background-color: #7CFC00;/*#00FF7F;/*#00FF00;*/
    color: #0000CD;
    text-shadow: none;
    box-shadow: inset 0px 3px 5px rgba(0,100,0,0.7), inset 0px -3px 5px rgba(0,100,0,0.7);
}

ul.menu-leftbar>li>a{
    border-bottom: 1px solid red;
    padding-left: 5px;
}

ul.menu-leftbar>li:last-child>ul>li:last-child a{
    border-bottom-left-radius: 45px 15px;
    border-bottom-right-radius: 45px 15px;
}

ul.menu-leftbar ul a{
   padding-left: 15px;
}

ul.menu-leftbar>li:last-child>ul>li:last-child>a{
    padding-bottom: 0.6em;
    //border: 5px solid black;
}
ul.menu-leftbar>li:last-child>ul>li:last-child>a:hover{
    box-shadow: inset 0px 3px 5px rgba(0,100,0,0.7);
}

ul.menu-leftbar li{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul.menu-leftbar ul{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    //border: 3px ridge black;
    //margin: 0 10px 0 10px;
    border-top: none;
    border-right: none ;
    //margin-top: -1px;
    //background-color: green;
    //border-bottom-left-radius: 80px 30px;
    
    list-style-type: none;
}

.informer {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    border: 2px dotted #000;
    background-color: #fff;
    background-image: url(images/ricepaper_v3.png);
    margin: 0 20px;
    box-shadow: 0 0 15px 3px #000;
    color: black;
    padding: 7px;
}

ol[class^="advantages"] li{
    //margin-top: 0.3em;
}

ol[class^="advantages"] li:first-child{
    margin-top: auto;
}

ol[class^="advantages"] a{
    //color: inherit;
    color: blue;
    text-decoration: none;
    display: block;
    text-align: right;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

ol[class^="advantages"] a:hover{
    text-decoration: underline;
    color: rgb(0,128,0);
}

/*---------------------------Left-Bar--------------------------------*/

/*---------------------------Rigth-bar-------------------------------*/


/*div > .informer:first-child{
    margin-top: 15px;
}*/

div.news-rightbar {
    margin-left: 5px;
    margin-right: 5px;
    //text-align: justify;
}

div.news-rightbar:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

div.news-rightbar>div{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    //border-bottom: 2px ridge #000;
    box-shadow: 0 0px 10px #000;
    padding: 0.5em 0.5em 0.7em;
    margin: 10px auto 0;
    
    //background-color: rgba(0,0,0,0.1);
    
    transition: box-shadow 0.1s;
}

div.news-rightbar>div:hover{
    box-shadow: 0 0 15px 3px #FF7F24;
}

div.news-rightbar a{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    //background-color: yellow;
    display: block;
    //clear: both;
    color: blue;
    color: #000;
    background-color: rgba(0,0,0,0.1);
    //border: 1px solid transparent;
    padding: 0 0.3em;
    text-decoration: none;
}

div.news-rightbar a:hover{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    color: #008000; /*#008000 = green*/
    //text-decoration: none;
    //border: 1px solid grey;
}

div.news-rightbar span.date{
    display: inline-block;
    border: 1px solid blue;
    border-radius: 3px;
    padding: 0.2em;
    background-color: blue;
    color: #fff;
    //float: left;
    margin: 0 0 0.3em 0;
}

div.news-rightbar a.news-archive{
    color: #fff;
    text-decoration: none;
    display: inline-block;
    float: right;
    padding: 0.5em;
    text-transform: uppercase;
    border: 1px solid #000;
    background-color: #008000;
    background-image:  -webkit-linear-gradient(bottom, #004000, #00a000);
    background-image: -webkit-gradient(linear, top, bottom, #004000, #00a000);
    background-image:  -moz-linear-gradient(bottom, #004000, #00a000);
    background-image:  -o-linear-gradient(bottom, #004000, #00a000);
    background-image:  -ms-linear-gradient(bottom, #004000, #00a000);
    background-image: linear-gradient(to top, #004000, #00a000);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #004000, #00a000);
    margin: 0.9em 0.5em 0.4em auto;
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 0 10px 3px #000;
    border-radius:  0%;
    transform: scale(1);
    -webkit-transform: scale(1);
    
    transition: border-radius 0.5s, transform 0.5s, box-shadow 0.1s;
    -webkit-transition: border-radius 0.5s, -webkit-transform 0.5s;
}

div.news-rightbar a.news-archive:hover{
    border-radius: 10%;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    //border-color: red;
}

div.news-rightbar a.news-archive:active{
    border-color: red;
    box-shadow: 0 3px 10px 1px #000, 0 0 10px 3px #800000;
}

button.order-call{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;    
    
    display: inline-block; /* display: block походу не работает для <button>*/
    width: 90%;
    background-color: rgba(256,256,256, 1);
    background-image: url(http://subtlepatterns.com/patterns/ricepaper_v3.png);
    border: 2px outset silver;
    padding: 0.5em;
    cursor: pointer;
    color: red;
    text-shadow: 1px 1px 1px gold, -1px -1px 1px gold;
    font-size: 1.3em;
    font-family: Trebuchet MS;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    margin: 0 5%;
    padding: 5px 79px 5px 15px;
    min-height: 74px;
    z-index: 3 !important;
    overflow: visible;  /*В IE тут по умолчанию hidden*/
    margin-bottom: 30px;
    
    border-top-right-radius: 35px 10px;
    border-top-left-radius: 35px 10px;
    
    position: relative;
    
    box-shadow: 0 0 15px 5px #000, inset 0px 0px 15px 0px black;
    
    -webkit-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}

button.order-call>span{
    display: inline-block;
    //border: 1px solid red;
}

button.order-call:before{
    content: "";
    display: inline-block;
    width: 64px;
    height: 64px;
    background-image: url(images/phone-order-call-x128.png);
    background-size: 100%;
    background-position: center;
    float: right;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -32px;
    
    //border: 1px solid yellow;
}

/* Сделаем подсказку (tooltip)*/
button.order-call:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 

    content: attr(data-title);
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: 100%;
    padding: 0.5em;
    //bottom: -100%;
    font-size: 0.7em;
    //text-shadow: 1px 1px 1px blue;
    background-image: url(http://subtlepatterns.com/patterns/ricepaper_v3.png);
    //border: 2px dotted #000;
    border: 2px outset silver;
    border-top: none;
    border-bottom-right-radius: 35px 10px;
    border-bottom-left-radius: 35px 10px;
    //border: 5px ridge blue;
    //width: 100%;

    box-shadow: 0 5px 15px 3px #000, inset 0px 0px 15px 0px black;

    
    -webkit-transform-origin: 0 0; /*По умолчанию, 50% 50% - трансформация относительно центра элемента*/
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
     transform-origin: 0 0;
     
    //-webkit-transform: rotateX(-180deg);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s, box-shadow 0.2s;
}

button.order-call:hover:after{
    //-webkit-transform: rotateX(0deg);
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    
    box-shadow: 0px 5px 15px 3px #000, inset 0px 0px 10px 1px #000;
}

button.order-call:hover{
    box-shadow: 0 0 10px 3px #000, inset 0px 0px 10px 1px black;
    //text-shadow: 1px 1px 2px blue;
    //border-style: inset;
}

button.order-call:active{
    border-color: #1E90FF;
}

button.order-call:active:after{
    border-color: #1E90FF;
}

.poppup-overlay{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    //border: 5px solid red;
    position: fixed !important;
    top: -100%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 999 !important;
    background-color: rgba(0,0,0, 0);
    text-align: center;
    //display: none;
    overflow: auto;
    padding: 10px;
   
    -webkit-transition: top 0.5s, background-color 0.5s;
    -moz-transition: background-color 2s;
    -o-transition: background-color 2s;
    -ms-transition: background-color 2s;
    transition: top 0.5s, background-color 1s;
    
}

.active{
    top: 0;
    background-color: rgba(0,0,0,0.5);
  // display: block;
  
}

div.poppup-overlay:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    content: "";
    display: inline-block;
    //border: 2px solid yellow;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
/*Когда включаешь overlay, то ,так как он находится внутри main (а main по оси z находится ниже header'а), overlay находится ниже header'a и меню, соответсвенно, и header доступен для клика. Это можно исправить,
 если при вызове overlay'я убрать main ниже header'а по оси Z (Или header убрать ниже).*/

div.poppup{
    background-color: white;
    background-image: url(images/fresh_snow.png);/*url(http://subtlepatterns.com/patterns/nice_snow.png);*/
    display: inline-block;
    vertical-align: middle;
    
    max-width: 600px;
    padding: 15px;
    color: #696969;
    border-radius: 5px;
    border: 3px solid #000;
    box-shadow: 0 0 5px 0 #fff;
    
    -webkit-transform: scaleY(0.1);
    -moz-transform: scaleY(0.1);
    -o-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    transform: scaleY(0.1);
    
    -webkit-transition: -webkit-transform 0.3s ease 0.6s;
    -moz-transition: -moz-transform 0.3s ease 0.6s;
    -o-transition: -o-transform 0.3s ease 0.6s;
    transition: transform 0.3s ease 0.6s;
}

.active .poppup {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

div.order-call{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    width: 30%;
    max-width: 600px;
    min-width: 300px;
}

div.order-call p{
    text-align: justify;
}

form#order-call {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;    
    
    //border: 2px solid red;
    //width: 50%;
    margin: 10px auto;
    padding: 0;
}

form#order-call .row-form{
    //display: block;
    //border: 1px dotted black;
    text-align: center;
    margin-bottom: 1em;
}

form#order-call .row:after{
    content: "";
    display: block;
    clear: both;
    width: 0;
    height: 0;
}

form#order-call label{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    display: inline-block;
    vertical-align: bottom;
    //float: left;
    width: 20%;
    min-width: 150px;
    //min-width: 6em;
    //background-color: aqua;
    text-align: right;
    margin-bottom: 0.3em;
    //margin-left: -20%;
    padding-right: 1em;
    cursor: pointer;
    
    transition: color 0.5s;
    -moz-transition: color 0.5s;
    -webkit-transition: color 0.5s;
    -o-transition: color 0.5s;
}

form#order-call input,
form#order-call select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    display: inline-block;
    vertical-align: top;
    min-width: 150px;
    width: 35%;
    border: 1px solid #696969;
    padding: 0.3em;
    border-radius: 2px;
    
    transition: border-color 0.3s, box-shadow 0.3s;
    -moz-transition: border-color 0.3s, box-shadow 0.3s;
    -webkit-transition: border-color 0.3s, box-shadow 0.3s;
    -o-transition: border-color 0.3s, box-shadow 0.3s;
}

span.error{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;    
    
    display: inline-block;
    position: relative;
    padding: 0.2em 0.4em;
    
    background-color: #FF3030;
    color: #fff;
    box-shadow: 0 0 10px #000;
    border-radius: 20px;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
}

span.error:before{
    content: '';
    width: 0;
    height: 0;
    border-right: 0.5em solid transparent;
    border-bottom: 0.5em solid #FF3030;
    border-top: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
    
    position: absolute;
    top: -0.9em;
    left: 50%;
    margin-left: -0.4em;
}

input:focus~span.error{
    opacity: 0.5;
}


form#order-call span.error{
    width: 40%;
    min-width: 220px;
    margin-top: -0.6em;
    margin-bottom: 1em;
    padding: 0.2em;
}

p[class|="message"]{
    border: 3px solid green;
    
    margin: 0.7em 0.5em 0;
    padding: 0.2em 0.2em;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 10px #000;
    padding: 0.2em;
}

p.message-success{
    border-color: green;
    background-color: green;
    background-image:  -webkit-linear-gradient(bottom, #004000, #00a000);
    background-image: -webkit-gradient(linear, top, bottom, #004000, #00a000);
    background-image:  -moz-linear-gradient(bottom, #004000, #00a000);
    background-image:  -o-linear-gradient(bottom, #004000, #00a000);
    background-image:  -ms-linear-gradient(bottom, #004000, #00a000);
    background-image: linear-gradient(to top, #004000, #00a000);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #004000, #00a000);
}

p.message-fail{
    border-color: #FF3030;
    background-color: #FF3030;
    //background-image:  -webkit-linear-gradient(bottom, #FF3030, #FF7F24);
    background-image: -webkit-gradient(linear, top, bottom, #FF3030, #FF7F24);
    background-image:  -moz-linear-gradient(bottom, #FF3030, #FF7F24);
    background-image:  -o-linear-gradient(bottom, #FF3030, #FF7F24);
    background-image:  -ms-linear-gradient(bottom, #FF3030, #FF7F24);
    background-image: linear-gradient(to top, #FF3030, #FF7F24);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #FF3030, #FF7F24);
}

form#order-call input:hover{
    box-shadow: 0 0 5px #696969;
}
form#order-call input:focus{
    border-color: #FF7F24;
    box-shadow: 0 0 8px #FF7F24;
}
form#order-call label:hover{
    color: blue;
}

form#order-call input[type="submit"]{
    display: block; /*display для submit не работает*/
    width: 30%;
    margin: 1em 0 0em auto;
    padding: 0.3em 0em;
    color: #fff;
    text-decoration: none;
    font-size: 0.8em;
    //float: right;
    cursor: pointer;
    //text-transform: uppercase;
    border: 1px solid #000;
    background-color: #008000;
    background-image:  -webkit-linear-gradient(bottom, #004000, #00a000);
    background-image: -webkit-gradient(linear, top, bottom, #004000, #00a000);
    background-image:  -moz-linear-gradient(bottom, #004000, #00a000);
    background-image:  -o-linear-gradient(bottom, #004000, #00a000);
    background-image:  -ms-linear-gradient(bottom, #004000, #00a000);
    background-image: linear-gradient(to top, #004000, #00a000);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #004000, #00a000);
    
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 3px 10px 1px #000;
    border-radius:  0%;
    
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    
    transition: border-radius 0.5s, transform 0.5s, box-shadow 0.1s;
    -webkit-transition: border-radius 0.5s, -webkit-transform 0.5s;
    -moz-transition: border-radius 0.5s, -moz-transform 0.5s;
    -o-transition: border-radius 0.5s, -o-transform 0.5s;
}

form#order-call input[type="submit"]:hover{
    border-radius: 10%;
    
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    //border-color: red;
}

form#order-call input[type="submit"]:active{
    border-color: blue;
    box-shadow: 0 3px 10px 1px #000, 0 0px 10px 0px #00BFFF;
}

button.close-poppup{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    display: block; /*display для submit не работает*/
    width: 30px;
    height: 30px;
    position: relative;
    margin: -5px 0px 5px auto;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    //float: right;
    cursor: pointer;
    //text-transform: uppercase;
    border: 1px solid #000;
    background-color: rgb(200, 0 ,0);
    background-image:  -webkit-linear-gradient(bottom, , rgb(160, 0 ,0), rgb(256, 0 ,0));
    background-image: -webkit-gradient(linear, top, bottom, rgb(160, 0 ,0), rgb(256, 0 ,0));
    background-image:  -moz-linear-gradient(bottom, rgb(160, 0 ,0), rgb(256, 0 ,0));
    background-image:  -o-linear-gradient(bottom, rgb(160, 0 ,0), rgb(256, 0 ,0));
    background-image:  -ms-linear-gradient(bottom, rgb(160, 0 ,0), rgb(256, 0 ,0));
    background-image: linear-gradient(to top, rgb(160, 0 ,0), rgb(256, 0 ,0));
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #004000, #00a000);
    
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 2px 10px 0px #000;
    border-radius: 50%;
    
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    
    transition: border-radius 0.5s, transform 0.5s, box-shadow 0.1s;
    -webkit-transition: border-radius 0.5s, -webkit-transform 0.5s;
    -moz-transition: border-radius 0.5s, -moz-transform 0.5s;
    -o-transition: border-radius 0.5s, -moz-transform 0.5s;
    
    overflow: visible;
}

button.close-poppup:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

button.close-poppup:active{
    border-color: blue;
    color: #00BFFF;
    box-shadow: 0 3px 10px 1px #000, 0 0px 5px 0px #00BFFF;
}

button.close-poppup:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    content: attr(data-title);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.6em;
    padding: 0.5em;
    text-shadow: 1px 1px 1px #000, 1px 1px 1px #000; 
    box-shadow: 0 0px 5px 0px #000;
    
    -webkit-transform: scale(0) rotate(0);
    -moz-transform: scale(0) rotate(0);
    -o-transform: scale(0) rotate(0);
    -ms-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0);
    
    transition: left 0.5s, transform 0.5s;
    -webkit-transition: left 0.5s, -webkit-transform 0.5s;
    -moz-transition: left 0.5s, -moz-transform 0.5s;
    -o-transition: left 0.5s, -o-transform 0.5s;
}

:root button.close-poppup:after {
    color: #000\9;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .close-poppup:after {
        color: #fff!important;
    }
}

button.close-poppup:hover:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    left: -9em;

    -webkit-transform: scale(1) rotate(360deg);
    -moz-transform: scale(1) rotate(360deg);
    -o-transform: scale(1) rotate(360deg);
    -ms-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);

}

/*
button.close-poppup:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    margin-left: -5px;
    left: -20px;
    //border: 3px solid green;
    border-left: 20px solid rgba(0,0,0, 0.7);
    border-right: none; /*20px solid blue*/
    border-top: 8px solid transparent; /*20px solid black;*/
    border-bottom: 8px solid transparent;/*20px solid yellow;*/
    //border-radius: 4px;

}*/

div.reg-ajghjghuto-rightbar{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;    
    
    display: block;
    width: auto;
    background-color: rgba(256,256,256, 1);
    background-image: url(http://subtlepatterns.com/patterns/ricepaper_v3.png);
    border: 2px outset silver;
    padding: 0.5em;
    font-family: Trebuchet MS;
    margin: 20px 5% 20px;
    
    
    position: relative;
    
    box-shadow: 0 0 15px 5px #000, inset 0px 0px 15px 0px black;
    
    -webkit-transition: box-shadow 0.1s;
    transition: box-shadow 0.1s;
}
div.regauto-rightbar{
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 0.5em;
    position: relative;
    text-align: center;
}

div.regauto-rightbar>span.header{
    display: block;
    text-align: center;
    font-size: 1.2em;
}

div.regauto-rightbar form {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    //border: 2px solid red;
    margin-top: 5px;
    position: relative;
}

div.regauto-rightbar label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    display: inline-block;
    //background-color: silver;
    width: 30%;
    padding: 0.3em 0.5em 0.2em 0.2em;
    vertical-align: bottom;
    text-align: right;
    //font-size: 1.1em;
    cursor: pointer;
}

div.regauto-rightbar input{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
    
    display: inline-block;
    width: 70%;
    vertical-align: bottom;
    padding: 0.3em 0 0.2em 0.2em;
    margin-top: 0.5em;
    border-radius: 2px;
    
    border: 1px solid #696969;
    
    -webkit-transition: border-color 0.3s, box-shadow 0.3s;
    -moz-transition: border-color 0.3s, box-shadow 0.3s;
    -o-transition: border-color 0.3s, box-shadow 0.3s;
    transition: border-color 0.3s, box-shadow 0.3s;
}

div.regauto-rightbar span.error{
    min-width: 200px;
    margin-top: 0.4em;
    //margin-bottom: 1em;
    padding: 0.2em;
}

div.regauto-rightbar input:hover{
    border-color: #8B8989;
    box-shadow: 0 0 5px #696969;
}

div.regauto-rightbar input:focus{
    border-color: #FF7F24;
    box-shadow: 0 0 8px #FF7F24;
}

div.regauto-rightbar input[type="submit"]{
    display: block; /*display для submit не работает*/
    width: 30%;
    margin: 1em 0 0em auto;
    padding: 0.3em 0em;
    color: #fff;
    text-decoration: none;
    font-size: 0.8em;
    //float: right;
    cursor: pointer;
    text-transform: uppercase;
    border: 1px solid #000;
    background-color: #008000;
    background-image:  -webkit-linear-gradient(bottom, #004000, #00a000);
    background-image: -webkit-gradient(linear, top, bottom, #004000, #00a000);
    background-image:  -moz-linear-gradient(bottom, #004000, #00a000);
    background-image:  -o-linear-gradient(bottom, #004000, #00a000);
    background-image:  -ms-linear-gradient(bottom, #004000, #00a000);
    background-image: linear-gradient(to top, #004000, #00a000);
    behavior: url(PIE.htc);
    -pie-background: linear-gradient(bottom, #004000, #00a000);
    
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 0 10px 3px #000;
    border-radius:  0%;
    
    transform: scale(1);
    -webkit-transform: scale(1);
    
    transition: border-radius 0.5s, transform 0.5s, box-shadow 0.1s;
    -webkit-transition: border-radius 0.5s, -webkit-transform 0.5s;
}

div.regauto-rightbar input[type="submit"]:hover{
    border-radius: 10%;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    //border-color: red;
}

div.regauto-rightbar input[type="submit"]:active{
    border-color: red;
    box-shadow: 0 0 10px 5px #800000;
}

div.regauto-rightbar form a{
    position: absolute;
    bottom: 0em;
    left: 0em;
    
    color: blue;
    text-decoration: underline;
}

div.regauto-rightbar a:hover{
    color: green;
    text-decoration: none;
}

div.regauto-rightbar a:active{
    
}

/*Стилизация HTML5-атрибута placeholder*/
/*Сhrome 11+, Safari 5.1+*/
input::-webkit-input-placeholder{
    color: rgba(103, 137, 219, 0.5);
}
input:focus::-webkit-input-placeholder{
    color: rgba(103, 137, 219, 0.3);
}

/*Firefox версии выше 19 - два двоеточия*/
input::-moz-placeholder{
    color: rgba(103, 137, 219, 1); 
}

input:focus::-moz-placeholder{
    color: rgba(103, 137, 219, 0.5); 
}

/*Firefox до версии 19.0 поддерживает запись с одним двоеточием :-moz-placeholder*/
input:-moz-placeholder{
    color: rgba(103, 137, 219, 0.5);
}

input:focus:-moz-placeholder{
    color: rgba(103, 137, 219, 0.3);
}

/* IE10+ */
input:-ms-input-placeholder{
    color: rgba(103, 137, 219, 0.5); 
}

input:focus:-ms-input-placeholder{
    color: rgba(103, 137, 219, 0.3); 
}
/*---------------------------Rigth-bar-------------------------------*/

/*-----------------------Элементы в main-----------------------*/