/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-two.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 .main_ayils_main {
    clear: both;
}
.sml_menu_spit{
  display:none;
}

.clearfix{clear:both; height:auto;}

.menu_outer {
    clear: both;
    width: 100%; position:relative;
}

.trigger {width:40px; height:40px; position:fixed; left:0; top:5px; background:#bbb; color:#fff; border-radius:0 5px 5px 0;
-webkit-transition: 0.5s;
-o-transition:  0.5s;
-moz-transition:  0.5s;
transition:  0.5s; display:none;
}
.trigger label {display:block; width:40px; height:40px; position:absolute; left:0; top:0; background:url(menu-icon.png) no-repeat center center; cursor:pointer;}
.trigger label span {position:absolute; left:-9999px;}

input.submenus,
input#toggle {position:absolute; display:none;}
.menuHolder {width:100%;  right:0; background:#fff; z-index:400;}
.menu {float:none; 
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}

.menu { background: #255a98; height: 48px; margin-bottom:0px; margin-top:7px;}

.menu ul {margin:0; padding:0; list-style:none; text-align:left;}

.menu li {display:block; position:relative;}

.menu ul ul {position:absolute; width:200px !important; left:-9999px; top:48px; padding:0px 0; z-index:20; border-radius:5px;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.menu ul ul ul {left:100%; top:auto; margin-top:-35px; border-radius:5px;}
.menu ul li.left > ul {left:auto; right:0; top:50px;}
.menu ul li.left ul li > ul {left:auto; right:100%; top:auto; margin-top:-35px;}

.menu > ul {margin:0 auto;}
.menu > ul > li {float:left; position:relative;}

.menu ul {background:#606060;}

.menu a {  color: #fff;
    display: block;
    font: 17px/48px Georgia,"Times New Roman",Times,serif;
    padding: 0 23px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    z-index: 10; background:#255a98;}

.menu a:hover{
  background-color:none;
}


.menu > ul > li > label {display:block; position:relative; width:100%; margin-top:-81px; height:48px; background: url(trans.gif); z-index:100;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul ul > li > label {display:block; position:relative; margin-top:-25px; width:100%; height:25px; background: url(trans.gif)); z-index:100;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul li.back {display:none;}

.menu li:hover > label {width:0;}
.menu li.left ul a {text-align:right; padding:0 20px 0 40px;}

.menu li:hover > a,
.menu ul li:hover > a { text-decoration:none; background: #9B9B9B;}

.menu ul li a.hassub { background: url(arrow-down.png) no-repeat right center;}
.menu li ul li a.hassub { background: url(arrow-right.png) no-repeat right center;}
.menu li.left ul li a.hassub {background: url(arrow-left.png) no-repeat left center;}
.menu ul li:hover > a.hassub {color:#000; text-decoration:underline;}
.menu li.left ul li:hover > a.hassub {color:#000;  text-decoration:underline;}

.menu > ul {*display:inline;}
.menu ul li ul li a { color: #fff; font: 17px/19px Georgia,"Times New Roman",Times,serif; padding: 8px 20px; text-align: left;}
.menu ul li ul li a:hover{color:#fff; background:#9B9B9B;}
.menu ul li ul li { border-bottom: 1px solid #FFFFFF;}
.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:-9999px; right:auto; opacity:0;}

.menu ul li:hover > ul {left:0; opacity:1; width:265px;}
.menu ul ul li:hover > ul {left:100%; opacity:1;}
.menu ul li.left:hover > ul {left:auto; right:0; opacity:1;}
.menu ul li.left ul li:hover > ul {left:auto; right:100%; opacity:1;}


/* for narrow screns, tablets and smartphones */

@media only screen and (max-width: 768px) {

.sml_menu_img_profile .profile_imgmain a img {
    height: 200px;
    width: 200px;
}

.sml_menu_spit{
  display:block;
}
.trigger{
  display:block;
}

.sml_menu_img_profile .user_name_div {
    top: 174px;
    position: absolute;
    text-align: center;
    z-index: 15; width:100%; background: url("http://linux.lexolutionit.com/spitfastnew/img/front/user-name-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.sml_menu_left {
    clear: both;
}
.left_menu_sml_new {
    clear: both;
    display: block;
}
.left_menu_li {
    width: 100%;
}
.sml_menu_left_img {
    float: left;
}
.sml_menu_left_img > img {
    height: 30px;
    width: 30px;
}

.sml_menu_left_txt {
    float: left;
    width: 83%; margin-top:2px;
}
.sml_menu_left_txt > a {
       color: #FFFFFF;
    font-family: calibri;
    font-size: 1em;
    font-weight: normal;
    padding-left: 10px !important;
    text-transform: capitalize;
}

.sml_menu_img_profile .user_name_div a {
   color: #FFFFFF;
    font-family: calibri;
    font-weight: normal;
    text-align: center;
    text-transform: capitalize; font-size: 1.2em;
}


.what_heading_left {
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    clear: both;
    color: #3F3F3F;
    float: none;
    font-size: 1em;
    font-weight: bold;
    height: 39px;
    line-height: 36px;
    padding-left: 13px;
    width: 100%;  margin-bottom: 10px;
    margin-top: 20px;
}

.left_menu_whats {
    clear: both;
    width: 100%;
}
.whats-mian_li {
    clear: both;
    width: 100%;
}
.whats_img-left {
    float: left;
    margin-top: 4px;
}
.whats_img-left > img {
    height: 25px;
    width: 25px;
}
.whats_txts-left {
    float: left;
    padding-left: 5px;
    width: 85%;
}
.whats_txts-left > a {
    font-family: calibri;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 16px;
    margin-top: 3px !important;
    text-transform: none;
}

/*.menuHolder {position:fixed; left:-280px; width:200px; top:0; bottom:0; height:auto; overflow-x:hidden; background:#bbb;
-webkit-transition: left 0.5s;
-o-transition: left 0.5s;
-moz-transition: left 0.5s;
transition: left 0.5s;
}*/
/*.menu {width:100%; text-align:center; position:absolute; z-index:100; background:#bbb; left:0; top:0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
-webkit-transition:0.5s;
-o-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
}*/

.menu ul {margin:0; padding:0; width:100%; list-style:none; text-align:left; border-radius:0; background:#bbb;}

/*.menu li {display:block; position:relative !important; width:100%; height:50px; border-top:1px solid #fff; border-bottom:1px solid #888; padding-top: 8px;}
.menu ul li.back {display:block;}

.menu ul ul {position:absolute; left:280px; top:-5000px; padding:0; z-index:0; opacity:1; background:#bbb;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul li.left > ul {left:280px; right:auto; top:-5000px;}
.menu ul li.left ul li > ul {left:280px; right:auto; top:-5000px; margin-top:0;}

/*.menu > ul {margin:0;}
.menu > ul > li {float:left; position:static;}

.menu ul {background:#bbb;}*/

/*.menu a {margin:0; padding:0;}*/
.menu > ul > li > a {line-height:50px;}
.menu > ul > li > label,
.menu ul ul > li > label {display:block; position:absolute; width:40px; height:40px; border:1px solid #fff; border-radius:4px; right:4px; background: #aaa url(arrow-right.png) no-repeat center center; cursor:pointer;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
}

.menu li:hover > label {width:40px;}
.menu li.left ul a {text-align:left; padding:0 40px 0 20px;}

/*.menu ul li:hover > a {color:#333; background:#bbb; text-decoration:none;}
.menu ul li a:hover,
.menu ul li a.hassub:hover {color:#000; background:#aba; text-decoration:underline;}*/

.menu ul li a.hassub,
.menu li.left ul li a.hassub,
.menu li ul li a.hassub {background:none;}

.menu ul li.back label {display:block; width:40px; height:40px; margin-top:4px; border-radius:4px; float:right; background: #9b9 url(arrow-left.png) no-repeat center center; z-index:100; cursor:pointer;}
.menu ul li.back span {display:block; height:18px; font:normal 12px/18px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; color:#333; width:180px; padding:5px 0 0 20px; white-space:normal; float:left; text-transform:uppercase;}

/*.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:280px; top:-5000px; right:auto; opacity:1;}


.menu ul li:hover > ul,
.menu ul ul li:hover > ul,
.menu ul li.left:hover > ul,
.menu ul li.left ul li:hover > ul {left:280px; right:auto; opacity:1;}

.menu ul li:hover > a.hassub,
.menu li.left ul li:hover > a.hassub {background:none; color:#333; text-decoration:none;}
.menu ul li a.hassub:hover,
.menu ul ul li a.hassub:hover,
.menu li.left ul li a.hassub:hover {color:#000; background:#aba; text-decoration:underline;}
*/

#submenu1:checked ~ .menu #p1,
#submenu2:checked ~ .menu #p2,
#submenu3:checked ~ .menu #p3,
#submenu4:checked ~ .menu #p4,
#submenu5:checked ~ .menu #p5,
#submenu6:checked ~ .menu #p6,
#submenu7:checked ~ .menu #p7,
#submenu8:checked ~ .menu #p8,
#submenu9:checked ~ .menu #p9,
#submenu10:checked ~ .menu #p10,
#submenu11:checked ~ .menu #p11 {top:0;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
}

#submenu1:checked ~ .menu,
#submenu2:checked ~ .menu,
#submenu7:checked ~ .menu,
#submenu8:checked ~ .menu {left:-280px;}

#submenu3:checked ~ .menu,
#submenu5:checked ~ .menu,
#submenu6:checked ~ .menu,
#submenu9:checked ~ .menu,
#submenu11:checked ~ .menu {left:-560px;}

#submenu4:checked ~ .menu,
#submenu10:checked ~ .menu {left:-840px;}

#toggle:checked ~ .wrapper {left:280px;} 
#toggle:checked ~ .wrapper .menuHolder {left:0;} 
#toggle:checked ~ .wrapper .trigger {left:200px;}

/*.menu ul li span {
    display: none;
}*/

/*.menu a{
  text-align: left; margin-right: 0;
}*/

/*.menu ul ul ul {left:280px; opacity:1;}

 .menu ul li ul li ul {
    margin-top: -128px;
}

.menu ul li ul {
    margin-top: -62px;
}

.menu ul li:hover ul{
  width:100%;
}

.menu ul li ul {
    margin-top: -62px;
}

}
.menu > ul > li:hover span {
    color: #FFFFFF;
    position: absolute;
    right: 8px;
    top: 10px;
    z-index: 11;
}*/