﻿


@-webkit-keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translate3d(0,50%,0);
    transform:translate3d(0,50%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes fadeInRight{
    0%{opacity:0;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}

}
@keyframes fadeInRight{
    0%{opacity:0;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}

}

@-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}


@media (min-width: 768px) {

.BackMenu,.Menu{
    background:#2b7cb7;
    font-size:13px;
}
.Menu,.Menu ul,.Menu ul li,.Menu a{
    height:70px;
    line-height:70px;
}
.Menu ul{
    list-style:none;
    padding:0;
    margin:0;
}
.Menu ul li{
    position:relative;
    min-width:80px;
    text-align:center;
    float:right !important;
}
.Menu a{
    display:block;
    text-decoration:none;
    color:#fff;
}
.MenuIcon{
    display:none;
}

/*  submenu   */

.Menu ul ul{
    display:none !important;
    position:absolute;
    top:100%;
    right:0px;
    background:#eee;
    height:auto;
    z-index:100;
}
.Menu ul ul li{
    position:relative;
    min-width:130px;
    text-align:center;
}
.Menu ul ul ul{
    right:100%;
    top:0px;
}
.Menu ul ul li{
    height:40px;
    line-height:40px;
}
.Menu ul ul li a{
    display:block;
    text-decoration:none;
    color:#000;
    line-height:40px;
    height:40px;
    width:100%;
    border-bottom:#fff solid 1px;

}
.Menu li span{
    display:none;
}

.Menu li:hover>ul{
    display:block !important;
    animation-name:fadeInUp !important;
    animation-duration:0.5s;
}
.Menu ul ul li:hover>ul{
    display:block !important;
    animation-name:fadeInRight !important;
    animation-duration:0.5s;
}
}

@media (max-width: 780.99px){
.MenuIcon{
    width:100%;
    background:#2b7cb7;
    display:block;
    height:60px;
}

.MenuIcon span{
    display:inline-block;
    height:15px;
    float:left !important;
    width:15px;
    margin-right:2px !important;
    margin-bottom:2px !important;
    background:#fff;
}
.InMenuIcon:hover>span{
    background:#ff6a00;
}
.InMenuIcon{
    display:inline-block;
    margin-left:20px;
    margin-top:10px;
    width:40px !important;
    height:40px !important;
    float:right;
}
.BackMenu {
    background:#eee;
    width:100%;
    float:right;

}
.Menu{
    display:none;
    background:#eee;
    width:100%;
    font-size:13px;
    float:right;
    animation-name:fadeInRight !important;
    animation-duration:0.5s;
}
.Menu ul{
    width:100%;
    list-style:none;
    float:right;
    padding:0;
    margin:0;
}
.Menu ul li{
    min-height:40px;
    width:100%;
    text-align:right;
    float:right;
    display:block;
    position:relative;

}
.Menu a{
    width:100%;
    height:40px;
    line-height:40px;
    display:block;
    text-decoration:none;
    color:#000;
    border-bottom:#fff solid 1px;
    padding-left:20px;
    padding-right:20px;
    background:#eee;

}
.Menu li span{
    position:absolute;
    top:10px;
    display:inline-block;
    font-size:14px;
    left:20px;
    border:#666 solid 1px;
    border-radius:50%;
    line-height:7px;
    padding:6px;
    cursor:pointer;
}
.Menu li span:hover{
    background-color:#2b7cb7;
    color:#fff;
}

.Menu ul ul,.Menu ul li ul{
    float:right;
    width:100%;
    display:none;
    position:relative;
    background:#eee;
    height:auto;
}
.Menu li ul a{
 padding-right:30px !important; 
}
.Menu li ul ul a{
 padding-right:40px !important; 
}
}
