/*
NAME: Jet Responsive Megamenu 
AUTHOR PAGE: http://codecanyon.net/user/marcoarib
ITEM PAGE: http://codecanyon.net/item/jet-responsive-megamenu/5719593
*/
.main-nav {
    margin: 0 40px 0 150px;
}

/* MENU CONFIGURATION
**********************************************************/
.jetmenu {
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    float: left;
    list-style: none;
}

.jetmenu li {
    display: inline-block;
    float: left;
}

.jetmenu a {
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
    outline: none;
    z-index: 10;
}

.jetmenu > li > a {
    padding: 10px 20px;
    font-size: 1.1em;
    color: #ccc;
    text-decoration: none;
    display: inline-block;
}

.jetmenu > li:hover > a,
.jetmenu > li.active > a {
    background: #333;
    color: #ff6600;
}

/* DROPDOWN CONFIGURATION
**********************************************************/
.jetmenu ul.dropdown,
.jetmenu ul.dropdown li ul.dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 99;
    min-width: 134px;
    background: #333333;
}

.jetmenu ul.dropdown {
    top: 45px;
}

.jetmenu ul.dropdown li ul.dropdown {
    left: 100%;
    top: inherit;
}

.jetmenu ul.dropdown li {
    clear: both;
    width: 100%;
    font-size: 12px;
}

.jetmenu ul.dropdown li a {
    width: 100%;
    padding: 0 12px;
    display: inline-block;
    float: left;
    clear: both;
    text-decoration: none;
    color: #999;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.jetmenu ul.dropdown li:hover > a {
    background: #e0e0e0;
    color: #555;
}

/* dropdowns to left side */
.jetmenu ul.dropdown li ul.dropdown.left {
    left: auto;
    right: 100%;
}

/* SUBMENU INDICATORS
**********************************************************/
.jetmenu .indicator {
    position: relative;
    left: 5px;
    top: 0;
    font-size: 14px;
    float: right;
}

.jetmenu ul li .indicator {
    font-size: 12px;
    top: 1px;
    left: 10px;
}

