@charset "utf-8";
/* CSS Document */

    .menu{display:block;}
     
    .menu li{display: inline-block;
    position: relative;
    z-index:100; min-width:123px; text-align:center; vertical-align:middle;}
     
    .menu li a {
    text-decoration:none;
  padding:11px 10px;
    display:block;
    color:#ffffff; text-transform:uppercase; letter-spacing:-0.1px; 
     
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    }
     
    .menu li a:hover, .menu li:hover > a{color:#ffffff;
    background:#d5a4ba;}
	
	
	    /* hide the second level menu */
    .menu ul {display: none;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    top: 58px;
    left: 0px;
    background: #fef8fa;
    }
     
    /* display second level menu on hover */
    .menu li:hover > ul{ display: block;}
     
    .menu ul li {display:block;
    float: none;
    background:none;
    margin:0;
    padding:0;
    }
     
    .menu ul li a {font-size:13px; text-shadow:none;
    font-weight:normal;
    display:block;
    color:#5b739f;
    border-left:3px solid #fef8fa;  border-top:1px solid #e0e0e0; /*width: 150px;*/
    background:#fef8fa;}
     
    .menu ul li a:hover, .menu ul li:hover > a{
    background:#ebeef2;
    border-left:3px solid #7a92c0;
    color:#5b739f; 
    }
	
	
	    /* change level 3 menu positions */
    .menu ul ul {left: 150px;
    top: 0px;
    }
	.menu ul ul li a{ text-transform:none;}
	
	    .mobile-menu{display:none;
    width:100%;
    padding:11px;
    /*background:#3E4156;*/
    color:#ffffff;
    text-transform:uppercase;
   /* font-weight:600;*/
    }
    .mobile-menu:hover{background:#d5a4ba;
    color:#ffffff;
    text-decoration:none;
    }
	.mobile-menu img { height:18px; vertical-align:bottom; padding-right:5px;}
	

@media screen and (max-width: 1024px){
.menu li { min-width:106px;}
.menu li a { font-size:90%; padding:12px 0.15rem;}	
}

@media screen and (max-width: 960px){
.menu li { min-width:100px;}
.menu li a { font-size:88%; padding:13px .13rem; letter-spacing:-0.38px;}	
}
	
	    @media (max-width: 768px) {
     
    .menu{display:none; position:absolute; width:50%;}
	.menu br { display:none;}
     
    .mobile-menu{display:block;
    /*margin-top:100px;*/}
     
    #nav{margin:0;
   /* background:none;*/}
     
    #nav .menu li{display:block;
    margin:0;}
     
    .menu li a {background:#fef8fa; text-shadow:none; font-weight:bold;font-size:13px; padding:11px ;
    color:#5b739f;
    border-top:1px solid #e0e0e0;
    border-left:3px solid #fef8fa;}
     
    .menu li a:hover, .menu li:hover > a{
    background:#ebeef2;
    color:#5b739f;
    border-left:3px solid #7a92c0;}

     
    /*level 2 and 3 - make same width as all items*/
    .menu ul {display:block;
    position:relative;
    top:0;
    left:0;
    width:100%;}
     
    .menu ul ul {left:0; padding-left:10px;}
     
    }

