/*** ESSENTIAL STYLES ***/

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu li {

position: relative;

}

.sf-menu ul {

position: absolute;

display: none;

top: 34px;

  left: -288px;

z-index: 999;

}

.sf-menu > li {

float: left;

}

.sf-menu li:hover > ul,

.sf-menu li.sfHover > ul {

display: block;

}



.sf-menu a {

display: block;

}

.sf-menu ul ul {

top: 0;

left: 100%;

}





/*** DEMO SKIN ***/

.sf-menu {

float: none; text-align:center;

}

.sf-menu ul {

box-shadow: 2px 2px 6px rgba(0,0,0,.2);

  background: #ecf7ff;

  min-width: 180px;

  width: 744px !important;

  / no auto sub width for IE7, see white-space comment below */ padding: 0px 0;

  margin: 0 0;

  transition: all 600ms ease-in-out;

  text-align: left;

  float: left;

}



.sf-menu li{ display:block; float:left; padding:0 5px; margin:24px 0; }





.sf-menu li:first-child{ padding-left:0; }

.sf-menu li:last-child{ padding-right:0; }

.sf-menu li:last-child:after{ display:none; }

.sf-menu a {  position: relative;  display: block; text-align: center; background: none; border-radius: 30px; transition: .5s; color: #002c3a; border: none; padding: 0 13px; margin: 0; font-size: 15px; line-height: 18px; text-transform: uppercase;

  font-weight: 500; }

