#FlyoutTest {
 position: absolute;
 width: 40px;
 height: 230px;
 top: 170px;
 left: 0;
 background: #Fff;
 opacity:0.9;
 border: 1px solid grey;
 border-left: 0;
 border-radius: 0 5px 5px  0;
 box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
 transition: width 0.5s ease-in;
 transition-delay: 0.1s;
 z-index: 1000
}
#FlyoutTest:hover {
 width: 350px;
 transition: width 0.5s ease-in;
 transition-delay: 0.1s; 
}
#FlyoutContent {
 padding: 25px;
 opacity: 0;}

#FlyoutTest:hover #FlyoutContent {
 opacity: 1;
 transition: opacity 0.5s ease-in; 
 transition-delay: 0.6s;
}
#FlyoutContent h3 {
 color: white;
 padding-bottom: 50px
}
#FlyoutContent ul li {
 list-style: none;
 background: rgba(0, 0, 0, 0.3);
 padding: 10px 15px;
 border-radius: 3px;
 margin-bottom: 5px;
 text-align: center;
}
#FlyoutContent ul li:hover {
 background: rgba(0, 0, 0, 0.5);
}
#FlyoutContent ul li a {
 color: white;
 text-decoration: none;
 text-align: center;
}
#FlyoutContent ul li a:hover {
 color: yellow;
}




@media screen and (max-width: 1200px) 
{
  .Hide1200
  {
    display: none;
  }
}
@media screen and (max-width: 768px) {

.Hide768
  {
    display: none;
  }
  
#FlyoutTest 
{
  position: absolute;
}
#FlyoutTest:hover {
 width: 250px;
 transition: width 1s ease-in;
 transition-delay: 0.1s;
}

#FlyoutTest {
 height: 230px;
 top: 130px;
}