1/* desbest edit taken from variables.less */
2/* Globals */
3@accent: #000;
4@onaccent: #eee;
5@background: #fff;
6@content: #666;
7
8/*----Navigation----*/
9
10.main-navigation {
11  z-index: 3;
12  position: absolute;
13  font-size: 14px;
14  background: fade(@accent, 40%);
15  font-weight: 300;
16  a {
17    /* text-transform: uppercase; */
18    color: @onaccent;
19  }
20  ul {
21    transition: opacity ease-in-out .2s;
22    li {
23      margin: 0px 15px;
24      padding: 15px 0px;
25      display: inline-block;
26      float: none;
27      ul {
28        background: transparent;
29        box-shadow: none;
30        margin-top: 29px;
31        border-top: solid 1px transparent;
32        opacity: 0;
33        li.page_item_has_children > a:after {
34          content: "\f105";
35          font-family: "FontAwesome";
36          margin-left: 10px;
37          color: rgba(255,255,255,.7);
38        }
39        a {
40          width: auto;
41        }
42        li {
43          width: 150px;
44          margin: 0px;
45          padding: 8px 10px;
46          text-align: left;
47          background: rgba(0,0,0,.4);
48          ul {
49            margin-top: -1px;
50            margin-left: 1px;
51          }
52        }
53      }
54    }
55  }
56  ul > li.page_item_has_children > a:after {
57    content: "\f107";
58    font-family: FontAwesome;
59    margin-left: 10px;
60  }
61  li:hover > ul {
62    opacity: 1;
63  }
64}
65
66.main-navigation ul.nav-menu {
67  text-align: center;
68}
69
70.main-navigation ul > li {
71  float: none;
72  display: inline-block;
73}
74
75
76.slicknav_menu {
77  position: absolute;
78  z-index: 999;
79  background: rgba(0,0,0,.5);
80  width: 100%;
81  padding: 10px;
82  a {
83    color: white;
84  }
85  a.slicknav_btn {
86    font-size: 16px;
87    display: inline-block;
88    text-align: right;
89  }
90  a .slicknav_menutxt {
91    background: @accent;
92    color: white;
93    font-weight: 400;
94    padding: 10px 10px;
95  }
96  ul {
97    width:80%;
98  }
99  li {
100    list-style: none;
101    padding: 10px;
102  }
103}
104
105@media screen and (max-width: 768px) {
106  #site-navigation {
107    display: none;
108  }
109  .slicknav-menu {
110    display: block;
111  }
112}
113
114@media screen and (min-width: 768px) {
115  #site-navigation {
116    display: block;
117  }
118  .slicknav_menu {
119    display: none;
120  }
121}
122