/**************************************************/
/*** SUPERFISH Flyout menu ***/

/* ********************************************************************** */
/* NON RESPONSIVE LAYOUT: LEVEL 1 menu
/* ********************************************************************** */
nav#main_navigation > ul li.main_nav_1{ /*padding-right: 20px;*/}
nav#main_navigation > ul li.main_nav_1:first-child{/*padding-right: 20px;*/}
nav#main_navigation > ul li.main_nav_1_cur{ /*padding-right: 20px;*/}
nav#main_navigation > ul li.main_nav_1_act{ /*padding-right: 20px;*/}


/* ********************************************************************** */
/* MENU BASIC
/* ********************************************************************** */

/*** Core Superfish Menu Styles ***/

.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em;
    /* left offset of submenus need to match (see below) */ }
.sf-menu li {
    float: left;
    position: relative; }
.sf-menu li:hover {
    visibility: inherit;
    /* fixes IE7 'sticky bug' */ }
.sf-menu a {
    display: block;
    position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
    left: 0;
    top: 2.5em;
    /* match top ul list item height */
    z-index: 99; }

/* ********************************************************************** */
/* /*** ESSENTIAL STYLES  sf-menu ***/
/* ********************************************************************** */

.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu li {
    position: relative;
}
.sf-menu ul {
    position:absolute;
    top_: 100%; /* needed to fix bug with wrong positioning of sub ul */
    left_: 0; /* needed to fix bug with wrong positioning of sub ul */
    z-index: 99;
}

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}

.sf-menu ul ul {
    top: 0;
    left: 100%;
}


/* ********************************************************************** */
/* /*** ESSENTIAL STYLES  main_navigation ul li sub menu***/
/* ********************************************************************** */

/**************************************************/
/*** Main Navigation ***/

/*** Level 1 normal***/
nav#main_navigation{font-family: 'Roboto', sans-serif; font-weight: bold; text-transform: uppercase; display:table; /*width:100%;*/ margin-top:3px;  border-collapse: collapse;} /* box specification in main style sheet file (ppi_page_layout.css) */
nav#main_navigation > ul{display:table-row;}
nav#main_navigation > ul li.main_nav_1{ background-color: white;  width: 20%; border-right: 1px solid #E3E5E4;/*width:150px;*/display:table-cell; /*padding-right: 20px;*/}
nav#main_navigation > ul li.main_nav_1:first-child{ width: 20%;/*width:150px;*/border-left:none;/*padding-right: 20px;*/}
nav#main_navigation > ul li.main_nav_1 > a{  color: #007095; display:block;  text-align:center; padding: 64px 34px 84px 34px; font-size: 1.0em; text-decoration: none;   font-weight: normal; height: 55px;}
nav#main_navigation > ul li.main_nav_1 > a:hover{color:#007095;  background-repeat: repeat-x; background-color:#A6C7D9;  font-weight: bold;}

/*** Level 1 CURRENT and ACTIVE***/
nav#main_navigation ul li.main_nav_1_act {  background-color: white; width: 20%; border-right: 1px solid #E3E5E4;/*width:150px;*/  /*float:none; padding-right: 20px;*/}
nav#main_navigation ul li.main_nav_1_act > a {color: #007095;display:block;  text-align:center; padding: 64px 34px 84px 34px;  font-size: 1.0em; text-decoration: none;    font-weight: bold;height: 55px;  font-weight: bold;}
nav#main_navigation ul li.main_nav_1_act > a:hover {background-color:#A6C7D9; color: #007095;display:block;  text-align:center; padding: 68px 34px 84px 34px;  font-size: 1.0em; text-decoration: none;    font-weight: bold;height: 55px;}
nav#main_navigation ul li.main_nav_1_act:first-child {width: 20%;/*width:150px;*/border-left:none;}

