/*下拉菜单翻转*/

.navmenu > li {
    display:inline-block;padding:11px 0;
    float: left;
    position: relative;
}
.navmenu a {
    color: #808080;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
}

/* onhover styles */
.navmenu li:hover
{
    /*background: -moz-linear-gradient( #cbc7ee, #d0cee1);
    background: -ms-linear-gradient( #cbc7ee, #d0cee1);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,  #cbc7ee), color-stop(100%, #d0cee1));
    background: -webkit-linear-gradient( #cbc7ee, #d0cee1);
    background: -o-linear-gradient( #cbc7ee, #d0cee1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #cbc7ee', endColorstr='#d0cee1');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=' #cbc7ee', endColorstr='#d0cee1')";
    background: linear-gradient( #cbc7ee, #d0cee1);*/
    background: -moz-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background: -ms-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.7)), color-stop(100%, rgba(218,218,218,0.7)));
    background: -webkit-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background: -o-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0.7)', endColorstr='rgba(218,218,218,0.7)');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=' rgba(255,255,255,0.7)', endColorstr='rgba(218,218,218,0.7)')";
    background: linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background-clip:padding-box;
    border-bottom: 2px solid rgba(255,255,255,0.5);
    border-top: 2px solid rgba(218,218,218,0.5);
    padding:0;
}
.navmenu li:hover a>span{display:none;}
.navmenu li:hover a>img{display: block;}

.navmenu li:hover > a {
    color: #644836;
    font-size: 18px;
    font-weight:700;
}

/* navOpen styles */
.navOpen {
    left: 0;
    max-height: 0;

    position: absolute;
    top: 100%;
    z-index: 0;
    visibility: hidden;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.nav .navOpen li {
    width: 150px;
    text-align: left;
    display: block;
    background: -moz-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background: -ms-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.7)), color-stop(100%, rgba(218,218,218,0.7)));
    background: -webkit-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background: -o-linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0.7)', endColorstr='rgba(218,218,218,0.7)');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=' rgba(255,255,255,0.7)', endColorstr='rgba(218,218,218,0.7)')";
    background: linear-gradient( rgba(255,255,255,0.7), rgba(218,218,218,0.7));
    background-clip:padding-box;
    border-bottom: 2px solid   rgba(255,255,255,0.7);
    border-top: 2px solid rgba(218,218,218,0.7);
    padding:9px 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}

.navOpen li a {
    font-size: 16px!important;
}



.navOpen li:hover > a {
    color: #644836!important;
    font-size: 16px;
}
.navmenu > li:hover .navOpen, .navmenu > li:focus .navOpen {
    max-height: 2000px;
    visibility: visible;
    z-index: 10;
}
.navmenu > li:hover .navOpen li, .navmenu > li:focus .navOpen li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects */
.navmenu li:hover .navOpen li:nth-child(1) {
    border-radius: 15px 0 0;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.navmenu li:hover .navOpen li:nth-child(2) {

    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.navmenu li:hover .navOpen li:nth-child(3) {

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.navmenu li:hover .navOpen li:nth-child(4) {

    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.navmenu li:hover .navOpen li:nth-child(5) {

    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.navmenu li:hover .navOpen li:nth-child(6) {

    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.navmenu li:hover .navOpen li:nth-child(7) {

    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.navmenu li:hover .navOpen li:nth-child(8) {

    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.navOpen li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.navOpen li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.navOpen li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.navOpen li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.navOpen li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.navOpen li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.navOpen li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.navOpen li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}