/* ------------ обычный вид ----------- */

html {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-image: url("../../_index/gaz_fon3.jpg");
 }

*, *::before, *::after {
  box-sizing: inherit;
 }

a {
 color: black;
}

img {
  max-width: 100%;
  height: auto;
  }

.konteiner {
  width: 96%;
  max-width: 1440px;
  margin: 0 auto;
  clear: both;
  /*border: 1px solid #000000;*/
  }

.blok_50x50x100 {
 float: left;
 padding: 0px;
 margin: 0px;
 width: 50%;
 border: 0;
 box-sizing: border-box;
  /*border: 1px solid red;*/
 }

.center {
  text-align: center;
  align: center;
}

.pad_30x20x0 {
 padding: 30px 0;
}

.bloc_pustota {
 /*display: grid;*/
 clear: both;
 padding: 0px;
 margin: 0px;
 width: 100%;
}

.bloc_75x75x100 {
 display: inline-block;
 float: left;
 padding: 0px 1%;
 width: 75%;
 box-sizing: border-box;
 }

.bloc_25x25x100 {
 display: inline-block;
 float: left;
 /*float: right;*/
 padding: 0;
 margin: 0;
 width: 25%;
 box-sizing: border-box;
}

.bloc_25x80x100 {
 display: inline-block;
 float: left;
 padding: 0;
 margin: 0;
 width: 25%;
 box-sizing: border-box;
}

.doska {
  width: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
   border-radius: 10px;
  background: url(../../_index/boltik.png) no-repeat top right, url(../../_index/boltik.png) no-repeat bottom right, url(../../_index/boltik.png) no-repeat top left, url(../../_index/boltik.png) no-repeat bottom left, url(../../_index/gaz_fon4.jpg);

  padding: 0;
  margin: 0;
  box-shadow: 4px 4px 3px #989898;
  box-sizing: border-box;
}

.doska h2 {
  margin-left: 50px;
}

.knopka {
    display: inline-block;
    float: left;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-decoration: none;
    border: 2px solid #808080;
    background-color: #e9e9e9;
    width: 40%;
    margin: 10% 0 0 10%;
    padding: 8px 0;
    box-shadow: 3px 3px 0px #A9A9A9;
    box-sizing: border-box;
    }
.knopka:hover {
    border: 2px solid #696969;
    background-image: linear-gradient(#666666, #FFFFFF);
    }
.knopka:active {
    background-image: linear-gradient(#444444, #FFFFFF);
    box-shadow: -2px -2px 0px #A9A9A9;
    }


.knopka2 {
  display: inline-block;
  float: left;
  text-align: center;
  font-weight: bold;
  margin: 6px;
  padding: 1%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  border: 1px solid #808080;
  background-color: #cccccc;
  width: 80%;
    transition: all .3s ease-out;
    box-shadow: 3px 3px 0px #666666;
 text-decoration: none;
 color: #2c2c2c;
}
.knopka2:hover {
border: 1px solid #4b4a4a;
    background-image: linear-gradient(#807F7F, #FFFFFF);
 color: #303030;
}
.knopka2:active {
border: 1px solid #000000;
    background-image: linear-gradient(#808080, #FFFFFF);
    box-shadow: -1px -1px 0px #666666;
    color: #000000;
    text-shadow: 1px  1px  2px  #FFFFFF;
}

.knopka3 {
  display: inline-block;
  float: right;
  /*text-align: center;*/
  font-weight: bold;
  font-style: italic;
  margin: 1% auto;
  padding: 4px 0 4px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  border: 1px solid #252C76;
  background-color: #e9e9e9;
  width: 65%;
    box-shadow: 3px 3px 0px #666666;
 text-decoration: none;
 /*color: black;*/
}
.knopka3:hover {
  border: 1px solid #4b4a4a;
  background-color: #89898B;
  text-shadow: 0  0  10px  white;
}
.knopka3:active {
  border: 1px solid #000000;
  background-color: #757577;
  box-shadow: -1px -1px 0px #666666;
  text-shadow: 0  0  15px  white;
}

.knopka4 {
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-decoration: none;
    border: 2px solid #808080;
    background-color: #e9e9e9;
    width: 80%;
    padding: 6px 0;
    box-shadow: 3px 3px 0px #A9A9A9;
    box-sizing: border-box;
    position: relative;
    bottom: 10px;
    color: black;
         }
.knopka4:hover {
    border: 2px solid #696969;
    background-image: linear-gradient(#666666, #FFFFFF);
}
.knopka4:active {
    background-image: linear-gradient(#444444, #FFFFFF);
    box-shadow: -2px -2px 0px #A9A9A9;
                }


.pict_knop {
   display: inline-block;
   box-sizing: border-box;
   text-align:center;
   margin: 2% 2.2% 2% 2.2%;
   width: 20%;
  /* border: 1px solid red;*/
 }
.pict_knop IMG {
  border-radius: 10px;
  box-shadow: 4px 4px 5px #666666;
}
.pict_knop IMG:active {
  box-shadow: -2px -2px 3px #666666;
}
.pict_knop img:hover {
    transition: transform 0.2s linear;
    transform: scale(1.07);
}


                   /* ---- обратная связь ---- */
.obr_svyaz {
  padding: 3% 3%;
  margin: 14% 0;
  width: 100%;
  border-radius: 10px;
  background: #DCDCDC;
  box-shadow: 4px 4px 5px #666666;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

input[type=text], textarea {
   width: 90%;
}
input[type=number] {
   width: 12%;
}