.sf-menu a.active{ position:relative; background: linear-gradient(to bottom, #014296, #00bbff); }



.sf-menu a.active:after{ content:""; width:12px; height:5px; position:absolute; right:0; left:0; bottom:-10px;  padding:0; margin:0 auto;  transition:all 500ms ease-in-out; }



.sf-menu a:after{ content:""; width:0%; height:2px; background: #4c4c4a; position:absolute; right:0; left:0; bottom:-5px;  padding:0; margin:0 auto;  transition:all 500ms ease-in-out; }

.sf-menu a:hover:after{ content:""; width:100%; height:1px; background: #4c4c4a; position:absolute; right:0; left:0; bottom:-5px;  padding:0; margin:0 auto;  transition:all 500ms ease-in-out; }



.sf-menu li a:hover{ color:#178ace;}

.sf-menu li.active a{ color: #c8c8c8;}

.sf-menu li ul li{ padding:0 !important; margin:0 !important; float:none; text-align:left; }

.sf-menu li ul li a{color: #000;

padding: 8px 15px;

transition: all 600ms ease-in-out;

display: block;

font-size: 14px;

line-height: 22px;

border-bottom: 1px solid #98dcff;

border-radius: 0;

margin: 0 0 7px;}

.sf-menu li ul li a:hover{ background:#9fdeff; color:#000; }











.sf-menu li { white-space: nowrap; /* no need for Supersubs plugin / *white-space: normal; / ...unless you support IE7 (let it wrap) */ -webkit-transition: background .2s; transition: background .2s; }

.sf-menu ul li { display:block; }

.sf-menu ul li ul{ position:absolute; left:0; right: 0; display:block; }



.sf-menu li:hover,

.sf-menu li.sfHover {

/* only transition out, not in */

-webkit-transform:all 600ms ease-in-out;

}

.sf-menu li a:hover{ transform:all 600ms ease-in-out; color:#178ace;}

.sf-menu li.active a{ color: #0372bb; }







@media screen and (min-width: 992px) {



.navbar-default.navbar-shrink .sf-menu ul{ margin: 0px 0 0 0; }

.navbar-default.navbar-shrink .sf-menu li ul li a{ padding:7px 40px; }

.navbar-default.navbar-shrink .sf-menu a { color:#FFF;transition:all 600ms ease-in-out; }

.navbar-default.navbar-shrink .sf-menu li a:hover{ color:#db5c0f;transition:all 600ms ease-in-out;}

.navbar-default.navbar-shrink .sf-menu li.active a{ color: #ffda95;  }

}





/*UI - Boxul*/



/*.sf-menu ul.Boxul { box-shadow: none; width: 1200px !important; background:#ad073b; background: linear-gradient(145deg, #ecf7ff 20%, #e6f3ff 70%); padding:0px !important; margin: 0 -200px!important; transition:all 600ms ease-in-out; border: 1px solid #7fd3ff; }*/



.sf-menu ul.Boxul { box-shadow: none; width: 1070px !important; background:#ad073b; background: linear-gradient(145deg, #ecf7ff 20%, #e6f3ff 70%); padding:0px !important; margin: 0 -200px!important; transition:all 600ms ease-in-out; border: 1px solid #7fd3ff; }

.sf-menu ul.Boxul2{ width: 470px !important;

  margin: 0 0px !important;

  left: -154px !important; }

.sf-menu ul.Boxul2 li a{ color: #000; } 

.sf-menu ul.Boxul .ulBox{width: 40%; float: left; margin: 0; height: ; background:linear-gradient(145deg, #ecf7ff 20%, #e6f3ff 70%); }

.sf-menu ul.Boxul .ulBox-middle{ width: 40%; float: left; background: linear-gradient(145deg, #ecf7ff 20%, #e6f3ff 70%); }

.sf-menu ul.Boxul .ul-img{ width: 20%; float: right; }

.sf-menu ul.Boxul .ul-img img{ width: 100%; }

.sf-menu ul.Boxul .ulBox li{}

/*.sf-menu ul.Boxul .ul-logo{ width: 80%; float: left; padding: 50px 0 0; margin: 0 auto; display: block; }*/

.sf-menu ul.Boxul .ul-logo{ width: 80%; float: left; padding: 30px 0 0; margin: 0 auto; display: block; }

.sf-menu ul.Boxul .ul-logo img{ width: 30%; margin: 0 auto; display: block; text-align: center; }

.sf-menu ul.Boxul .ulBox li b{font-size: 18px; color: #000c; padding: 10px 4px 4px 10px; display: block; border-bottom: 1px dotted #535353; line-height: 24px; margin: 0 0 15px; text-align: center;}

.sf-menu ul.Boxul .ulBox li a{ color: #000; font-size: 14px; line-height: 19px; letter-spacing: 0; transition: all 400ms ease-in-out; outline: none;transition:all 400ms ease-in-out; text-align: center; font-weight: 500;}

.sf-menu ul.Boxul .ulBox li a:hover{}

.sf-menu ul.Boxul .ulBox li a i{ opacity: 0.7; color: #7e1416; font-size: 13px; padding: 0 8px 0 0px; }





/************************************************************************************

MOBILE

*************************************************************************************/



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

.sf-menu a{ font-size:10px !important; font-weight:bold; }

}



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

.sf-menu li {

list-style-type:none; background:url(../images/divider1.png) 100% 50% no-repeat; padding:0 0 0 0; margin:0 0 0 0; float:left; font-size:15px; line-height:20px; font-family:'Open Sans', sans-serif; font-weight:600; line-height:40px; letter-spacing:1px;}

.sf-menu a {



color:#fff; text-decoration:none;padding: 0 12px; display:block; float:left; line-height:40px;  height:40px;



}

.sf-menu ul li a{ display:block; float:none; line-height:30px;  margin:0 0 1px 0; padding:0 0 0 15px; height:inherit; font-family:'Open Sans', sans-serif; font-weight:600; font-size:13px;}



}

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

.sf-menu > li{ width:100%; padding:0; border-top:1px solid #001f48;}

.sf-menu > li > a { font-size: 16px; line-height: 20px; background:none; text-align:center; }

/* nav-wrap */

#nav-wrap {

position: relative;

border:none;

box-shadow:none;

border-radius:3px;

bottom:0px;

}



/* menu icon */

#menu-icon {

background: url(../images/menu_icon.png) 50% 50% no-repeat;

display: block;

width: 48px;

height: 31px;

text-indent: -9999999em;

padding: 0;

overflow: hidden;

margin-left: 0;

cursor: pointer;

z-index: 1000;

position: absolute;

top: 5px;

 }

#menu-icon:hover {



}

.sf-menu > li:hover,

.sf-menu > li.sfHover { background:none; }

#menu-icon.active {

background:url(../images/menu_close.png) 50% 50% no-repeat;

}



/* main nav */

.sf-menu ul{display:block!important; visibility:visible!important; background:#2c58a8;}

.sf-menu {

clear: both;

position:absolute;

top:50px;

width:350px;

z-index: 10000;

padding: 0px;

background: #264aa2;        

display: none; /* visibility will be toggled with jquery */

font-family: 'Raleway', sans-serif; font-weight:600;

right:0;

}

.sf-menu li {

clear: both;

float: none;

margin:0;

background:none;

border:none;

}

.sf-menu li ul{ background:none; box-shadow:none;}

.sf-menu li:hover{ background:none !important;}

.sf-menu li ul li a{ background:none !important; }

.sf-menu li ul li a{ font-size: 8px !important; color: #aca4a4; line-height: 10px; text-align: center; }

.sf-menu li ul li a:hover{ background:#ccc !important;color: #000; text-decoration:underline;}

.sf-menu a,

.sf-menu ul a {

font-weight:normal;

background: none;

transition: all 300ms ease-in-out;

margin:0 0 1px 0;

padding:10px 5% !important;

display: block;

width:100%;

color: #fff;

border: none;

font-size:16px;

line-height:24px;

height:inherit;





}

.sf-menu a:hover{ text-decoration:underline;}

.sf-menu a:hover,

.sf-menu > li > a:hover{ background:#123078 !important; color:#fff; text-decoration:none; }

.sf-menu a.active {

background: none;

background-color:#123078;

color: #fff;

}



/* dropdown */

.sf-menu ul {

width: auto;

position: static;

display: block;

border: none;

background: inherit;

margin:0;



}

.sf-menu ul li {

margin: 3px 0 3px 15px;

}

.sf-menu ul li a{ background:none; font-size:13px !important; line-height:15px;} 

}



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

#menu-icon{ right:0 ; }

.sf-menu{ width:240px; right:0; }

.sf-menu a, .sf-menu ul a{ padding:7px 5% !important;  }

}





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

.sf-menu{ top:50px; width:400px; }

.sf-menu li{ letter-spacing:0; }

.sf-menu > li > a{ font-size:14px; line-height:16px; }

.sf-menu a, .sf-menu ul a{ padding:6px 10% !important; }

.sf-menu li ul li a{ font-size:14px !important; line-height:16px; }

#menu-icon{ right:105px; }





}

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

#menu-icon {



right: 80px !important;

top: 0px;



}

}

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

#menu-icon{ right:0; }  



} 

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

.sf-menu ul li a{ font-size:11px !important; line-height:14px;}

.sf-menu {

top: 32px;

width: 240px;

left: -15px;

}

.sf-menu li ul li a {

font-size: 10px !important;

line-height: 10px;

}

}



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

.sf-menu ul li a{ font-size:11px !important; line-height:14px;}

}











}