/*
 * Created by VectorLab.
 * version 1.0
 * Copyright (c) 2018 "VectorLab"
 * http://thevectorlab.net
 */

/*------------------------------------
Table of Content

1. reset
2. menu
3. sub menu
4. mega menu
5. grid
6. dark dropdown menu
7. light dropdown menu
8. light dropdown hover
9. fixed width menu
10. float menu
11. center align menu
12. dark menu
13. background image menu
14. image grid menu
15. contact form
------------------------------------*/

/*------------------------------------
    menu
------------------------------------*/

#vl-menu { position: relative; z-index: 1200; }

.vlmenu , .vlmenu ul{  padding: 0; margin: 0; list-style: none; }

.vlmenu > li { float: left;  padding: 0 20px; }

.vlmenu > li.menu-right {   }

.vlmenu li li{  position: relative; }

.vlmenu li > a {  display: block }

.vlmenu a i { padding-right: 10px; font-size: 10px }

.vlmenu .search a i,
.vlmenu a i.arrow { padding-right: 0px }

.vlmenu > li > a > i.arrow { margin-left: 10px;  margin-top: 3px; }

.vlmenu a { text-decoration: none; color: #222; }

.vlmenu > li > a  {  padding: 20px 0; }

.vlmenu > li  { padding: 0 20px; }

.vlmenu > li > a:hover, .vlmenu > li.active > a {color: #000;}


/*------------------------------------
    sub menu
------------------------------------*/

.vlmenu ul { display: none; position: absolute; width: 190px; z-index: 1300; }

.vlmenu > li.menu-right > ul ul {left: -190px}

.vlmenu ul a{ padding: 10px 20px;  color: #222; }

.vlmenu li:hover > ul { display: block; }

.vlmenu ul ul { top:0px; left: 190px; }


.vlmenu > li.menu-right > ul,
.vlmenu > li.menu-right > div {
    /*right: 0px;*/
}


.container-fluid .vlmenu > li.menu-right > ul,
.container-fluid .vlmenu > li.menu-right > div {
    right: 0px;
}

.vlmenu li a i.arrow { float: right; margin-top: 5px;}

.vlmenu li.search a i.arrow {  display: none; }



.vlmenu ul a:hover, .mega-menu ol li a:hover {  background: rgba(255,255,255,.1); }


/*------------------------------------
    mega menu
------------------------------------*/

.vlmenu li > div {   padding: 10px; }

.mega-menu ol { list-style: none; padding-left: 0; }

.mega-menu ol li a { padding: 10px 20px; color: #222; }

.mega-menu h1, .mega-menu h2, .mega-menu h3, .mega-menu h4, .mega-menu h5, .mega-menu h6, .mega-menu p { padding-left: 20px; font-weight: normal; }

.vlmenu .full-nav, .vlmenu .half-nav, .vlmenu .quarter-nav { display: none; position: absolute; z-index: 1300; }

.vlmenu > li:hover > div {  display: block;  }

.vlmenu .full-nav  { width: 100%; left: 0; right: 0; }
.vlmenu .half-nav  { width: 50%; left: auto; right: auto; }
.vlmenu .quarter-nav  { width: 25%; left: auto; right: auto; }

.vlmenu li.menu-right .half-nav  { width: 50%; left: auto; right: 0; }
.vlmenu li.menu-right .quarter-nav  { width: 25%; left: auto; right: 0; }

.vlmenu li > div input { border-radius: 0;  box-shadow: none;  border: none; }

.vlmenu.light-sub-menu input {border: 1px solid #ddd}

.vlmenu li > div input:focus,
.vlmenu.light-sub-menu input:focus {box-shadow: none}

.light-sub-menu .mega-menu li a span, .dark-sub-menu .mega-menu li a span {display: block; color: #bbbbbb;  }

.light-sub-menu .mega-menu li a:hover span, .dark-sub-menu .mega-menu li a:hover span  { color: #fff;  }

.light-sub-menu .mega-menu li a span,
.light-sub-menu .mega-menu li a:hover span,
.dark-sub-menu .mega-menu li a span { -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; transition: all 0.3s ease; }


/*------------------------------------
    grid
------------------------------------*/

.vlmenu .col1, .vlmenu .col2, .vlmenu .col3, .vlmenu .col4, .vlmenu .col5, .vlmenu .col6 {  float: left; }

.mega-menu .col1 { width: 100%; }
.mega-menu .col2 { width: 50%; }
.mega-menu .col3 { width: 33.33%; }
.mega-menu .col4 { width: 25%; }
.mega-menu .col5 { width: 20%; }
.mega-menu .col6 { width: 16.66%; }


.grid .col1,
.grid .col2,
.grid .col3,
.grid .col4,
.grid .col5,
.grid .col6 { display: inline-block;  margin-right: 1%;  padding: 5px }


.grid.gray .col1,
.grid.gray .col2,
.grid.gray .col3,
.grid.gray .col4,
.grid.gray .col5,
.grid.gray .col6 {background: #ddd; }


.grid .mega-menu .col1 { width: 99%; }
.grid .mega-menu .col2 { width: 49%; }
.grid .mega-menu .col3 { width: 32.33%; }
.grid .mega-menu .col4 { width: 24%; }
.grid .mega-menu .col5 { width: 19%; }
.grid .mega-menu .col6 { width: 15.66%; }

.menu-row {
    margin-bottom: 10px;
    width: 100%;
    display: inline-block;
    margin-left: .5%;
}

.menu-row:last-child {margin-bottom: 0}

/*------------------------------------
    dark dropdown menu
------------------------------------*/

.dark-sub-menu  ul, .dark-sub-menu li > div {  background: #222; }

.dark-sub-menu ul a,
.dark-sub-menu li > div a,
.dark-sub-menu li > div h1,
.dark-sub-menu li > div h2,
.dark-sub-menu li > div h3,
.dark-sub-menu li > div h4,
.dark-sub-menu li > div h5,
.dark-sub-menu li > div h6,
.dark-sub-menu li > div p { color: #fff; }

/*------------------------------------
    light dropdown menu
------------------------------------*/

.light-sub-menu  ul, .light-sub-menu li > div {  background: #fff;  box-shadow: 0  0 1px #d1d1d1; }

.light-sub-menu ul a,
.light-sub-menu li > div a,
.light-sub-menu li > div h1,
.light-sub-menu li > div h2,
.light-sub-menu li > div h3,
.light-sub-menu li > div h4,
.light-sub-menu li > div h5,
.light-sub-menu li > div h6,
.light-sub-menu li > div p { color: #222; }

.light-sub-menu ul a:hover,
.light-sub-menu ol li a:hover { color: #fff; }

/*------------------------------------
    light dropdown hover
------------------------------------*/

.light-sub-menu ul a:hover,
.light-sub-menu ol li a:hover { color: #fff;  background: #222;}

/*------------------------------------
    fixed width menu
------------------------------------*/

.container header {  display: inline-block; width: 100%;  }

.container header .vl-logo {  margin-left: 20px; }

.container header .nav-btn {margin-right: 20px}

/*------------------------------------
    float menu
------------------------------------*/

.container header.float-menu {  display: inline-block; width: 100%;  margin-top: 50px;  }

.container header.float-menu .vl-logo {  margin-left: 20px; }

.container header.float-menu .nav-btn {margin-right: 20px}

/*------------------------------------
    center align menu
------------------------------------*/

.center-menu {text-align: center}

.center-menu .center-logo, .center-menu .vlmenu {display: inline-block;}

.center-menu .vlmenu ul, .center-menu .vlmenu li > div { text-align: left!important; }


.no-bg {background: none}


/*------------------------------------
    dark menu
------------------------------------*/


.dark-menu {background: #000}

.dark-menu a {color: #fff}


/*------------------------------------
    background image menu
------------------------------------*/

.menu-bg {
    background-image: url(../img/mega-img.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    background-size: auto !important;
}


/*------------------------------------
    image grid menu
------------------------------------*/

.grid .mega-menu .col1 img ,
.grid .mega-menu .col2 img ,
.grid .mega-menu .col3 img ,
.grid .mega-menu .col4 img ,
.grid .mega-menu .col5 img ,
.grid .mega-menu .col6 img { width: 100%; height: auto; margin-bottom: 10px; }


/*------------------------------------
    contact form
------------------------------------*/

.contact-form { padding: 0 20px;}

.contact-form input, .contact-form textarea {
    background: #fff;
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
    height: 35px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid #ddd;
    color: #222;
}

input[type=checkbox] {width: auto; height: auto; margin-right: 10px; float: left;}

.contact-form input:focus, .contact-form textarea:focus {outline: 0}

.contact-form textarea {height: 150px}

.vl-btn {padding: 10px 20px; border: none}

/*------------------------------------
    responsive
------------------------------------*/

@media (max-width: 1024px) {

    /*header { border-bottom: 1px solid #ddd; width: 100%; float: left; height: 50px; }*/

    .menu, .menu ul, div.mega-menu { background: #333 !important; display: inline-block; }

    .mega-menu p {padding-left: 40px !important;}

    .vl-logo {margin-top: 10px;}

    .vlmenu , .vlmenu ul, div.mega-menu { background: #333 !important; display: inline-block;  }

    .vlmenu a { color: #fff !important; }

    .vlmenu li { background: #333; position: relative; z-index: 1300;}

    .vlmenu > li  { display: block; width: 100%; padding: 0;  border-bottom: 1px solid rgba(255,255,255,.05) }

    .vlmenu > li > a, .vlmenu > li > a > i.arrow { line-height: 50px; }

    .vlmenu > li > a { padding: 0 20px; }

    .vlmenu > li a:hover { background: #111; }

    .vlmenu > li > a > i.arrow { margin-right: 0px; }

    .vlmenu ul {  display: none; position: relative; width: 100%;  border: none; overflow: hidden; }

    .hidden-sub { display: none !important;  }

    .visible-sub { display: block !important; visibility: visible; opacity: 1; }

    .vlmenu ul a, .vlmenu li > div, .mega-menu ol li a { padding: 10px 20px; }

    .mega-menu ol li a, .vlmenu ul a { border-top: 1px solid rgba(255,255,255,.05); }

    .vlmenu li > div { padding: 10px 0;  }

    .vlmenu ul ul, .vlmenu > li.menu-right > ul ul {  left: 0; }

    .vlmenu li li a { padding-left: 40px;  }

    .vlmenu li li li a { padding-left: 60px; }

    .vlmenu li li li li a {  padding-left: 80px;  }

    .vlmenu li li li li li a {  padding-left: 100px;  }

    .vlmenu li li li li li li a {  padding-left: 120px; }

    .vlmenu .full-nav, .vlmenu .half-nav, .vlmenu .quarter-nav { display: block; position: relative; }

    .vlmenu .col1,.vlmenu .col2, .vlmenu .col3, .vlmenu .col4, .vlmenu .col5, .vlmenu .col6,  .mega-menu ol, .grid .col1, .grid .col2, .grid .col3, .grid .col4, .grid .col5, .grid .col6 { width:100% !important; }

    .grid .col1, .grid .col2, .grid .col3, .grid .col4, .grid .col5, .grid .col6 {margin-bottom: 10px; display: inline-block}

    .vlmenu li > div { border: none; }

    .vlmenu h1, .vlmenu h2, .vlmenu h3, .vlmenu h4, .vlmenu h5, .vlmenu h6 { margin: 10px 20px; color: #fff; }

    .vlmenu p { color: #fff; padding: 10px 20px}

    .vlmenu ul a:hover, .mega-menu ol li a:hover {  background: #111; color: #fff; }

    .mega-menu ol li a { margin-bottom: 0;  }

    .wrapper, .vlmenu .half-nav, .vlmenu .quarter-nav, .vlmenu li.menu-right .half-nav, .vlmenu li.menu-right .quarter-nav { width: 100%; }

    .vlmenu { display: none; width: 100%;}

    .light-sub-menu ul a, .light-sub-menu li > div a, .light-sub-menu li > div h1, .light-sub-menu li > div h2, .light-sub-menu li > div h3, .light-sub-menu li > div h4, .light-sub-menu li > div h5, .light-sub-menu li > div h6, .light-sub-menu li > div p, .light-sub-menu li > div span {
        color: #fff;
    }

    .light-sub-menu ul, .light-sub-menu li > div {box-shadow: none}

    .vlmenu ul, .vlmenu li > div {top:auto }

    .vlmenu > li > a  {border-radius: 0px; border: none !important; height: 53px; }

    .vlmenu > li, .menu-row {margin: 0}

    .center-menu .vlmenu ul, .center-menu .vlmenu li > div {top: 0px}

    .center-menu {text-align: left}

    .center-menu .vlmenu {display:none;}

    /*nav-btn*/

    .nav-btn  {display:block; float: right; cursor: pointer; margin-right: 0px;  margin-top: 10px;  margin-bottom: 10px;}

    .nav-btn .bars { display: inline-block; position: relative; top: -5px; vertical-align: bottom;  height: 2px; width: 30px; background-color: #333; }

    .nav-btn .bars:before, .nav-btn .bars:after{ position: absolute; content: ''; display: inline-block; width: 30px; height: 2px; top: -8px; background-color: #333;}

    .nav-btn .bars:after { top: 8px; }

}