nav#main_navigation ul li.main_nav_1_cur {  background-color: white;width: 20%;  border-right: 1px solid #E3E5E4;/*width:150px;*/  /*float:none; padding-right: 20px;*/}
nav#main_navigation ul li.main_nav_1_cur > a{color: #007095; display:block;  text-align:center; padding: 64px 34px 84px 34px;  font-size: 1.0em; text-decoration: none;    font-weight: bold;height: 55px;}
nav#main_navigation ul li.main_nav_1_cur > a:hover{background-color:#A6C7D9; color: #007095; display:block;  text-align:center; padding: 68px 34px 84px 34px;  font-size: 1.0em; text-decoration: none; font-weight: bold; height: 55px;}
nav#main_navigation ul li.main_nav_1_cur:first-child {width: 20%;/* width:150px; */border-left:none;}

nav#main_navigation ul.bottom_level {margin-top: 113px; width: 100%;}

/*** Level 2 ***/

.main_nav_2{ width: 100%;  text-transform: uppercase; padding:0; border:1px solid #E3E3E3 ; 
border-width:0 0 1px 0; font-size: 12px;  width:100%; /*min-width: 150px;*/}
.main_nav_2 ul{margin:0; padding:0; background-color: #E9E9E9;}
.main_nav_2 a{ font-weight:bold; background-color: #E9E9E9; color: #121970; padding:8px 0px 5px 0px; font-weight:bold; margin-top: 0px; text-align: center; } .main_nav_2 a:hover{background-color: #87B50E;}
.main_nav_2 a:hover span.left{background-color: #87B50E;}
.main_nav_2 a:hover span.right{}

.main_nav_2_act{z-index:2; padding:0; border:1px solid #E3E3E3 ; border-width:0 0 1px 0;font-size: 12px; 
width:100%; /*width:150px;*/}
.main_nav_2_act ul{margin:0; padding:0; background-color: #E9E9E9;}
.main_nav_2_act a{ font-weight:bold; background-color: #E9E9E9; color: #121970; padding:8px 0px 5px 0px; font-weight:bold; margin-top: 0px; text-align: center;}

.main_nav_2_cur{z-index:2; padding:0; border:1px solid #E3E3E3 ; border-width:0 0 1px 0;font-size: 12px; 
width:100%;/*width:150px;*/}
.main_nav_2_cur ul{margin:0; padding:0; background-color: #E9E9E9;}
.main_nav_2_cur a{  font-weight:bold; background-color: #E9E9E9; color: #121970; padding:8px 0px 5px 0px; font-weight:bold; margin-top: 0px; text-align: center;}
.main_nav_2:first-of-type{border-top: 1px solid white; }
.main_nav_2_cur:first-of-type{border-top: 1px solid white;}
.main_nav_2_act:first-of-type{ border-top: 1px solid white;}

.wrap nav ul li ul li:hover {
    padding-left: 5px;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s; }

/* Level 3*/
#main_navigation ul li.lev_3{text-transform: capitalize; background-image: url(../images/arrow-bullet.png); background-repeat: no-repeat; float: left; }
#main_navigation ul li.lev_3 a{text-align: left; padding-left: 50px; }




/*Menu colors*/

nav#main_navigation ul.top_level li:nth-child(1) a { background-position: 55px 110px; background-image: url(../images/arrow_orange.png); background-repeat: no-repeat; color: rgb(251,190,94); }
nav#main_navigation ul.top_level li:nth-child(2) a { background-position: 55px 110px; background-image: url(../images/arrow_green.png); background-repeat: no-repeat; color: rgb(136,195,120); }
nav#main_navigation ul.top_level li:nth-child(3) a { background-position: 55px 110px; background-image: url(../images/arrow_red.png); background-repeat: no-repeat; color: rgb(237,109,132); }
nav#main_navigation ul.top_level li:nth-child(4) a { background-position: 55px 110px; background-image: url(../images/arrow_blue.png); background-repeat: no-repeat; color: rgb(63,192,240); }
nav#main_navigation ul.top_level li:nth-child(5) a { background-position: 55px 110px; background-image: url(../images/arrow_grey.png); background-repeat: no-repeat; color: rgb(124,123,123); }

nav#main_navigation ul.top_level li:nth-child(1) ul.bottom_level li a { background-color: rgb(251,190,94); color: white; }
nav#main_navigation ul.top_level li:nth-child(2) ul.bottom_level li a { background-color: rgb(136,195,120);color: white; }
nav#main_navigation ul.top_level li:nth-child(3) ul.bottom_level li a { background-color: rgb(237,109,132); color: white;}
nav#main_navigation ul.top_level li:nth-child(4) ul.bottom_level li a { background-color: rgb(63,192,240); color: white;}
nav#main_navigation ul.top_level li:nth-child(5) ul.bottom_level li a { background-color: rgb(124,123,123); color: white;}

nav#main_navigation ul.top_level li:nth-child(1) > a:hover {  background-position: 55px 120px; background-image: url(../images/arrow_white.png); background-repeat: no-repeat; background-color: rgb(251,190,94); color:white; }
nav#main_navigation ul.top_level li:nth-child(2) > a:hover {  background-position: 55px 120px; background-image: url(../images/arrow_white.png); background-repeat: no-repeat; background-color: rgb(136,195,120); color:white; }
nav#main_navigation ul.top_level li:nth-child(3) > a:hover {  background-position: 55px 120px; background-image: url(../images/arrow_white.png); background-repeat: no-repeat; background-color: rgb(237,109,132); color:white; }
nav#main_navigation ul.top_level li:nth-child(4) > a:hover {  background-position: 55px 120px; background-image: url(../images/arrow_white.png); background-repeat: no-repeat; background-color: rgb(63,192,240); color:white; }
nav#main_navigation ul.top_level li:nth-child(5) > a:hover {  background-position: 55px 120px; background-image: url(../images/arrow_white.png); background-repeat: no-repeat; background-color: rgb(124,123,123); color:white; }

nav#main_navigation ul.top_level li:nth-child(1) > ul.bottom_level li a:hover { background-color: rgb(251,190,94); color:white; }
nav#main_navigation ul.top_level li:nth-child(2) > ul.bottom_level a:hover { background-color: rgb(136,195,120); color:white; }
nav#main_navigation ul.top_level li:nth-child(3) > ul.bottom_level a:hover { background-color: rgb(237,109,132); color:white; }
nav#main_navigation ul.top_level li:nth-child(4) > ul.bottom_level a:hover { background-color: rgb(63,192,240); color:white; }
nav#main_navigation ul.top_level li:nth-child(5) > ul.bottom_level a:hover { background-color: rgb(124,123,123); color:white; }



@media (min-width: 1023px) and (max-width: 1150px){

 
nav#main_navigation ul.top_level li:nth-child(1) a { background-image:none;}
nav#main_navigation ul.top_level li:nth-child(2) a {background-image:none;}
nav#main_navigation ul.top_level li:nth-child(3) a { background-image:none;}
nav#main_navigation ul.top_level li:nth-child(4) a { background-image:none;}
nav#main_navigation ul.top_level li:nth-child(5) a { background-image:none;}

nav#main_navigation ul.top_level li:nth-child(1) ul.bottom_level li a { background-image:none}
nav#main_navigation ul.top_level li:nth-child(2) ul.bottom_level li a { background-image:none}
nav#main_navigation ul.top_level li:nth-child(3) ul.bottom_level li a { background-image:none}
nav#main_navigation ul.top_level li:nth-child(4) ul.bottom_level li a { background-image:none}
nav#main_navigation ul.top_level li:nth-child(5) ul.bottom_level li a { background-image:none}

nav#main_navigation ul.top_level li:nth-child(1) > a:hover {  background-image:none}
nav#main_navigation ul.top_level li:nth-child(2) > a:hover {  background-image:none}
nav#main_navigation ul.top_level li:nth-child(3) > a:hover {  background-image:none}
nav#main_navigation ul.top_level li:nth-child(4) > a:hover {  background-image:none}
nav#main_navigation ul.top_level li:nth-child(5) > a:hover {  background-image:none}

nav#main_navigation ul.top_level li:nth-child(1) > ul.bottom_level li a:hover { background-image:none}
nav#main_navigation ul.top_level li:nth-child(2) > ul.bottom_level a:hover { background-image:none}
nav#main_navigation ul.top_level li:nth-child(3) > ul.bottom_level a:hover { background-image:none}
nav#main_navigation ul.top_level li:nth-child(4) > ul.bottom_level a:hover { background-image:none}
nav#main_navigation ul.top_level li:nth-child(5) > ul.bottom_level a:hover { background-image:none}


}