/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Body - not related to megamenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
    font-family: 'Source Sans Pro', sans-serif;
}

* {
    box-sizing: border-box;
}

a {
    color: #333;
}

.description {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-container {
    width: 89%;
    margin: 0 auto;
    background:transparent;
    float: right;
}

.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 1.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 1122px;
    list-style: none;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    float: right;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    background: #e9e9e9;
    padding: 0;
    margin: 0;
    width: 102px;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em 3em;
    display: block;
}

.menu > ul > li:hover {
    background: #f0f0f0;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #f0f0f0;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0 10px 0 0;
    padding-bottom: 0;
    list-style: none;
    width: 24%;
    background: none;
    float: left;
    text-align: left;
}

.menu > ul > li > ul > li a {
    color: #777;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}
/* home nav */
.menu > ul > li.home-nav{
    text-align: center;
}
.menu > ul > li.home-nav a{
    background: url(../images/menubg1.png) no-repeat;
    height: 116px;
    padding: 14px 0 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.home-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.home-nav a span{
    color: #fff;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.home-nav a:hover span.downarrow{
    background: url("../images/green-menu.gif") 0px -20px no-repeat !important;
    height: 116px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.home-nav a .fa{
         color: #fff;
    font-size: 35px;
    z-index: 2;
    position: relative;
}
.menu > ul > li.home-nav ul li a {
    height:auto;
    background:transparent;
    padding: 0;
}
.menu > ul > li.home-nav ul li a:hover {
    padding-top:0;
}
.menu > ul > li.home-nav > ul{
    background: #36ce85;
}
.menu > ul > li.home-nav:hover {
    background: #36ce85;
}
/* home nav */

/* about nav */
.menu > ul > li.about-nav{
    text-align: center;
}
.menu > ul > li.about-nav a{
    background: url(../images/menubg2.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.about-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.about-nav a span{
    color: #fff;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.about-nav a:hover span.downarrow{
    background: url("../images/m2.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.about-nav a .fa{
        color: #fff;
    font-size: 27px;
    z-index: 2;
    position: relative;
    margin: 0 0 3px 0;
}
.menu > ul > li.about-nav ul li a {
    height:auto;
    background:transparent;
    padding: 0;
}
.menu > ul > li.about-nav ul li a:hover {
    padding-top:0;
}
.menu > ul > li.about-nav > ul{
    background: #4f5f71;
}
.menu > ul > li.about-nav:hover {
    background: #4f5f71;
}
/* about nav */

/* Showroom nav */
.menu > ul > li.showroom-nav{
    text-align: center;
}
.menu > ul > li.showroom-nav a{
    background: url(../images/menubg3.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.showroom-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.showroom-nav a span{
    color: #fff;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.showroom-nav a:hover span.downarrow{
    background: url("../images/m3.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.showroom-nav a .fa{
        color: #008000 !important;
    font-size: 27px;
    z-index: 2;
    position: relative;
    margin: 0 0 4px 0;
}
.menu > ul > li.showroom-nav ul li a {
    height:auto;
    background:transparent;
    padding: 0;
}
.menu > ul > li.showroom-nav ul li a:hover {
    padding-top:0;
}
.menu > ul > li.showroom-nav > ul{
    background: #ff69b4;
}
.menu > ul > li.showroom-nav:hover {
    background: #ff69b4;
}
/* Showroom nav */


/* Appliances nav */
.menu > ul > li.appliances-nav{
    text-align: center;
}
.menu > ul > li.appliances-nav a{
    background: url(../images/menubg4.png) no-repeat;
    height: 116px;
       padding: 18px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.appliances-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.appliances-nav dl dd a:hover{
    padding-top:0px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.appliances-nav a span{
    color: #fff;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.appliances-nav a:hover span.downarrow{
    background: url("../images/m4.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.appliances-nav a .fa{
    color: #800080 !important;
    font-size: 30px;
    z-index: 2;
    position: relative;
    background: url(../images/appliances-icon-g2.png) no-repeat;
    height: 27px;
    width: 30px; 
    background-size: contain;
    content:inherit;
}
.menu > ul > li.appliances-nav a .fa.fa-building:before {
    content: "";
}
.menu > ul > li.appliances-nav ul li a {
    height: auto;
    background: transparent;
    float: left;
    width: 91%;	
    padding: 0;
}
.menu > ul > li.appliances-nav ul li dt:hover a {
    padding-top:0;
    color:#800080;
}
.menu > ul > li.appliances-nav ul li dt:hover a.view-more {
    background: url(../images/arrow-down-blue.png) no-repeat right; 
}

.menu > ul > li.appliances-nav > ul{
    background: #cb410b;
}
.menu > ul > li.appliances-nav:hover {
    background: #cb410b;
}
.menu > ul > li > ul > li a{
    border:none;
}
.menu > ul > li > ul > li dl{
    padding: 7px 0 0px;

    overflow: hidden;
}
.menu > ul > li > ul > li dt{
    border-bottom:1px solid #fff;
    padding: 0px 0 5px 0;
    margin: 0 0 7px 0;
    overflow:hidden;
    
}
.menu > ul > li > ul > li dd{
    padding: 5px 0 0 11px;
    overflow: hidden;
}
/* Appliances nav */


/* electrical nav */
.menu > ul > li.electrical-nav{
    text-align: center;
}
.menu > ul > li.electrical-nav > ul > li dt{
    border-bottom:1px solid #0000ff;
    padding: 0px 0 5px 0;
    margin: 0 0 7px 0;
    overflow:hidden;
}
.menu > ul > li.electrical-nav a{
    background: url(../images/menubg5.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #0000ff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.electrical-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.electrical-nav a span{
    color: #0000ff ;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.electrical-nav a:hover span.downarrow{
    background: url("../images/m5.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.electrical-nav a .fa{
    color: #0000ff !important;
    font-size: 27px;
    z-index: 2;
    position: relative;
    margin: 0 0 4px 0;
}
.menu > ul > li.electrical-nav ul li a {
    height: auto;
    background: transparent;
    float: left;
    width: 91%;	
    padding: 0;
}
.res-view-more a.view-more{
       
    width: 33% !important;
    float: right !important;

}
.menu > ul > li.electrical-nav ul li dt:hover a {
    padding-top:0;
    color:#B5E61D;
}
.menu > ul > li.electrical-nav ul li dt:hover a.view-more {
    background: url(../images/arrow-down-green.png) no-repeat right; 
}
.menu > ul > li.electrical-nav ul li a:hover {
    padding-top:0;
    color:#B5E61D;
}
.menu > ul > li.electrical-nav > ul{
    background: #ffff00 ;
}
.menu > ul > li.electrical-nav:hover {
    background: #ffff00;
}
/* electrical nav */

/* lighting nav */
.menu > ul > li.lighting-nav{
    text-align: center;
}
.menu > ul > li.lighting-nav a{
    background: url(../images/menubg6.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.lighting-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.lighting-nav a span{
    color: #fff ;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.lighting-nav a:hover span.downarrow{
    background: url("../images/m6.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.lighting-nav a .fa{
    color: #fff !important;
    font-size: 28px;
    z-index: 2;
    position: relative;
    margin: 0 0 4px 0;
}
.menu > ul > li.lighting-nav ul li a {
    height: auto;
    background: transparent;
    float: left;
    width: 91%;
    padding: 0;
}
.menu > ul > li.lighting-nav ul li dt:hover a {
    padding-top:0;
    color:#000;
}
.menu > ul > li.lighting-nav ul li dt:hover a.view-more {
    background: url(../images/arrow-down-black.png) no-repeat right; 
}

.menu > ul > li.lighting-nav ul li a:hover {
    padding-top:0;
    color:#000;
}
.menu > ul > li.lighting-nav > ul{
    background: #FFA500 ;
}
.menu > ul > li.lighting-nav:hover {
    background: #FFA500;
}
/* lighting nav */

/* plumbing nav */
.menu > ul > li.plumbing-nav{
    text-align: center;
}
.menu > ul > li.plumbing-nav a{
    background: url(../images/menubg7.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.plumbing-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.plumbing-nav a span{
    color: #000 ;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.plumbing-nav a:hover span.downarrow{
    background: url("../images/m7.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.plumbing-nav a .fa{
    color: #000  !important;	
    font-size: 30px;
    z-index: 2;
    position: relative;
    background: url(../images/plumbing-icon.png) no-repeat;
    height: 27px;
    width: 32px; 
    background-size: contain;
    content:inherit; 
}
.menu > ul > li.plumbing-nav a .fa.fa-wrench:before {
    content: "";
}
.menu > ul > li.plumbing-nav ul li a {
    height: auto;
    background: transparent;
    float: left;
    width: 91%;
    padding: 0; 
}
.menu > ul > li.plumbing-nav ul li dt:hover a {
    padding-top:0;
    color:#ad797c;
}
.menu > ul > li.plumbing-nav ul li dt:hover a.view-more {
    background: url(../images/arrow-down-pink.png) no-repeat right; 
}


.menu > ul > li.plumbing-nav ul li a:hover {
    padding-top:0;
    color:#ad797c;
}
.menu > ul > li.plumbing-nav > ul{
    background: #ff0000 ;
}
.menu > ul > li.plumbing-nav:hover {
    background: #ff0000;
}
/* plumbing nav */

/* contact nav */
.menu > ul > li.contact-nav{
    text-align: center;
}
.menu > ul > li.contact-nav a{
    background: url(../images/menubg8.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.contact-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.contact-nav a span{
    color: #fff ;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.contact-nav a:hover span.downarrow{
    background: url("../images/m8.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.contact-nav a .fa{
    color: #fff !important;
    font-size: 29px;
    z-index: 2;
    position: relative;
    margin: 0 0 2px 0;
}
.menu > ul > li.contact-nav ul li a {
    height:auto;
    background:transparent;
    padding: 0;
}
.menu > ul > li.contact-nav ul li a:hover {
    padding-top:0;
}
.menu > ul > li.contact-nav > ul{
    background: #000 ;
}
.menu > ul > li.contact-nav:hover {
    background: #000;
}
/* contact nav */


/* close nav */
.menu > ul > li.close-nav{
    text-align: center;
}
.menu > ul > li.close-nav a{
    background: url(../images/menubg12.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.close-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.close-nav a span{
    color: #fff ;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.close-nav a:hover span.downarrow{
    background: url("../images/m12.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.close-nav a .fa{
        color: #fff !important;
    font-size: 28px;
    z-index: 2;
    position: relative;
    margin: 0 0 3px 0;
}
.menu > ul > li.close-nav ul li a {
    height:auto;
    background:transparent;
}
.menu > ul > li.close-nav ul li a:hover {
    padding-top:0;
}
.menu > ul > li.close-nav > ul{
    background: #ff007f ;
}
.menu > ul > li.close-nav:hover {
    background: #ff007f;
}
/* close nav */

/* howto nav */
.menu > ul > li.howto-nav{
    text-align: center;
}
.menu > ul > li.howto-nav a{
    background: url(../images/menubg10.png) no-repeat;
    height: 116px;
    padding: 19px 0;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.howto-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.howto-nav a span{
    color: #fff ;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.howto-nav a:hover span.downarrow{
    background: url("../images/m10.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.howto-nav a .fa{
        color: #fff !important;
    font-size: 28px;
    z-index: 2;
    position: relative;
    margin: 0 0 3px 0;
}
.menu > ul > li.howto-nav ul li a {
    height:auto;
    background:transparent;
}
.menu > ul > li.howto-nav ul li a:hover {
    padding-top:0;
}
.menu > ul > li.howto-nav > ul{
    background: #ff007f ;
}
.menu > ul > li.howto-nav:hover {
    background: #800080;
}
/* howto nav */

/* locations nav */
.menu > ul > li.locations-nav{
    text-align: center;
}
.menu > ul > li.locations-nav a{
    background: url(../images/menubg11.png) no-repeat;
    height: 116px;
    padding: 17px 0 19px;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.locations-nav a:hover{
    padding-top:40px;
    transition: all 0.9s ease 0s;
}
.menu > ul > li.locations-nav a span{
    color: #fff ;
    text-transform: uppercase;
    display:block;
    z-index: 2;
    position: relative;
}
.menu > ul > li.locations-nav a:hover span.downarrow{
    background: url("../images/m11.gif") 0px -20px no-repeat !important;
    height: 140px;
    width: 102px;
    position: absolute;
    z-index:0;
}
.menu > ul > li.locations-nav a .fa{
    color: #fff  !important;	
    font-size: 30px;
    z-index: 2;
    position: relative;
}
.menu > ul > li.locations-nav a .fa{
    color: #800080 !important;
    font-size: 30px;
    z-index: 2;
    position: relative;
    background: url(../images/cal-icon3.png) no-repeat; 
    height: 30px;
    width: 30px;
    background-size: contain;
    content: inherit;
}
.menu > ul > li.locations-nav a .fa.fa-globe:before {
    content: "";
}
.menu > ul > li.locations-nav ul li a {
    height:auto;
    background:transparent;
}
.menu > ul > li.locations-nav ul li a:hover {
    padding-top:0;
}
.menu > ul > li.locations-nav > ul{
    background:#3300cc ;
}
.menu > ul > li.locations-nav:hover {
    background: #3300cc;
}
/* locations nav */

.dropdown dd, .dropdown dt {
    margin:0;
    padding:0;
    position:relative;
}
.dropdown dt{
   
    font-weight:normal;
}
.dropdown ul {
    margin: -1px 0 0 0;
}
.dropdown dd {
    position:relative;
    width: 170px;
}
.dropdown a, .dropdown a:visited {
    text-decoration:none;
    outline:0;
}
.dropdown dt a {
    display:inline-block;
    color: #fff;
    min-width:172px;
    background: #b7cb8f;

    background: -moz-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b7cb8f), color-stop(100%, #77a230));
    background: -webkit-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
    background: -o-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
    background: -ms-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
    background: linear-gradient(to bottom, #b7cb8f 0%, #77a230 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7cb8f', endColorstr='#77a230', GradientType=0);
}
.dropdown dt a span {
    cursor:pointer;
    display:block;
    padding:7px;
    color:#fff;
}
.dropdown dd {


    display:none;
    left:0;
    padding:0;


    width:auto;
    min-width:170px;
    list-style:none;
}
.dropdown span.value {
    display:none;
}
.dropdown dd ul li a {
    padding:5px;
    display:block;
    color: #666;
}
.dropdown dd ul li a:hover {
    background-color:#666;
    color: #fff;
}



/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
        width:100%;
    }
}