/* MEGAMENU
**********************************************************/
.jetmenu > li > .megamenu {
    position: absolute;
    display: none;
    background: #333333;
    width: 25%;
    top: 45px;
    color: #ccc;
    z-index: 99;
    padding: 20px 20px 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* megamenu list */
.jetmenu li > .megamenu ul {
    margin: 0 0 20px 0;
    width: 100%;
    float: left;
    padding: 0;
    display: block;
    position: relative;
}

.jetmenu li > .megamenu ul li {
    width: 100%;
    padding: 4px 0;
}

.jetmenu li > .megamenu ul li.title {
    margin: 0 0 8px;
    padding: 0 0 5px;
    font-size: 1em;
    width: 90%;
    border-bottom: solid 1px #666;
}

/* megamenu h5 */
.jetmenu li > .megamenu h5 {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

/* megamenu links */
.jetmenu li > .megamenu a {
    color: #ccc;
    text-decoration: none;
    font-size: 1em;
    -webkit-transition: color 0.3s linear;
    -moz-transition: color 0.3s linear;
    -o-transition: color 0.3s linear;
    transition: color 0.3s linear;
}

.jetmenu li > .megamenu a:hover {
    color: #dedede;
}

/* megamenu images */
.jetmenu .megamenu img {
    width: 100%;
    -webkit-transition: border 0.3s linear;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
    transition: border 0.3s linear;
}

/* to fix right attribute on submenus (menu aligned to left (default)) */
.jetmenu > li.fix-sub > .megamenu,
.jetmenu > li.fix-sub > .megamenu.one-fifth-width,
.jetmenu > li.fix-sub > .megamenu.one-quarter-width,
.jetmenu > li.fix-sub > .megamenu.half-width,
.jetmenu > li.fix-sub > .megamenu.three-quarter-width,
.jetmenu > li.fix-sub > .dropdown {
    right: 0;
}

/* MEGAMENU WIDTHS
**********************************************************/
.jetmenu > li > .megamenu.one-fifth-width{
	width: 20%;
}

.jetmenu > li > .megamenu.one-quarter-width {
    width: 25%;
}

.jetmenu > li > .megamenu.half-width {
    width: 50%;
}

.jetmenu > li > .megamenu.three-quarter-width {
    width: 75%;
}

.jetmenu > li > .megamenu.full-width {
    width: 100%;
    left: 0;
}

/* MEGAMENU FORM CONFIGURATION
**********************************************************/
.jetmenu li > .megamenu form {
    width: 100%;
}

/* megamenu inputs */
.jetmenu li > .megamenu form input[type="text"],
.jetmenu li > .megamenu form textarea {
    padding: 5px;
    color: #999;
    background: #444;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    border: solid 1px transparent;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border 0.3s linear;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
    transition: border 0.3s linear;
}

.jetmenu li > .megamenu form input[type="text"]:focus,
.jetmenu li > .megamenu form textarea:focus {
    border-color: #e0e0e0;
}

.jetmenu li > .megamenu form input[type="text"] {
    width: 100%;
    margin-top: 10px;
}

.jetmenu li > .megamenu form textarea {
    width: 100%;
    margin-top: 10px;
}

.jetmenu li > .megamenu form input[type="submit"] {
    width: 25%;
    float: right;
    height: 30px;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    background: #444;
    color: #777;
    font-family: 'Open Sans', sans-serif;
    -webkit-transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    transition: background 0.3s linear;
}

.jetmenu li > .megamenu form input[type="submit"]:hover {
    background: #e0e0e0;
    color: #555;
}

/* MEGAMENU GRID SYSTEM
**********************************************************/
.megamenu .row {
    width: 100%;
    margin-top: 15px;
}

.megamenu .row:first-child {
    margin-top: 0;
}

.megamenu .row:before,
.megamenu .row:after {
    display: table;
    content: "";
    line-height: 0;
}

.megamenu .row:after {
    clear: both;
}

.megamenu .row .col1,
.megamenu .row .col2,
.megamenu .row .col3,
.megamenu .row .col4,
.megamenu .row .col5,
.megamenu .row .col6
.megamenu .row .col7
.megamenu .row .col8,
.megamenu .row .col9,
.megamenu .row .col10,
.megamenu .row .col11,
.megamenu .row .col12 {
    display: block;
    width: 100%;
    min-height: 20px;
    float: left;
    margin-left: 2.127659574468085%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.megamenu .row [class*="col"]:first-child {
    margin-left: 0;
}

.megamenu .row .col1 {
    width: 6.382978723404255%;
    *width: 6.329787234042553%
}

.megamenu .row .col2 {
    width: 14.893617021276595%;
    *width: 14.840425531914894%;
}

.megamenu .row .col3 {
    width: 23.404255319148934%;
    *width: 23.351063829787233%;
}

.megamenu .row .col4 {
    width: 31.914893617021278%;
    *width: 31.861702127659576%;
}

.megamenu .row .col5 {
    width: 40.42553191489362%;
    *width: 40.37234042553192%;
}
.megamenu .row .col6 {
    width: 48.61878453038674%;
    *width: 48.56559304102504%;
}
.megamenu .row .col7 {
    width: 57.18232044198895% ;
    *width: 57.12912895262725%;
}
.megamenu .row .col8 {
    width: 65.74585635359117%;
    *width: 65.69266486422946%;
}
.megamenu .row .col9 {
    width: 74.30939226519337% ;
    *width: 74.25620077583166%;
}
.megamenu .row .col10 {
    width: 82.87292817679558%;
    *width: 82.81973668743387%;
}
.megamenu .row .col11 {
    width: 91.48936170212765%;
    *width: 91.43617021276594%;
}
.megamenu .row .col12 {
    width: 100%;
    *width: 99.94680851063829%;
}

/* RIGHT ALIGNMENT (MENU ITEM)
**********************************************************/
.jetmenu > li.right {
    float: right;
}

.jetmenu > li.right > .megamenu,
.jetmenu > li.right > .megamenu.one-fifth-width,
.jetmenu > li.right > .megamenu.one-quarter-width,
.jetmenu > li.right > .megamenu.half-width,
.jetmenu > li.right > .megamenu.three-quarter-width,
.jetmenu > li.right > .dropdown {
    right: 0;
}

/* to fix right attribute on submenus (menu aligned to right) */
.jetmenu > li.jsright {
    float: right;
}

.jetmenu > li.jsright.last > .megamenu,
.jetmenu > li..jsright.last > .megamenu.one-fifth-width,
.jetmenu > li.jsright.last > .megamenu.one-quarter-width,
.jetmenu > li.jsright.last > .megamenu.half-width,
.jetmenu > li.jsright.last > .megamenu.three-quarter-width,
.jetmenu > li.jsright.last > .dropdown {
    right: 0;
}

/* ICONS (FONT AWESOME)
**********************************************************/
.jetmenu > li > a > i {
    line-height: 23px !important;
    margin-right: 6px;
    font-size: 18px;
    float: left;
}

/* COLLAPSIBLE MENU
**********************************************************/
.jetmenu > li.showhide {
    display: none;
    width: 100%;
    height: 50px;
    cursor: pointer;
    color: #999;
    background: #000;
}

.jetmenu > li.showhide span.title {
    margin: 15px 0 0 25px;
    float: left;
}

.jetmenu > li.showhide span.icon {
    margin: 17px 20px;
    float: right;
}

.jetmenu > li.showhide .icon em {
    margin-bottom: 3px;
    display: block;
    width: 20px;
    height: 2px;
    background: #999;
}

/* STYLES
**********************************************************/

/* black */
.black > li:hover > a, .black > li.active > a {
    background: #333;
    color: #ff6600;
}

.black ul.dropdown li:hover > a {
    background: #333333;
    color: #fff;
}

.black li > .megamenu form input[type="text"]:focus, .black li > .megamenu form textarea:focus {
    border-color: #333333;
}

.black li > .megamenu form input[type="submit"]:hover {
    background: #333333;
    color: #fff;
}

.black li > .megamenu a:hover {
    color: #ff6600;
}

/* RESPONSIVE LAYOUT
**********************************************************/
@media (max-width: 768px) {
    .main-nav {
        margin: 0;
    }

    .jetmenu > li {
        display: block;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .jetmenu > li > a {
        padding: 10px 20px;
    }

    .jetmenu a {
        width: 100%;
        background: #333;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .jetmenu ul.dropdown,
    .jetmenu ul.dropdown li ul.dropdown {
        width: 100% !important;
        left: 0;
        position: static !important;
        border: none;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .jetmenu ul.dropdown li {
        background: #fff !important;
        border: none;
    }

    .jetmenu ul.dropdown > li > a {
        padding-left: 40px !important;
    }

    .jetmenu > li > .megamenu {
        width: 100% !important;
        position: static;
        border-top: none;
    }

    .jetmenu > li > .megamenu .row [class*="col"] {
        float: none;
        display: block;
        width: 100% !important;
        margin-left: 0;
        margin-top: 15px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .jetmenu > li > .megamenu .row:first-child [class*="col"]:first-child {
        margin-top: 0;
    }

    .jetmenu > li > .megamenu .row {
        margin-top: 0;
    }

    .jetmenu > li > ul.dropdown > li > a {
        padding-left: 40px !important;
    }

    .jetmenu > li > ul.dropdown > li > ul.dropdown > li > a {
        padding-left: 60px !important;
    }

    .jetmenu > li > ul.dropdown > li > ul.dropdown > li > ul.dropdown > li > a {
        padding-left: 80px !important;
    }
    /* black */
    .black > li:hover > a, .black > li.active > a {
        background: #000;
        color: #ff6600;
    }

    .black ul.dropdown li:hover > a {
        background: #000;
        color: #fff;
    }

    .black li > .megamenu a:hover {
        color: #ff6600;
    }
}

@media (min-width: 768px) and (max-width: 1079px) {
    .jetmenu > li > .megamenu {
        width: 100% !important;
        left: 0 !important;
    }
    .main-nav {
        margin: 0 20px 0 80px;
    }
}