#fasad {
        background-color: rgb(230, 230, 230); z-index: -7 ; position: absolute; top:0%; width: 100%;}

#p8{position: absolute;top: 43px;}
    @media (max-width:1000px){#p8 { width:100%;  z-index: 4;   } }
    @media (min-width:1000px){#p8 { width:60%; right:20%; left:20%; max-height: 200px;  z-index: 4; } }  
    @media (min-width:1500px){#p8 { width:40%; right:30%; left:30%;  max-height: 200px;  z-index: 4; } }  

    @media (max-width:500px){#p3 { width: 0%;} }
    @media (min-width:1000px){#p3{ width: 20%;} }  
    @media (min-width:1500px){#p3 { width: 30%;} }  

#p5 {
    background-color: rgb(230, 230, 230); 
    line-height: 2.0; 
    font-family: Open Sans, sans-serif;
    font-weight: 100;
    letter-spacing: 0em;
    max-width: 1000px;
    margin-left:auto;
   margin-top: 100px;
   margin-right:auto;
    }


   
/*    
body      { font-size:62.5%; }
#header   { font-size:.9em; }
#main     { font-size:1.1em; }
*/    

   
    @media screen and (max-width: 1170px) {
.l1 {visibility: hidden; display: none;}}
    @media screen and (min-width: 1170px) {
.l2 {visibility: hidden; display: none;}}  
    @media screen and (max-width: 1000px) {
.k1 {visibility: hidden; display: none;}} 
    @media screen and (min-width: 1000px) {
.k3 {position: fixed;}}
    @media screen and (max-width: 1500px) {
.l4 {visibility: hidden; display: none;}} 
      

    
    #zagolov2 
    {width:100%; 
    position: fixed; 
    text-align:  center;
    line-height: 10%;
    }
        
    @media screen and (max-width: 1500px) {
.vid {visibility: hidden; display: none;}}    
  
a.button2 
    { cursor: pointer;
    background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,.0) 50%, rgba(0,0,0,.3)), linear-gradient(#d77d31, #fe8417, #ffeb3b);
    box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;}
a.button2:hover {background-size: 140% 100%, auto;}
a.button2:active {
  top: 1px;
  color: #ffdead;
  box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, 0 10px 10px -9px #000;}

button.button6 
    { cursor: pointer;
    color: #104840fc;
    padding: .8em 2em;
    
    box-shadow: inset #bbc 0 -1px 1px, inset 0 15px 15px #ad0, #bbc 0 0 0 1px, #54082f 0 10px 15px -10px;
    
    /*background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,.0) 50%, rgba(0,0,0,.3)), linear-gradient(#d77d31, #fe8417, #ffeb3b);
    box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #83f5c5 0 10px 15px -10px;*/
    transition: 0.2s;}
button.button6:hover {background-size: 140% 100%, auto;}
button.button6:active {
    top: 1px;
    color: #ffdead;
    box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, 0 10px 10px -9px #000;}  

.button12 {
  /*  color: rgba(255,255,255,.9);*/
    padding: .7em 0;
    border-radius: 6px;
    padding-left:2%; padding-right:2%;
    background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
    box-shadow: inset rgba(255,255,255,.5) 1px 1px;}

.modal11 {z-index: 15; 
    background-color: blue; 
    position: relative;  
    top: 0%; 
    text-align: center;font-family: ‘Enriqueta’, arial, serif; 
    font-weight: bold;}
    
    @media (max-width:1170px) { 
.modal11  { font-size: 15pt; }}
  
.modal12 {z-index: 15; 
    background-color: blue; 
    top: 0%; 
    text-align: center;font-family: ‘Enriqueta’, arial, serif; 
    font-weight: bold;}
    
    @media (max-width:1170px) { 
.modal12  { font-size: 15pt; position: relative;}}
    @media (min-width:1170px) { 
.modal12  { position: absolute;}}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: gray;
    opacity: 0.90;
    z-index: 10;}

input{cursor: pointer;}

.wrapper { width: 320px; height: 100px; }
    
    @media (max-width:1170px) { 
#wrapper { width: 300px; margin-left: auto; margin-right: auto;} }

    @media (max-width:1170px) { 
.modal6  { font-size: 15pt; width: auto;
       z-index: 15; 
    position: relative;          
    top: 0%;  background: #60a3d8 linear-gradient(#cddc39, #009688 50%, #f44336);
    text-align: center; font-family: ‘Enriqueta’, arial, serif; 
    font-weight: bold; 
}}
    @media (min-width:1170px) { 
.modal6  {
    max-width: 800px;
        z-index: 15; 
    position: fixed;          
    top: 0%;  background: #60a3d8 linear-gradient(#cddc39, #009688 50%, #f44336);
    text-align: center; font-family: ‘Enriqueta’, arial, serif; 
    font-weight: bold;}}
  


BODY {margin: 0; height: 0px; }


button.button6 
{ cursor: pointer;
  color: #104840fc;
  padding: .8em 2em;
 box-shadow: inset #bbc 0 -1px 1px, inset 0 15px 15px #ad0, #bbc 0 0 0 1px, #54082f 0 10px 15px -10px;
  /*background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,.0) 50%, rgba(0,0,0,.3)), linear-gradient(#d77d31, #fe8417, #ffeb3b);
  box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;*/
  transition: 0.2s;
}
button.button6:hover {
  background-size: 140% 100%, auto;
}
button.button6:active {
  top: 1px;
  color: #ffdead;
  box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, 0 10px 10px -9px #000;
}

button.button8 
{ cursor: pointer;
  color: #104840fc;
  padding: .8em 2em;
  box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;
  transition: 0.2s;
}
button.button8:hover {
  background-size: 140% 100%, auto;
}
button.button8:active {
  top: 1px;
  color: #ffdead;
  box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, 0 10px 10px -9px #000;
}

a.button18{ 
 position: fixed;
 top: 50%;
 left: 50%;
transform: translate(-50%, -50%); z-index:100; color: rgb(2,38,23);  
    cursor: pointer;
  padding: .8em 2em;
box-shadow: inset #ebab00 0 -1px 1px, inset 0 15px 15px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;
 text-decoration: none;
  text-align: center;
}







a.zadat{ 
cursor: pointer;
padding: .1em 1em;
box-shadow: inset #bbc 0 -1px 1px, inset 0 15px 15px #ad0, #bbc 0 0 0 1px, #54082f 0 10px 15px -10px;
}

input.zadat{ 
cursor: pointer;
padding: .1em 1em;
box-shadow: inset #bbc 0 -1px 1px, inset 0 15px 15px #ad0, #bbc 0 0 0 1px, #54082f 0 10px 15px -10px;
font-weight: 600;
}

img.zadat{ 
cursor: pointer;
padding: .1em 1em;
box-shadow: inset #bbc 0 -1px 1px, inset 0 15px 15px #ad0, #bbc 0 0 0 1px, #54082f 0 10px 15px -10px;
}

button.zadat{ 
cursor: pointer;
padding: .1em 1em;
box-shadow: inset #bbc 0 -1px 1px, inset 0 15px 15px #ad0, #bbc 0 0 0 1px, #54082f 0 10px 15px -10px; font-weight: 600;
}
img {
filter: alpha(Opacity=80); /* Полупрозрачность для IE */
    opacity: 0.8;}

   .krug {
    background: #f2f6f8; /* Цвет фона */
    border: 1px solid #7a7b7e; /* Параметры рамки */
    width: 60px; /* Ширина кнопки */
    height: 60px; /* Высота */
    border-radius: 30px;
   }



@media (min-width:1169px){
    .photo {
    display: inline-block;
    position: rel ative;
   }
   }
  @media (min-width:1169px){ 
   .photo:hover::after {
    content: attr(data-title);
    position: absolute;
    z-index: 100;
    background: rgba(255,255,230,0.9);
   font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid #333;
   }  
  }