html {font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;}
     
body {background: #1B1D1E;
     
       font-family: Helvetica,Arial,sans-serif;
   margin: 8px;
    padding: 0;
     display: block;
      /* background: #fff;  #fff;display: block;*/
-webkit-tap-highlight-color: transparent; }
  
.menu {
   
    position: absolute;
    top:10%;
    left: 10%;

width: 80%;
    height: 80%;
    /*
    width: 60%;
    height: 60%;*/
    cursor: pointer;
   background-image: url('a6.jpg') ;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
   
   /* 
pointer-events: none;
    .menu:hover 
{display: block;}
 display: none;
    background-attachment:inherit;
     background: rgba(0, 0, 255, 0.3);
      background: rgba(33,33,33,0.6);
background-attachment:inherit
 scroll;background: rgba(255, 0, 0, 0.0);
      *
.menu:hover 
{ 
background: #fff;
opacity: 0.9; /* Полупрозрачность элемента 
}
*/  
   -webkit-animation: fade-in 0.2s;
    -moz-animation: fade-in 0.2s;
    -ms-animation: fade-in 0.2s;
    -o-animation: fade-in 0.2s;
    animation: fade-in 0.2s;     }


.menu:hover .menu_2
{ 
 background: rgba(0, 0, 0, 0.6); 
transition-timing-function: linear;
    transition-duration: 4s;
}
  
.menu_2
 { display: block;
    background: rgba(0, 0, 0, 0.0); 
   transition-timing-function: linear;
    transition-duration: 5s;
 width: 100%;
    height: 100%;
     margin: 0 auto;
 /*
width:600px; pointer-events: none;

*/}



.menu:hover .menu_1
{ left: 0%;
bottom: 120px;
 transition-timing-function: linear;
    transition-duration: 4s;
opacity: 1;


   

    }

.menu_1
 {  position: absolute;
    margin: 0 auto;
    bottom: -20px;
    background: rgba(33,33,33,0.6);
 transition-timing-function: linear;
    transition-duration: 4s;
    opacity: 0;   
 padding: 3% 0% 3% 0%;
 width: 100%;
 /*
-webkit-transition: opacity 3.4s;
 visibility: hidden;
 visibility: visible;
width:600px; pointer-events: none;
background: rgba(0, 0, 0, 0.6);
*/}

  
.menu_1_1 {
    color: #ffffff;
    font-size: 16px;
    line-height: 45px;
    width: 35%;
    height: 45px;
    white-space: nowrap;
    border: 1px solid #fff;
    margin: 10px 20px;
    position: relative;
    pointer-events: auto;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background: rgba(33,33,33,0.2);
    -webkit-transition: background-color 0.3s,color 0.3s;
    -moz-transition: background-color 0.3s,color 0.3s;
    -ms-transition: background-color 0.3s,color 0.3s;
    -o-transition: background-color 0.3s,color 0.3s;
    transition: background-color 0.3s,color 0.3s;}





.menu_1_1:hover 
{background-color:#fff;
    color:#212121;
     font-size: 18px;
letter-spacing: 0.0px; 
font-family:  "Times new roman";

}
/*font-weight: 600; 
color:#fff;

*/

a {text-decoration: none;
color:#fff;
   background-color: transparent;  }

 
.animation { animation-name: banner-animation;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;}
    
  .menu, .menu_1_1 
   { -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;}


 .menu, .menu_1, 
 .menu_1_1
  {  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;}
 
 .menu 
{-webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;}
   

 .menu, .menu_1 
    { -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;}


.menu_1 {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;}

 
.menu, .menu_1_1 {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;}