SHARE
TWEET

Untitled

a guest May 22nd, 2019 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * # Semantic - Menu
  3.  * http://github.com/semantic-org/semantic-ui/
  4.  *
  5.  *
  6.  * Copyright 2015 Contributor
  7.  * Released under the MIT license
  8.  * http://opensource.org/licenses/MIT
  9.  *
  10.  */
  11.  
  12.  
  13. /*******************************
  14.             Standard
  15. *******************************/
  16.  
  17.  
  18. /*--------------
  19.       Menu
  20. ---------------*/
  21.  
  22. .ui.menu {
  23.   display: -webkit-box;
  24.   display: -ms-flexbox;
  25.   display: flex;
  26.   margin: 1rem 0em;
  27.   background: #FFFFFF;
  28.   font-weight: normal;
  29.   border: 1px solid rgba(34, 36, 38, 0.15);
  30.   -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  31.           box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  32.   border-radius: 0.28571429rem;
  33.   min-height: 2.85714286em;
  34. }
  35. .ui.menu:after {
  36.   content: '';
  37.   display: block;
  38.   height: 0px;
  39.   clear: both;
  40.   visibility: hidden;
  41. }
  42. .ui.menu:first-child {
  43.   margin-top: 0rem;
  44. }
  45. .ui.menu:last-child {
  46.   margin-bottom: 0rem;
  47. }
  48.  
  49. /*--------------
  50.     Sub-Menu
  51. ---------------*/
  52.  
  53. .ui.menu .menu {
  54.   margin: 0em;
  55. }
  56. .ui.menu:not(.vertical) > .menu {
  57.   display: -webkit-box;
  58.   display: -ms-flexbox;
  59.   display: flex;
  60. }
  61.  
  62. /*--------------
  63.       Item
  64. ---------------*/
  65.  
  66. .ui.menu:not(.vertical) .item {
  67.   display: -webkit-box;
  68.   display: -ms-flexbox;
  69.   display: flex;
  70.   -webkit-box-align: center;
  71.       -ms-flex-align: center;
  72.           align-items: center;
  73. }
  74. .ui.menu .item {
  75.   position: relative;
  76.   vertical-align: middle;
  77.   line-height: 1;
  78.   text-decoration: none;
  79.   -webkit-tap-highlight-color: transparent;
  80.   -webkit-box-flex: 0;
  81.       -ms-flex: 0 0 auto;
  82.           flex: 0 0 auto;
  83.   -webkit-user-select: none;
  84.      -moz-user-select: none;
  85.       -ms-user-select: none;
  86.           user-select: none;
  87.   background: none;
  88.   padding: 0.92857143em 1.14285714em;
  89.   text-transform: none;
  90.   color: rgba(0, 0, 0, 0.87);
  91.   font-weight: normal;
  92.   -webkit-transition: background 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
  93.   transition: background 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
  94.   transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
  95.   transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
  96. }
  97. .ui.menu > .item:first-child {
  98.   border-radius: 0.28571429rem 0px 0px 0.28571429rem;
  99. }
  100.  
  101. /* Border */
  102. .ui.menu .item:before {
  103.   position: absolute;
  104.   content: '';
  105.   top: 0%;
  106.   right: 0px;
  107.   height: 100%;
  108.   width: 1px;
  109.   background: rgba(34, 36, 38, 0.1);
  110. }
  111.  
  112. /*--------------
  113.   Text Content
  114. ---------------*/
  115.  
  116. .ui.menu .text.item > *,
  117. .ui.menu .item > a:not(.ui),
  118. .ui.menu .item > p:only-child {
  119.   -webkit-user-select: text;
  120.      -moz-user-select: text;
  121.       -ms-user-select: text;
  122.           user-select: text;
  123.   line-height: 1.3;
  124. }
  125. .ui.menu .item > p:first-child {
  126.   margin-top: 0;
  127. }
  128. .ui.menu .item > p:last-child {
  129.   margin-bottom: 0;
  130. }
  131.  
  132. /*--------------
  133.       Icons
  134. ---------------*/
  135.  
  136. .ui.menu .item > i.icon {
  137.   opacity: 0.9;
  138.   float: none;
  139.   margin: 0em 0.35714286em 0em 0em;
  140. }
  141.  
  142. /*--------------
  143.      Button
  144. ---------------*/
  145.  
  146. .ui.menu:not(.vertical) .item > .button {
  147.   position: relative;
  148.   top: 0em;
  149.   margin: -0.5em 0em;
  150.   padding-bottom: 0.78571429em;
  151.   padding-top: 0.78571429em;
  152.   font-size: 1em;
  153. }
  154.  
  155. /*----------------
  156.  Grid / Container
  157. -----------------*/
  158.  
  159. .ui.menu > .grid,
  160. .ui.menu > .container {
  161.   display: -webkit-box;
  162.   display: -ms-flexbox;
  163.   display: flex;
  164.   -webkit-box-align: inherit;
  165.       -ms-flex-align: inherit;
  166.           align-items: inherit;
  167.   -webkit-box-orient: inherit;
  168.   -webkit-box-direction: inherit;
  169.       -ms-flex-direction: inherit;
  170.           flex-direction: inherit;
  171. }
  172.  
  173. /*--------------
  174.      Inputs
  175. ---------------*/
  176.  
  177. .ui.menu .item > .input {
  178.   width: 100%;
  179. }
  180. .ui.menu:not(.vertical) .item > .input {
  181.   position: relative;
  182.   top: 0em;
  183.   margin: -0.5em 0em;
  184. }
  185. .ui.menu .item > .input input {
  186.   font-size: 1em;
  187.   padding-top: 0.57142857em;
  188.   padding-bottom: 0.57142857em;
  189. }
  190.  
  191. /*--------------
  192.      Header
  193. ---------------*/
  194.  
  195. .ui.menu .header.item,
  196. .ui.vertical.menu .header.item {
  197.   margin: 0em;
  198.   background: '';
  199.   text-transform: normal;
  200.   font-weight: bold;
  201. }
  202. .ui.vertical.menu .item > .header:not(.ui) {
  203.   margin: 0em 0em 0.5em;
  204.   font-size: 1em;
  205.   font-weight: bold;
  206. }
  207.  
  208. /*--------------
  209.     Dropdowns
  210. ---------------*/
  211.  
  212.  
  213. /* Dropdown Icon */
  214. .ui.menu .item > i.dropdown.icon {
  215.   padding: 0em;
  216.   float: right;
  217.   margin: 0em 0em 0em 1em;
  218. }
  219.  
  220. /* Menu */
  221. .ui.menu .dropdown.item .menu {
  222.   min-width: calc(100% - 1px);
  223.   border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  224.   background: #FFFFFF;
  225.   margin: 0em 0px 0px;
  226.   -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  227.           box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  228.   -webkit-box-orient: vertical !important;
  229.   -webkit-box-direction: normal !important;
  230.       -ms-flex-direction: column !important;
  231.           flex-direction: column !important;
  232. }
  233.  
  234. /* Menu Items */
  235. .ui.menu .ui.dropdown .menu > .item {
  236.   margin: 0;
  237.   text-align: left;
  238.   font-size: 1em !important;
  239.   padding: 0.78571429em 1.14285714em !important;
  240.   background: transparent !important;
  241.   color: rgba(0, 0, 0, 0.87) !important;
  242.   text-transform: none !important;
  243.   font-weight: normal !important;
  244.   -webkit-box-shadow: none !important;
  245.           box-shadow: none !important;
  246.   -webkit-transition: none !important;
  247.   transition: none !important;
  248. }
  249. .ui.menu .ui.dropdown .menu > .item:hover {
  250.   background: rgba(0, 0, 0, 0.05) !important;
  251.   color: rgba(0, 0, 0, 0.95) !important;
  252. }
  253. .ui.menu .ui.dropdown .menu > .selected.item {
  254.   background: rgba(0, 0, 0, 0.05) !important;
  255.   color: rgba(0, 0, 0, 0.95) !important;
  256. }
  257. .ui.menu .ui.dropdown .menu > .active.item {
  258.   background: rgba(0, 0, 0, 0.03) !important;
  259.   font-weight: bold !important;
  260.   color: rgba(0, 0, 0, 0.95) !important;
  261. }
  262. .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
  263.   display: block;
  264. }
  265. .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
  266.   display: inline-block;
  267.   font-size: 1em !important;
  268.   float: none;
  269.   margin: 0em 0.75em 0em 0em !important;
  270. }
  271.  
  272. /* Secondary */
  273. .ui.secondary.menu .dropdown.item > .menu,
  274. .ui.text.menu .dropdown.item > .menu {
  275.   border-radius: 0.28571429rem;
  276.   margin-top: 0.35714286em;
  277. }
  278.  
  279. /* Pointing */
  280. .ui.menu .pointing.dropdown.item .menu {
  281.   margin-top: 0.75em;
  282. }
  283.  
  284. /* Inverted */
  285. .ui.inverted.menu .search.dropdown.item > .search,
  286. .ui.inverted.menu .search.dropdown.item > .text {
  287.   color: rgba(255, 255, 255, 0.9);
  288. }
  289.  
  290. /* Vertical */
  291. .ui.vertical.menu .dropdown.item > .icon {
  292.   float: right;
  293.   content: "\f0da";
  294.   margin-left: 1em;
  295. }
  296. .ui.vertical.menu .dropdown.item .menu {
  297.   left: 100%;
  298.   min-width: 0;
  299.   margin: 0em 0em 0em 0em;
  300.   -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
  301.           box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
  302.   border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem;
  303. }
  304. .ui.vertical.menu .dropdown.item.upward .menu {
  305.   bottom: 0;
  306. }
  307. .ui.vertical.menu .dropdown.item:not(.upward) .menu {
  308.   top: 0;
  309. }
  310. .ui.vertical.menu .active.dropdown.item {
  311.   border-top-right-radius: 0em;
  312.   border-bottom-right-radius: 0em;
  313. }
  314. .ui.vertical.menu .dropdown.active.item {
  315.   -webkit-box-shadow: none;
  316.           box-shadow: none;
  317. }
  318.  
  319. /* Evenly Divided */
  320. .ui.item.menu .dropdown .menu .item {
  321.   width: 100%;
  322. }
  323.  
  324. /*--------------
  325.      Labels
  326. ---------------*/
  327.  
  328. .ui.menu .item > .label {
  329.   background: #999999;
  330.   color: #FFFFFF;
  331.   margin-left: 1em;
  332.   padding: 0.3em 0.78571429em;
  333. }
  334. .ui.vertical.menu .item > .label {
  335.   background: #999999;
  336.   color: #FFFFFF;
  337.   margin-top: -0.15em;
  338.   margin-bottom: -0.15em;
  339.   padding: 0.3em 0.78571429em;
  340. }
  341. .ui.menu .item > .floating.label {
  342.   padding: 0.3em 0.78571429em;
  343. }
  344.  
  345. /*--------------
  346.      Images
  347. ---------------*/
  348.  
  349. .ui.menu .item > img:not(.ui) {
  350.   display: inline-block;
  351.   vertical-align: middle;
  352.   margin: -0.3em 0em;
  353.   width: 2.5em;
  354. }
  355. .ui.vertical.menu .item > img:not(.ui):only-child {
  356.   display: block;
  357.   max-width: 100%;
  358.   width: auto;
  359. }
  360.  
  361.  
  362. /*******************************
  363.           Coupling
  364. *******************************/
  365.  
  366.  
  367. /*--------------
  368.      List
  369. ---------------*/
  370.  
  371.  
  372. /* Menu divider shouldnt apply */
  373. .ui.menu .list .item:before {
  374.   background: none !important;
  375. }
  376.  
  377. /*--------------
  378.      Sidebar
  379. ---------------*/
  380.  
  381.  
  382. /* Show vertical dividers below last */
  383. .ui.vertical.sidebar.menu > .item:first-child:before {
  384.   display: block !important;
  385. }
  386. .ui.vertical.sidebar.menu > .item::before {
  387.   top: auto;
  388.   bottom: 0px;
  389. }
  390.  
  391. /*--------------
  392.     Container
  393. ---------------*/
  394.  
  395. @media only screen and (max-width: 767px) {
  396.   .ui.menu > .ui.container {
  397.     width: 100% !important;
  398.     margin-left: 0em !important;
  399.     margin-right: 0em !important;
  400.   }
  401. }
  402. @media only screen and (min-width: 768px) {
  403.   .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
  404.     border-left: 1px solid rgba(34, 36, 38, 0.1);
  405.   }
  406. }
  407.  
  408.  
  409. /*******************************
  410.              States
  411. *******************************/
  412.  
  413.  
  414. /*--------------
  415.       Hover
  416. ---------------*/
  417.  
  418. .ui.link.menu .item:hover,
  419. .ui.menu .dropdown.item:hover,
  420. .ui.menu .link.item:hover,
  421. .ui.menu a.item:hover {
  422.   cursor: pointer;
  423.   background: rgba(0, 0, 0, 0.03);
  424.   color: rgba(0, 0, 0, 0.95);
  425. }
  426.  
  427. /*--------------
  428.      Pressed
  429. ---------------*/
  430.  
  431. .ui.link.menu .item:active,
  432. .ui.menu .link.item:active,
  433. .ui.menu a.item:active {
  434.   background: rgba(0, 0, 0, 0.03);
  435.   color: rgba(0, 0, 0, 0.95);
  436. }
  437.  
  438. /*--------------
  439.      Active
  440. ---------------*/
  441.  
  442. .ui.menu .active.item {
  443.   background: rgba(0, 0, 0, 0.05);
  444.   color: rgba(0, 0, 0, 0.95);
  445.   font-weight: normal;
  446.   -webkit-box-shadow: none;
  447.           box-shadow: none;
  448. }
  449. .ui.menu .active.item > i.icon {
  450.   opacity: 1;
  451. }
  452.  
  453. /*--------------
  454.   Active Hover
  455. ---------------*/
  456.  
  457. .ui.menu .active.item:hover,
  458. .ui.vertical.menu .active.item:hover {
  459.   background-color: rgba(0, 0, 0, 0.05);
  460.   color: rgba(0, 0, 0, 0.95);
  461. }
  462.  
  463. /*--------------
  464.      Disabled
  465. ---------------*/
  466.  
  467. .ui.menu .item.disabled,
  468. .ui.menu .item.disabled:hover {
  469.   cursor: default !important;
  470.   background-color: transparent !important;
  471.   color: rgba(40, 40, 40, 0.3) !important;
  472. }
  473.  
  474.  
  475. /*******************************
  476.              Types
  477. *******************************/
  478.  
  479.  
  480. /*------------------
  481. Floated Menu / Item
  482. -------------------*/
  483.  
  484.  
  485. /* Left Floated */
  486. .ui.menu:not(.vertical) .left.item,
  487. .ui.menu:not(.vertical) :not(.dropdown) > .left.menu {
  488.   display: -webkit-box;
  489.   display: -ms-flexbox;
  490.   display: flex;
  491.   margin-right: auto !important;
  492. }
  493.  
  494. /* Right Floated */
  495. .ui.menu:not(.vertical) .right.item,
  496. .ui.menu:not(.vertical) .right.menu {
  497.   display: -webkit-box;
  498.   display: -ms-flexbox;
  499.   display: flex;
  500.   margin-left: auto !important;
  501. }
  502.  
  503. /* Swapped Borders */
  504. .ui.menu .right.item::before,
  505. .ui.menu .right.menu > .item::before {
  506.   right: auto;
  507.   left: 0;
  508. }
  509.  
  510. /*--------------
  511.     Vertical
  512. ---------------*/
  513.  
  514. .ui.vertical.menu {
  515.   display: block;
  516.   -webkit-box-orient: vertical;
  517.   -webkit-box-direction: normal;
  518.       -ms-flex-direction: column;
  519.           flex-direction: column;
  520.   background: #FFFFFF;
  521.   -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  522.           box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  523. }
  524.  
  525. /*--- Item ---*/
  526.  
  527. .ui.vertical.menu .item {
  528.   display: block;
  529.   background: none;
  530.   border-top: none;
  531.   border-right: none;
  532. }
  533. .ui.vertical.menu > .item:first-child {
  534.   border-radius: 0.28571429rem 0.28571429rem 0px 0px;
  535. }
  536. .ui.vertical.menu > .item:last-child {
  537.   border-radius: 0px 0px 0.28571429rem 0.28571429rem;
  538. }
  539.  
  540. /*--- Label ---*/
  541.  
  542. .ui.vertical.menu .item > .label {
  543.   float: right;
  544.   text-align: center;
  545. }
  546.  
  547. /*--- Icon ---*/
  548.  
  549. .ui.vertical.menu .item > i.icon {
  550.   width: 1.18em;
  551.   float: right;
  552.   margin: 0em 0em 0em 0.5em;
  553. }
  554. .ui.vertical.menu .item > .label + i.icon {
  555.   float: none;
  556.   margin: 0em 0.5em 0em 0em;
  557. }
  558.  
  559. /*--- Border ---*/
  560.  
  561. .ui.vertical.menu .item:before {
  562.   position: absolute;
  563.   content: '';
  564.   top: 0%;
  565.   left: 0px;
  566.   width: 100%;
  567.   height: 1px;
  568.   background: rgba(34, 36, 38, 0.1);
  569. }
  570. .ui.vertical.menu .item:first-child:before {
  571.   display: none !important;
  572. }
  573.  
  574. /*--- Sub Menu ---*/
  575.  
  576. .ui.vertical.menu .item > .menu {
  577.   margin: 0.5em -1.14285714em 0em;
  578. }
  579. .ui.vertical.menu .menu .item {
  580.   background: none;
  581.   padding: 0.5em 1.33333333em;
  582.   font-size: 0.85714286em;
  583.   color: rgba(0, 0, 0, 0.5);
  584. }
  585. .ui.vertical.menu .item .menu a.item:hover,
  586. .ui.vertical.menu .item .menu .link.item:hover {
  587.   color: rgba(0, 0, 0, 0.85);
  588. }
  589. .ui.vertical.menu .menu .item:before {
  590.   display: none;
  591. }
  592.  
  593. /* Vertical Active */
  594. .ui.vertical.menu .active.item {
  595.   background: rgba(0, 0, 0, 0.05);
  596.   border-radius: 0em;
  597.   -webkit-box-shadow: none;
  598.           box-shadow: none;
  599. }
  600. .ui.vertical.menu > .active.item:first-child {
  601.   border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  602. }
  603. .ui.vertical.menu > .active.item:last-child {
  604.   border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  605. }
  606. .ui.vertical.menu > .active.item:only-child {
  607.   border-radius: 0.28571429rem;
  608. }
  609. .ui.vertical.menu .active.item .menu .active.item {
  610.   border-left: none;
  611. }
  612. .ui.vertical.menu .item .menu .active.item {
  613.   background-color: transparent;
  614.   font-weight: bold;
  615.   color: rgba(0, 0, 0, 0.95);
  616. }
  617.  
  618. /*--------------
  619.      Tabular
  620. ---------------*/
  621.  
  622. .ui.tabular.menu {
  623.   border-radius: 0em;
  624.   -webkit-box-shadow: none !important;
  625.           box-shadow: none !important;
  626.   border: none;
  627.   background: none transparent;
  628.   border-bottom: 1px solid #D4D4D5;
  629. }
  630. .ui.tabular.fluid.menu {
  631.   width: calc(100% +  2px ) !important;
  632. }
  633. .ui.tabular.menu .item {
  634.   background: transparent;
  635.   border-bottom: none;
  636.   border-left: 1px solid transparent;
  637.   border-right: 1px solid transparent;
  638.   border-top: 2px solid transparent;
  639.   padding: 0.92857143em 1.42857143em;
  640.   color: rgba(0, 0, 0, 0.87);
  641. }
  642. .ui.tabular.menu .item:before {
  643.   display: none;
  644. }
  645.  
  646. /* Hover */
  647. .ui.tabular.menu .item:hover {
  648.   background-color: transparent;
  649.   color: rgba(0, 0, 0, 0.8);
  650. }
  651.  
  652. /* Active */
  653. .ui.tabular.menu .active.item {
  654.   background: none #FFFFFF;
  655.   color: rgba(0, 0, 0, 0.95);
  656.   border-top-width: 1px;
  657.   border-color: #D4D4D5;
  658.   font-weight: bold;
  659.   margin-bottom: -1px;
  660.   -webkit-box-shadow: none;
  661.           box-shadow: none;
  662.   border-radius: 0.28571429rem 0.28571429rem 0px 0px !important;
  663. }
  664.  
  665. /* Coupling with segment for attachment */
  666. .ui.tabular.menu + .attached:not(.top).segment,
  667. .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
  668.   border-top: none;
  669.   margin-left: 0px;
  670.   margin-top: 0px;
  671.   margin-right: 0px;
  672.   width: 100%;
  673. }
  674. .top.attached.segment + .ui.bottom.tabular.menu {
  675.   position: relative;
  676.   width: calc(100% +  2px );
  677.   left: -1px;
  678. }
  679.  
  680. /* Bottom Vertical Tabular */
  681. .ui.bottom.tabular.menu {
  682.   background: none transparent;
  683.   border-radius: 0em;
  684.   -webkit-box-shadow: none !important;
  685.           box-shadow: none !important;
  686.   border-bottom: none;
  687.   border-top: 1px solid #D4D4D5;
  688. }
  689. .ui.bottom.tabular.menu .item {
  690.   background: none;
  691.   border-left: 1px solid transparent;
  692.   border-right: 1px solid transparent;
  693.   border-bottom: 1px solid transparent;
  694.   border-top: none;
  695. }
  696. .ui.bottom.tabular.menu .active.item {
  697.   background: none #FFFFFF;
  698.   color: rgba(0, 0, 0, 0.95);
  699.   border-color: #D4D4D5;
  700.   margin: -1px 0px 0px 0px;
  701.   border-radius: 0px 0px 0.28571429rem 0.28571429rem !important;
  702. }
  703.  
  704. /* Vertical Tabular (Left) */
  705. .ui.vertical.tabular.menu {
  706.   background: none transparent;
  707.   border-radius: 0em;
  708.   -webkit-box-shadow: none !important;
  709.           box-shadow: none !important;
  710.   border-bottom: none;
  711.   border-right: 1px solid #D4D4D5;
  712. }
  713. .ui.vertical.tabular.menu .item {
  714.   background: none;
  715.   border-left: 1px solid transparent;
  716.   border-bottom: 1px solid transparent;
  717.   border-top: 1px solid transparent;
  718.   border-right: none;
  719. }
  720. .ui.vertical.tabular.menu .active.item {
  721.   background: none #FFFFFF;
  722.   color: rgba(0, 0, 0, 0.95);
  723.   border-color: #D4D4D5;
  724.   margin: 0px -1px 0px 0px;
  725.   border-radius: 0.28571429rem 0px 0px 0.28571429rem !important;
  726. }
  727.  
  728. /* Vertical Right Tabular */
  729. .ui.vertical.right.tabular.menu {
  730.   background: none transparent;
  731.   border-radius: 0em;
  732.   -webkit-box-shadow: none !important;
  733.           box-shadow: none !important;
  734.   border-bottom: none;
  735.   border-right: none;
  736.   border-left: 1px solid #D4D4D5;
  737. }
  738. .ui.vertical.right.tabular.menu .item {
  739.   background: none;
  740.   border-right: 1px solid transparent;
  741.   border-bottom: 1px solid transparent;
  742.   border-top: 1px solid transparent;
  743.   border-left: none;
  744. }
  745. .ui.vertical.right.tabular.menu .active.item {
  746.   background: none #FFFFFF;
  747.   color: rgba(0, 0, 0, 0.95);
  748.   border-color: #D4D4D5;
  749.   margin: 0px 0px 0px -1px;
  750.   border-radius: 0px 0.28571429rem 0.28571429rem 0px !important;
  751. }
  752.  
  753. /* Dropdown */
  754. .ui.tabular.menu .active.dropdown.item {
  755.   margin-bottom: 0px;
  756.   border-left: 1px solid transparent;
  757.   border-right: 1px solid transparent;
  758.   border-top: 2px solid transparent;
  759.   border-bottom: none;
  760. }
  761.  
  762. /*--------------
  763.    Pagination
  764. ---------------*/
  765.  
  766. .ui.pagination.menu {
  767.   margin: 0em;
  768.   display: -webkit-inline-box;
  769.   display: -ms-inline-flexbox;
  770.   display: inline-flex;
  771.   vertical-align: middle;
  772. }
  773. .ui.pagination.menu .item:last-child {
  774.   border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  775. }
  776. .ui.compact.menu .item:last-child {
  777.   border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  778. }
  779. .ui.pagination.menu .item:last-child:before {
  780.   display: none;
  781. }
  782. .ui.pagination.menu .item {
  783.   min-width: 3em;
  784.   text-align: center;
  785. }
  786. .ui.pagination.menu .icon.item i.icon {
  787.   vertical-align: top;
  788. }
  789.  
  790. /* Active */
  791. .ui.pagination.menu .active.item {
  792.   border-top: none;
  793.   padding-top: 0.92857143em;
  794.   background-color: rgba(0, 0, 0, 0.05);
  795.   color: rgba(0, 0, 0, 0.95);
  796.   -webkit-box-shadow: none;
  797.           box-shadow: none;
  798. }
  799.  
  800. /*--------------
  801.    Secondary
  802. ---------------*/
  803.  
  804. .ui.secondary.menu {
  805.   background: none;
  806.   margin-left: -0.35714286em;
  807.   margin-right: -0.35714286em;
  808.   border-radius: 0em;
  809.   border: none;
  810.   -webkit-box-shadow: none;
  811.           box-shadow: none;
  812. }
  813.  
  814. /* Item */
  815. .ui.secondary.menu .item {
  816.   -ms-flex-item-align: center;
  817.       align-self: center;
  818.   -webkit-box-shadow: none;
  819.           box-shadow: none;
  820.   border: none;
  821.   padding: 0.78571429em 0.92857143em;
  822.   margin: 0em 0.35714286em;
  823.   background: none;
  824.   -webkit-transition: color 0.1s ease;
  825.   transition: color 0.1s ease;
  826.   border-radius: 0.28571429rem;
  827. }
  828.  
  829. /* No Divider */
  830. .ui.secondary.menu .item:before {
  831.   display: none !important;
  832. }
  833.  
  834. /* Header */
  835. .ui.secondary.menu .header.item {
  836.   border-radius: 0em;
  837.   border-right: none;
  838.   background: none transparent;
  839. }
  840.  
  841. /* Image */
  842. .ui.secondary.menu .item > img:not(.ui) {
  843.   margin: 0em;
  844. }
  845.  
  846. /* Hover */
  847. .ui.secondary.menu .dropdown.item:hover,
  848. .ui.secondary.menu .link.item:hover,
  849. .ui.secondary.menu a.item:hover {
  850.   background: rgba(0, 0, 0, 0.05);
  851.   color: rgba(0, 0, 0, 0.95);
  852. }
  853.  
  854. /* Active */
  855. .ui.secondary.menu .active.item {
  856.   -webkit-box-shadow: none;
  857.           box-shadow: none;
  858.   background: rgba(0, 0, 0, 0.05);
  859.   color: rgba(0, 0, 0, 0.95);
  860.   border-radius: 0.28571429rem;
  861. }
  862.  
  863. /* Active Hover */
  864. .ui.secondary.menu .active.item:hover {
  865.   -webkit-box-shadow: none;
  866.           box-shadow: none;
  867.   background: rgba(0, 0, 0, 0.05);
  868.   color: rgba(0, 0, 0, 0.95);
  869. }
  870.  
  871. /* Inverted */
  872. .ui.secondary.inverted.menu .link.item,
  873. .ui.secondary.inverted.menu a.item {
  874.   color: rgba(255, 255, 255, 0.7) !important;
  875. }
  876. .ui.secondary.inverted.menu .dropdown.item:hover,
  877. .ui.secondary.inverted.menu .link.item:hover,
  878. .ui.secondary.inverted.menu a.item:hover {
  879.   background: rgba(255, 255, 255, 0.08);
  880.   color: #ffffff !important;
  881. }
  882. .ui.secondary.inverted.menu .active.item {
  883.   background: rgba(255, 255, 255, 0.15);
  884.   color: #ffffff !important;
  885. }
  886.  
  887. /* Fix item margins */
  888. .ui.secondary.item.menu {
  889.   margin-left: 0em;
  890.   margin-right: 0em;
  891. }
  892. .ui.secondary.item.menu .item:last-child {
  893.   margin-right: 0em;
  894. }
  895. .ui.secondary.attached.menu {
  896.   -webkit-box-shadow: none;
  897.           box-shadow: none;
  898. }
  899.  
  900. /* Sub Menu */
  901. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
  902.   margin: 0em -0.92857143em;
  903. }
  904. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
  905.   margin: 0em;
  906.   padding: 0.5em 1.33333333em;
  907. }
  908.  
  909. /*---------------------
  910.    Secondary Vertical
  911. -----------------------*/
  912.  
  913. .ui.secondary.vertical.menu > .item {
  914.   border: none;
  915.   margin: 0em 0em 0.35714286em;
  916.   border-radius: 0.28571429rem !important;
  917. }
  918. .ui.secondary.vertical.menu > .header.item {
  919.   border-radius: 0em;
  920. }
  921.  
  922. /* Sub Menu */
  923. .ui.vertical.secondary.menu .item > .menu .item {
  924.   background-color: transparent;
  925. }
  926.  
  927. /* Inverted */
  928. .ui.secondary.inverted.menu {
  929.   background-color: transparent;
  930. }
  931.  
  932. /*---------------------
  933.    Secondary Pointing
  934. -----------------------*/
  935.  
  936. .ui.secondary.pointing.menu {
  937.   margin-left: 0em;
  938.   margin-right: 0em;
  939.   border-bottom: 2px solid rgba(34, 36, 38, 0.15);
  940. }
  941. .ui.secondary.pointing.menu .item {
  942.   border-bottom-color: transparent;
  943.   border-bottom-style: solid;
  944.   border-radius: 0em;
  945.   -ms-flex-item-align: end;
  946.       align-self: flex-end;
  947.   margin: 0em 0em -2px;
  948.   padding: 0.85714286em 1.14285714em;
  949.   border-bottom-width: 2px;
  950.   -webkit-transition: color 0.1s ease;
  951.   transition: color 0.1s ease;
  952. }
  953.  
  954. /* Item Types */
  955. .ui.secondary.pointing.menu .header.item {
  956.   color: rgba(0, 0, 0, 0.85) !important;
  957. }
  958. .ui.secondary.pointing.menu .text.item {
  959.   -webkit-box-shadow: none !important;
  960.           box-shadow: none !important;
  961. }
  962. .ui.secondary.pointing.menu .item:after {
  963.   display: none;
  964. }
  965.  
  966. /* Hover */
  967. .ui.secondary.pointing.menu .dropdown.item:hover,
  968. .ui.secondary.pointing.menu .link.item:hover,
  969. .ui.secondary.pointing.menu a.item:hover {
  970.   background-color: transparent;
  971.   color: rgba(0, 0, 0, 0.87);
  972. }
  973.  
  974. /* Pressed */
  975. .ui.secondary.pointing.menu .dropdown.item:active,
  976. .ui.secondary.pointing.menu .link.item:active,
  977. .ui.secondary.pointing.menu a.item:active {
  978.   background-color: transparent;
  979.   border-color: rgba(34, 36, 38, 0.15);
  980. }
  981.  
  982. /* Active */
  983. .ui.secondary.pointing.menu .active.item {
  984.   background-color: transparent;
  985.   -webkit-box-shadow: none;
  986.           box-shadow: none;
  987.   border-color: #1B1C1D;
  988.   font-weight: bold;
  989.   color: rgba(0, 0, 0, 0.95);
  990. }
  991.  
  992. /* Active Hover */
  993. .ui.secondary.pointing.menu .active.item:hover {
  994.   border-color: #1B1C1D;
  995.   color: rgba(0, 0, 0, 0.95);
  996. }
  997.  
  998. /* Active Dropdown */
  999. .ui.secondary.pointing.menu .active.dropdown.item {
  1000.   border-color: transparent;
  1001. }
  1002.  
  1003. /* Vertical Pointing */
  1004. .ui.secondary.vertical.pointing.menu {
  1005.   border-bottom-width: 0px;
  1006.   border-right-width: 2px;
  1007.   border-right-style: solid;
  1008.   border-right-color: rgba(34, 36, 38, 0.15);
  1009. }
  1010. .ui.secondary.vertical.pointing.menu .item {
  1011.   border-bottom: none;
  1012.   border-right-style: solid;
  1013.   border-right-color: transparent;
  1014.   border-radius: 0em !important;
  1015.   margin: 0em -2px 0em 0em;
  1016.   border-right-width: 2px;
  1017. }
  1018.  
  1019. /* Vertical Active */
  1020. .ui.secondary.vertical.pointing.menu .active.item {
  1021.   border-color: #1B1C1D;
  1022. }
  1023.  
  1024. /* Inverted */
  1025. .ui.secondary.inverted.pointing.menu {
  1026.   border-color: rgba(255, 255, 255, 0.1);
  1027. }
  1028. .ui.secondary.inverted.pointing.menu {
  1029.   border-width: 2px;
  1030.   border-color: rgba(34, 36, 38, 0.15);
  1031. }
  1032. .ui.secondary.inverted.pointing.menu .item {
  1033.   color: rgba(255, 255, 255, 0.9);
  1034. }
  1035. .ui.secondary.inverted.pointing.menu .header.item {
  1036.   color: #FFFFFF !important;
  1037. }
  1038.  
  1039. /* Hover */
  1040. .ui.secondary.inverted.pointing.menu .link.item:hover,
  1041. .ui.secondary.inverted.pointing.menu a.item:hover {
  1042.   color: rgba(0, 0, 0, 0.95);
  1043. }
  1044.  
  1045. /* Active */
  1046. .ui.secondary.inverted.pointing.menu .active.item {
  1047.   border-color: #FFFFFF;
  1048.   color: #ffffff;
  1049. }
  1050.  
  1051. /*--------------
  1052.     Text Menu
  1053. ---------------*/
  1054.  
  1055. .ui.text.menu {
  1056.   background: none transparent;
  1057.   border-radius: 0px;
  1058.   -webkit-box-shadow: none;
  1059.           box-shadow: none;
  1060.   border: none;
  1061.   margin: 1em -0.5em;
  1062. }
  1063. .ui.text.menu .item {
  1064.   border-radius: 0px;
  1065.   -webkit-box-shadow: none;
  1066.           box-shadow: none;
  1067.   -ms-flex-item-align: center;
  1068.       align-self: center;
  1069.   margin: 0em 0em;
  1070.   padding: 0.35714286em 0.5em;
  1071.   font-weight: normal;
  1072.   color: rgba(0, 0, 0, 0.6);
  1073.   -webkit-transition: opacity 0.1s ease;
  1074.   transition: opacity 0.1s ease;
  1075. }
  1076.  
  1077. /* Border */
  1078. .ui.text.menu .item:before,
  1079. .ui.text.menu .menu .item:before {
  1080.   display: none !important;
  1081. }
  1082.  
  1083. /* Header */
  1084. .ui.text.menu .header.item {
  1085.   background-color: transparent;
  1086.   opacity: 1;
  1087.   color: rgba(0, 0, 0, 0.85);
  1088.   font-size: 0.92857143em;
  1089.   text-transform: uppercase;
  1090.   font-weight: bold;
  1091. }
  1092.  
  1093. /* Image */
  1094. .ui.text.menu .item > img:not(.ui) {
  1095.   margin: 0em;
  1096. }
  1097.  
  1098. /*--- fluid text ---*/
  1099.  
  1100. .ui.text.item.menu .item {
  1101.   margin: 0em;
  1102. }
  1103.  
  1104. /*--- vertical text ---*/
  1105.  
  1106. .ui.vertical.text.menu {
  1107.   margin: 1em 0em;
  1108. }
  1109. .ui.vertical.text.menu:first-child {
  1110.   margin-top: 0rem;
  1111. }
  1112. .ui.vertical.text.menu:last-child {
  1113.   margin-bottom: 0rem;
  1114. }
  1115. .ui.vertical.text.menu .item {
  1116.   margin: 0.57142857em 0em;
  1117.   padding-left: 0em;
  1118.   padding-right: 0em;
  1119. }
  1120. .ui.vertical.text.menu .item > i.icon {
  1121.   float: none;
  1122.   margin: 0em 0.35714286em 0em 0em;
  1123. }
  1124. .ui.vertical.text.menu .header.item {
  1125.   margin: 0.57142857em 0em 0.71428571em;
  1126. }
  1127.  
  1128. /* Vertical Sub Menu */
  1129. .ui.vertical.text.menu .item:not(.dropdown) > .menu {
  1130.   margin: 0em;
  1131. }
  1132. .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
  1133.   margin: 0em;
  1134.   padding: 0.5em 0em;
  1135. }
  1136.  
  1137. /*--- hover ---*/
  1138.  
  1139. .ui.text.menu .item:hover {
  1140.   opacity: 1;
  1141.   background-color: transparent;
  1142. }
  1143.  
  1144. /*--- active ---*/
  1145.  
  1146. .ui.text.menu .active.item {
  1147.   background-color: transparent;
  1148.   border: none;
  1149.   -webkit-box-shadow: none;
  1150.           box-shadow: none;
  1151.   font-weight: normal;
  1152.   color: rgba(0, 0, 0, 0.95);
  1153. }
  1154.  
  1155. /*--- active hover ---*/
  1156.  
  1157. .ui.text.menu .active.item:hover {
  1158.   background-color: transparent;
  1159. }
  1160.  
  1161. /* Disable Bariations */
  1162. .ui.text.pointing.menu .active.item:after {
  1163.   -webkit-box-shadow: none;
  1164.           box-shadow: none;
  1165. }
  1166. .ui.text.attached.menu {
  1167.   -webkit-box-shadow: none;
  1168.           box-shadow: none;
  1169. }
  1170.  
  1171. /* Inverted */
  1172. .ui.inverted.text.menu,
  1173. .ui.inverted.text.menu .item,
  1174. .ui.inverted.text.menu .item:hover,
  1175. .ui.inverted.text.menu .active.item {
  1176.   background-color: transparent !important;
  1177. }
  1178.  
  1179. /* Fluid */
  1180. .ui.fluid.text.menu {
  1181.   margin-left: 0em;
  1182.   margin-right: 0em;
  1183. }
  1184.  
  1185. /*--------------
  1186.     Icon Only
  1187. ---------------*/
  1188.  
  1189.  
  1190. /* Vertical Menu */
  1191. .ui.vertical.icon.menu {
  1192.   display: inline-block;
  1193.   width: auto;
  1194. }
  1195.  
  1196. /* Item */
  1197. .ui.icon.menu .item {
  1198.   height: auto;
  1199.   text-align: center;
  1200.   color: #1B1C1D;
  1201. }
  1202.  
  1203. /* Icon */
  1204. .ui.icon.menu .item > .icon:not(.dropdown) {
  1205.   margin: 0;
  1206.   opacity: 1;
  1207. }
  1208.  
  1209. /* Icon Gylph */
  1210. .ui.icon.menu .icon:before {
  1211.   opacity: 1;
  1212. }
  1213.  
  1214. /* (x) Item Icon */
  1215. .ui.menu .icon.item > .icon {
  1216.   width: auto;
  1217.   margin: 0em auto;
  1218. }
  1219.  
  1220. /* Vertical Icon */
  1221. .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
  1222.   display: block;
  1223.   opacity: 1;
  1224.   margin: 0em auto;
  1225.   float: none;
  1226. }
  1227.  
  1228. /* Inverted */
  1229. .ui.inverted.icon.menu .item {
  1230.   color: #FFFFFF;
  1231. }
  1232.  
  1233. /*--------------
  1234.    Labeled Icon
  1235. ---------------*/
  1236.  
  1237.  
  1238. /* Menu */
  1239. .ui.labeled.icon.menu {
  1240.   text-align: center;
  1241. }
  1242.  
  1243. /* Item */
  1244. .ui.labeled.icon.menu .item {
  1245.   min-width: 6em;
  1246.   -webkit-box-orient: vertical;
  1247.   -webkit-box-direction: normal;
  1248.       -ms-flex-direction: column;
  1249.           flex-direction: column;
  1250. }
  1251.  
  1252. /* Icon */
  1253. .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
  1254.   height: 1em;
  1255.   display: block;
  1256.   font-size: 1.71428571em !important;
  1257.   margin: 0em auto 0.5rem !important;
  1258. }
  1259.  
  1260. /* Fluid */
  1261. .ui.fluid.labeled.icon.menu > .item {
  1262.   min-width: 0em;
  1263. }
  1264.  
  1265.  
  1266. /*******************************
  1267.            Variations
  1268. *******************************/
  1269.  
  1270.  
  1271. /*--------------
  1272.     Stackable
  1273. ---------------*/
  1274.  
  1275. @media only screen and (max-width: 767px) {
  1276.   .ui.stackable.menu {
  1277.     -webkit-box-orient: vertical;
  1278.     -webkit-box-direction: normal;
  1279.         -ms-flex-direction: column;
  1280.             flex-direction: column;
  1281.   }
  1282.   .ui.stackable.menu .item {
  1283.     width: 100% !important;
  1284.   }
  1285.   .ui.stackable.menu .item:before {
  1286.     position: absolute;
  1287.     content: '';
  1288.     top: auto;
  1289.     bottom: 0px;
  1290.     left: 0px;
  1291.     width: 100%;
  1292.     height: 1px;
  1293.     background: rgba(34, 36, 38, 0.1);
  1294.   }
  1295.   .ui.stackable.menu .left.menu,
  1296.   .ui.stackable.menu .left.item {
  1297.     margin-right: 0 !important;
  1298.   }
  1299.   .ui.stackable.menu .right.menu,
  1300.   .ui.stackable.menu .right.item {
  1301.     margin-left: 0 !important;
  1302.   }
  1303.   .ui.stackable.menu .right.menu,
  1304.   .ui.stackable.menu .left.menu {
  1305.     -webkit-box-orient: vertical;
  1306.     -webkit-box-direction: normal;
  1307.         -ms-flex-direction: column;
  1308.             flex-direction: column;
  1309.   }
  1310. }
  1311.  
  1312. /*--------------
  1313.      Colors
  1314. ---------------*/
  1315.  
  1316.  
  1317. /*--- Standard Colors  ---*/
  1318.  
  1319. .ui.menu .red.active.item,
  1320. .ui.red.menu .active.item {
  1321.   border-color: #DB2828 !important;
  1322.   color: #DB2828 !important;
  1323. }
  1324. .ui.menu .orange.active.item,
  1325. .ui.orange.menu .active.item {
  1326.   border-color: #F2711C !important;
  1327.   color: #F2711C !important;
  1328. }
  1329. .ui.menu .yellow.active.item,
  1330. .ui.yellow.menu .active.item {
  1331.   border-color: #FBBD08 !important;
  1332.   color: #FBBD08 !important;
  1333. }
  1334. .ui.menu .olive.active.item,
  1335. .ui.olive.menu .active.item {
  1336.   border-color: #B5CC18 !important;
  1337.   color: #B5CC18 !important;
  1338. }
  1339. .ui.menu .green.active.item,
  1340. .ui.green.menu .active.item {
  1341.   border-color: #21BA45 !important;
  1342.   color: #21BA45 !important;
  1343. }
  1344. .ui.menu .teal.active.item,
  1345. .ui.teal.menu .active.item {
  1346.   border-color: #00B5AD !important;
  1347.   color: #00B5AD !important;
  1348. }
  1349. .ui.menu .blue.active.item,
  1350. .ui.blue.menu .active.item {
  1351.   border-color: #2185D0 !important;
  1352.   color: #2185D0 !important;
  1353. }
  1354. .ui.menu .violet.active.item,
  1355. .ui.violet.menu .active.item {
  1356.   border-color: #6435C9 !important;
  1357.   color: #6435C9 !important;
  1358. }
  1359. .ui.menu .purple.active.item,
  1360. .ui.purple.menu .active.item {
  1361.   border-color: #A333C8 !important;
  1362.   color: #A333C8 !important;
  1363. }
  1364. .ui.menu .pink.active.item,
  1365. .ui.pink.menu .active.item {
  1366.   border-color: #E03997 !important;
  1367.   color: #E03997 !important;
  1368. }
  1369. .ui.menu .brown.active.item,
  1370. .ui.brown.menu .active.item {
  1371.   border-color: #A5673F !important;
  1372.   color: #A5673F !important;
  1373. }
  1374. .ui.menu .grey.active.item,
  1375. .ui.grey.menu .active.item {
  1376.   border-color: #767676 !important;
  1377.   color: #767676 !important;
  1378. }
  1379.  
  1380. /*--------------
  1381.     Inverted
  1382. ---------------*/
  1383.  
  1384. .ui.inverted.menu {
  1385.   border: 0px solid transparent;
  1386.   background: #1B1C1D;
  1387.   -webkit-box-shadow: none;
  1388.           box-shadow: none;
  1389. }
  1390.  
  1391. /* Menu Item */
  1392. .ui.inverted.menu .item,
  1393. .ui.inverted.menu .item > a:not(.ui) {
  1394.   background: transparent;
  1395.   color: rgba(255, 255, 255, 0.9);
  1396. }
  1397. .ui.inverted.menu .item.menu {
  1398.   background: transparent;
  1399. }
  1400.  
  1401. /*--- Border ---*/
  1402.  
  1403. .ui.inverted.menu .item:before {
  1404.   background: rgba(255, 255, 255, 0.08);
  1405. }
  1406. .ui.vertical.inverted.menu .item:before {
  1407.   background: rgba(255, 255, 255, 0.08);
  1408. }
  1409.  
  1410. /* Sub Menu */
  1411. .ui.vertical.inverted.menu .menu .item,
  1412. .ui.vertical.inverted.menu .menu .item a:not(.ui) {
  1413.   color: rgba(255, 255, 255, 0.5);
  1414. }
  1415.  
  1416. /* Header */
  1417. .ui.inverted.menu .header.item {
  1418.   margin: 0em;
  1419.   background: transparent;
  1420.   -webkit-box-shadow: none;
  1421.           box-shadow: none;
  1422. }
  1423.  
  1424. /* Disabled */
  1425. .ui.inverted.menu .item.disabled,
  1426. .ui.inverted.menu .item.disabled:hover {
  1427.   color: rgba(225, 225, 225, 0.3);
  1428. }
  1429.  
  1430. /*--- Hover ---*/
  1431.  
  1432. .ui.link.inverted.menu .item:hover,
  1433. .ui.inverted.menu .dropdown.item:hover,
  1434. .ui.inverted.menu .link.item:hover,
  1435. .ui.inverted.menu a.item:hover {
  1436.   background: rgba(255, 255, 255, 0.08);
  1437.   color: #ffffff;
  1438. }
  1439. .ui.vertical.inverted.menu .item .menu a.item:hover,
  1440. .ui.vertical.inverted.menu .item .menu .link.item:hover {
  1441.   background: transparent;
  1442.   color: #ffffff;
  1443. }
  1444.  
  1445. /*--- Pressed ---*/
  1446.  
  1447. .ui.inverted.menu a.item:active,
  1448. .ui.inverted.menu .link.item:active {
  1449.   background: rgba(255, 255, 255, 0.08);
  1450.   color: #ffffff;
  1451. }
  1452.  
  1453. /*--- Active ---*/
  1454.  
  1455. .ui.inverted.menu .active.item {
  1456.   background: rgba(255, 255, 255, 0.15);
  1457.   color: #ffffff !important;
  1458. }
  1459. .ui.inverted.vertical.menu .item .menu .active.item {
  1460.   background: transparent;
  1461.   color: #FFFFFF;
  1462. }
  1463. .ui.inverted.pointing.menu .active.item:after {
  1464.   background: #3D3E3F !important;
  1465.   margin: 0em !important;
  1466.   -webkit-box-shadow: none !important;
  1467.           box-shadow: none !important;
  1468.   border: none !important;
  1469. }
  1470.  
  1471. /*--- Active Hover ---*/
  1472.  
  1473. .ui.inverted.menu .active.item:hover {
  1474.   background: rgba(255, 255, 255, 0.15);
  1475.   color: #FFFFFF !important;
  1476. }
  1477. .ui.inverted.pointing.menu .active.item:hover:after {
  1478.   background: #3D3E3F !important;
  1479. }
  1480.  
  1481. /*--------------
  1482.      Floated
  1483. ---------------*/
  1484.  
  1485. .ui.floated.menu {
  1486.   float: left;
  1487.   margin: 0rem 0.5rem 0rem 0rem;
  1488. }
  1489. .ui.floated.menu .item:last-child:before {
  1490.   display: none;
  1491. }
  1492. .ui.right.floated.menu {
  1493.   float: right;
  1494.   margin: 0rem 0rem 0rem 0.5rem;
  1495. }
  1496.  
  1497. /*--------------
  1498.     Inverted
  1499. ---------------*/
  1500.  
  1501.  
  1502. /* Red */
  1503. .ui.inverted.menu .red.active.item,
  1504. .ui.inverted.red.menu {
  1505.   background-color: #DB2828;
  1506. }
  1507. .ui.inverted.red.menu .item:before {
  1508.   background-color: rgba(34, 36, 38, 0.1);
  1509. }
  1510. .ui.inverted.red.menu .active.item {
  1511.   background-color: rgba(0, 0, 0, 0.1) !important;
  1512. }
  1513.  
  1514. /* Orange */
  1515. .ui.inverted.menu .orange.active.item,
  1516. .ui.inverted.orange.menu {
  1517.   background-color: #F2711C;
  1518. }
  1519. .ui.inverted.orange.menu .item:before {
  1520.   background-color: rgba(34, 36, 38, 0.1);
  1521. }
  1522. .ui.inverted.orange.menu .active.item {
  1523.   background-color: rgba(0, 0, 0, 0.1) !important;
  1524. }
  1525.  
  1526. /* Yellow */
  1527. .ui.inverted.menu .yellow.active.item,
  1528. .ui.inverted.yellow.menu {
  1529.   background-color: #FBBD08;
  1530. }
  1531. .ui.inverted.yellow.menu .item:before {
  1532.   background-color: rgba(34, 36, 38, 0.1);
  1533. }
  1534. .ui.inverted.yellow.menu .active.item {
  1535.   background-color: rgba(0, 0, 0, 0.1) !important;
  1536. }
  1537.  
  1538. /* Olive */
  1539. .ui.inverted.menu .olive.active.item,
  1540. .ui.inverted.olive.menu {
  1541.   background-color: #B5CC18;
  1542. }
  1543. .ui.inverted.olive.menu .item:before {
  1544.   background-color: rgba(34, 36, 38, 0.1);
  1545. }
  1546. .ui.inverted.olive.menu .active.item {
  1547.   background-color: rgba(0, 0, 0, 0.1) !important;
  1548. }
  1549.  
  1550. /* Green */
  1551. .ui.inverted.menu .green.active.item,
  1552. .ui.inverted.green.menu {
  1553.   background-color: #21BA45;
  1554. }
  1555. .ui.inverted.green.menu .item:before {
  1556.   background-color: rgba(34, 36, 38, 0.1);
  1557. }
  1558. .ui.inverted.green.menu .active.item {
  1559.   background-color: rgba(0, 0, 0, 0.1) !important;
  1560. }
  1561.  
  1562. /* Teal */
  1563. .ui.inverted.menu .teal.active.item,
  1564. .ui.inverted.teal.menu {
  1565.   background-color: #00B5AD;
  1566. }
  1567. .ui.inverted.teal.menu .item:before {
  1568.   background-color: rgba(34, 36, 38, 0.1);
  1569. }
  1570. .ui.inverted.teal.menu .active.item {
  1571.   background-color: rgba(0, 0, 0, 0.1) !important;
  1572. }
  1573.  
  1574. /* Blue */
  1575. .ui.inverted.menu .blue.active.item,
  1576. .ui.inverted.blue.menu {
  1577.   background-color: #2185D0;
  1578. }
  1579. .ui.inverted.blue.menu .item:before {
  1580.   background-color: rgba(34, 36, 38, 0.1);
  1581. }
  1582. .ui.inverted.blue.menu .active.item {
  1583.   background-color: rgba(0, 0, 0, 0.1) !important;
  1584. }
  1585.  
  1586. /* Violet */
  1587. .ui.inverted.menu .violet.active.item,
  1588. .ui.inverted.violet.menu {
  1589.   background-color: #6435C9;
  1590. }
  1591. .ui.inverted.violet.menu .item:before {
  1592.   background-color: rgba(34, 36, 38, 0.1);
  1593. }
  1594. .ui.inverted.violet.menu .active.item {
  1595.   background-color: rgba(0, 0, 0, 0.1) !important;
  1596. }
  1597.  
  1598. /* Purple */
  1599. .ui.inverted.menu .purple.active.item,
  1600. .ui.inverted.purple.menu {
  1601.   background-color: #A333C8;
  1602. }
  1603. .ui.inverted.purple.menu .item:before {
  1604.   background-color: rgba(34, 36, 38, 0.1);
  1605. }
  1606. .ui.inverted.purple.menu .active.item {
  1607.   background-color: rgba(0, 0, 0, 0.1) !important;
  1608. }
  1609.  
  1610. /* Pink */
  1611. .ui.inverted.menu .pink.active.item,
  1612. .ui.inverted.pink.menu {
  1613.   background-color: #E03997;
  1614. }
  1615. .ui.inverted.pink.menu .item:before {
  1616.   background-color: rgba(34, 36, 38, 0.1);
  1617. }
  1618. .ui.inverted.pink.menu .active.item {
  1619.   background-color: rgba(0, 0, 0, 0.1) !important;
  1620. }
  1621.  
  1622. /* Brown */
  1623. .ui.inverted.menu .brown.active.item,
  1624. .ui.inverted.brown.menu {
  1625.   background-color: #A5673F;
  1626. }
  1627. .ui.inverted.brown.menu .item:before {
  1628.   background-color: rgba(34, 36, 38, 0.1);
  1629. }
  1630. .ui.inverted.brown.menu .active.item {
  1631.   background-color: rgba(0, 0, 0, 0.1) !important;
  1632. }
  1633.  
  1634. /* Grey */
  1635. .ui.inverted.menu .grey.active.item,
  1636. .ui.inverted.grey.menu {
  1637.   background-color: #767676;
  1638. }
  1639. .ui.inverted.grey.menu .item:before {
  1640.   background-color: rgba(34, 36, 38, 0.1);
  1641. }
  1642. .ui.inverted.grey.menu .active.item {
  1643.   background-color: rgba(0, 0, 0, 0.1) !important;
  1644. }
  1645.  
  1646. /*--------------
  1647.      Fitted
  1648. ---------------*/
  1649.  
  1650. .ui.fitted.menu .item,
  1651. .ui.fitted.menu .item .menu .item,
  1652. .ui.menu .fitted.item {
  1653.   padding: 0em;
  1654. }
  1655. .ui.horizontally.fitted.menu .item,
  1656. .ui.horizontally.fitted.menu .item .menu .item,
  1657. .ui.menu .horizontally.fitted.item {
  1658.   padding-top: 0.92857143em;
  1659.   padding-bottom: 0.92857143em;
  1660. }
  1661. .ui.vertically.fitted.menu .item,
  1662. .ui.vertically.fitted.menu .item .menu .item,
  1663. .ui.menu .vertically.fitted.item {
  1664.   padding-left: 1.14285714em;
  1665.   padding-right: 1.14285714em;
  1666. }
  1667.  
  1668. /*--------------
  1669.    Borderless
  1670. ---------------*/
  1671.  
  1672. .ui.borderless.menu .item:before,
  1673. .ui.borderless.menu .item .menu .item:before,
  1674. .ui.menu .borderless.item:before {
  1675.   background: none !important;
  1676. }
  1677.  
  1678. /*-------------------
  1679.        Compact
  1680. --------------------*/
  1681.  
  1682. .ui.compact.menu {
  1683.   display: -webkit-inline-box;
  1684.   display: -ms-inline-flexbox;
  1685.   display: inline-flex;
  1686.   margin: 0em;
  1687.   vertical-align: middle;
  1688. }
  1689. .ui.compact.vertical.menu {
  1690.   display: inline-block;
  1691. }
  1692. .ui.compact.menu .item:last-child {
  1693.   border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  1694. }
  1695. .ui.compact.menu .item:last-child:before {
  1696.   display: none;
  1697. }
  1698. .ui.compact.vertical.menu {
  1699.   width: auto !important;
  1700. }
  1701. .ui.compact.vertical.menu .item:last-child::before {
  1702.   display: block;
  1703. }
  1704.  
  1705. /*-------------------
  1706.         Fluid
  1707. --------------------*/
  1708.  
  1709. .ui.menu.fluid,
  1710. .ui.vertical.menu.fluid {
  1711.   width: 100% !important;
  1712. }
  1713.  
  1714. /*-------------------
  1715.       Evenly Sized
  1716. --------------------*/
  1717.  
  1718. .ui.item.menu,
  1719. .ui.item.menu .item {
  1720.   width: 100%;
  1721.   padding-left: 0em !important;
  1722.   padding-right: 0em !important;
  1723.   margin-left: 0em !important;
  1724.   margin-right: 0em !important;
  1725.   text-align: center;
  1726.   -webkit-box-pack: center;
  1727.       -ms-flex-pack: center;
  1728.           justify-content: center;
  1729. }
  1730. .ui.attached.item.menu {
  1731.   margin: 0em -1px !important;
  1732. }
  1733. .ui.item.menu .item:last-child:before {
  1734.   display: none;
  1735. }
  1736. .ui.menu.two.item .item {
  1737.   width: 50%;
  1738. }
  1739. .ui.menu.three.item .item {
  1740.   width: 33.333%;
  1741. }
  1742. .ui.menu.four.item .item {
  1743.   width: 25%;
  1744. }
  1745. .ui.menu.five.item .item {
  1746.   width: 20%;
  1747. }
  1748. .ui.menu.six.item .item {
  1749.   width: 16.666%;
  1750. }
  1751. .ui.menu.seven.item .item {
  1752.   width: 14.285%;
  1753. }
  1754. .ui.menu.eight.item .item {
  1755.   width: 12.500%;
  1756. }
  1757. .ui.menu.nine.item .item {
  1758.   width: 11.11%;
  1759. }
  1760. .ui.menu.ten.item .item {
  1761.   width: 10.0%;
  1762. }
  1763. .ui.menu.eleven.item .item {
  1764.   width: 9.09%;
  1765. }
  1766. .ui.menu.twelve.item .item {
  1767.   width: 8.333%;
  1768. }
  1769.  
  1770. /*--------------
  1771.      Fixed
  1772. ---------------*/
  1773.  
  1774. .ui.menu.fixed {
  1775.   position: fixed;
  1776.   z-index: 101;
  1777.   margin: 0em;
  1778.   width: 100%;
  1779. }
  1780. .ui.menu.fixed,
  1781. .ui.menu.fixed .item:first-child,
  1782. .ui.menu.fixed .item:last-child {
  1783.   border-radius: 0px !important;
  1784. }
  1785. .ui.fixed.menu,
  1786. .ui[class*="top fixed"].menu {
  1787.   top: 0px;
  1788.   left: 0px;
  1789.   right: auto;
  1790.   bottom: auto;
  1791. }
  1792. .ui[class*="top fixed"].menu {
  1793.   border-top: none;
  1794.   border-left: none;
  1795.   border-right: none;
  1796. }
  1797. .ui[class*="right fixed"].menu {
  1798.   border-top: none;
  1799.   border-bottom: none;
  1800.   border-right: none;
  1801.   top: 0px;
  1802.   right: 0px;
  1803.   left: auto;
  1804.   bottom: auto;
  1805.   width: auto;
  1806.   height: 100%;
  1807. }
  1808. .ui[class*="bottom fixed"].menu {
  1809.   border-bottom: none;
  1810.   border-left: none;
  1811.   border-right: none;
  1812.   bottom: 0px;
  1813.   left: 0px;
  1814.   top: auto;
  1815.   right: auto;
  1816. }
  1817. .ui[class*="left fixed"].menu {
  1818.   border-top: none;
  1819.   border-bottom: none;
  1820.   border-left: none;
  1821.   top: 0px;
  1822.   left: 0px;
  1823.   right: auto;
  1824.   bottom: auto;
  1825.   width: auto;
  1826.   height: 100%;
  1827. }
  1828.  
  1829. /* Coupling with Grid */
  1830. .ui.fixed.menu + .ui.grid {
  1831.   padding-top: 2.75rem;
  1832. }
  1833.  
  1834. /*-------------------
  1835.        Pointing
  1836. --------------------*/
  1837.  
  1838. .ui.pointing.menu .item:after {
  1839.   visibility: hidden;
  1840.   position: absolute;
  1841.   content: '';
  1842.   top: 100%;
  1843.   left: 50%;
  1844.   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1845.           transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1846.   background: none;
  1847.   margin: 0.5px 0em 0em;
  1848.   width: 0.57142857em;
  1849.   height: 0.57142857em;
  1850.   border: none;
  1851.   border-bottom: 1px solid #D4D4D5;
  1852.   border-right: 1px solid #D4D4D5;
  1853.   z-index: 2;
  1854.   -webkit-transition: background 0.1s ease;
  1855.   transition: background 0.1s ease;
  1856. }
  1857. .ui.vertical.pointing.menu .item:after {
  1858.   position: absolute;
  1859.   top: 50%;
  1860.   right: 0%;
  1861.   bottom: auto;
  1862.   left: auto;
  1863.   -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  1864.           transform: translateX(50%) translateY(-50%) rotate(45deg);
  1865.   margin: 0em -0.5px 0em 0em;
  1866.   border: none;
  1867.   border-top: 1px solid #D4D4D5;
  1868.   border-right: 1px solid #D4D4D5;
  1869. }
  1870.  
  1871. /* Active */
  1872. .ui.pointing.menu .active.item:after {
  1873.   visibility: visible;
  1874. }
  1875. .ui.pointing.menu .active.dropdown.item:after {
  1876.   visibility: hidden;
  1877. }
  1878.  
  1879. /* Don't double up pointers */
  1880. .ui.pointing.menu .dropdown.active.item:after,
  1881. .ui.pointing.menu .active.item .menu .active.item:after {
  1882.   display: none;
  1883. }
  1884.  
  1885. /* Colors */
  1886. .ui.pointing.menu .active.item:hover:after {
  1887.   background-color: #F2F2F2;
  1888. }
  1889. .ui.pointing.menu .active.item:after {
  1890.   background-color: #F2F2F2;
  1891. }
  1892. .ui.pointing.menu .active.item:hover:after {
  1893.   background-color: #F2F2F2;
  1894. }
  1895. .ui.vertical.pointing.menu .active.item:hover:after {
  1896.   background-color: #F2F2F2;
  1897. }
  1898. .ui.vertical.pointing.menu .active.item:after {
  1899.   background-color: #F2F2F2;
  1900. }
  1901. .ui.vertical.pointing.menu .menu .active.item:after {
  1902.   background-color: #FFFFFF;
  1903. }
  1904.  
  1905. /*--------------
  1906.     Attached
  1907. ---------------*/
  1908.  
  1909.  
  1910. /* Middle */
  1911. .ui.attached.menu {
  1912.   top: 0px;
  1913.   bottom: 0px;
  1914.   border-radius: 0px;
  1915.   margin: 0em -1px;
  1916.   width: calc(100% +  2px );
  1917.   max-width: calc(100% +  2px );
  1918.   -webkit-box-shadow: none;
  1919.           box-shadow: none;
  1920. }
  1921. .ui.attached + .ui.attached.menu:not(.top) {
  1922.   border-top: none;
  1923. }
  1924.  
  1925. /* Top */
  1926. .ui[class*="top attached"].menu {
  1927.   bottom: 0px;
  1928.   margin-bottom: 0em;
  1929.   top: 0px;
  1930.   margin-top: 1rem;
  1931.   border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  1932. }
  1933. .ui.menu[class*="top attached"]:first-child {
  1934.   margin-top: 0em;
  1935. }
  1936.  
  1937. /* Bottom */
  1938. .ui[class*="bottom attached"].menu {
  1939.   bottom: 0px;
  1940.   margin-top: 0em;
  1941.   top: 0px;
  1942.   margin-bottom: 1rem;
  1943.   -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  1944.           box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  1945.   border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  1946. }
  1947. .ui[class*="bottom attached"].menu:last-child {
  1948.   margin-bottom: 0em;
  1949. }
  1950.  
  1951. /* Attached Menu Item */
  1952. .ui.top.attached.menu > .item:first-child {
  1953.   border-radius: 0.28571429rem 0em 0em 0em;
  1954. }
  1955. .ui.bottom.attached.menu > .item:first-child {
  1956.   border-radius: 0em 0em 0em 0.28571429rem;
  1957. }
  1958.  
  1959. /* Tabular Attached */
  1960. .ui.attached.menu:not(.tabular) {
  1961.   border: 1px solid #D4D4D5;
  1962. }
  1963. .ui.attached.inverted.menu {
  1964.   border: none;
  1965. }
  1966. .ui.attached.tabular.menu {
  1967.   margin-left: 0;
  1968.   margin-right: 0;
  1969.   width: 100%;
  1970. }
  1971.  
  1972. /*--------------
  1973.      Sizes
  1974. ---------------*/
  1975.  
  1976.  
  1977. /* Mini */
  1978. .ui.mini.menu {
  1979.   font-size: 0.78571429rem;
  1980. }
  1981. .ui.mini.vertical.menu {
  1982.   width: 9rem;
  1983. }
  1984.  
  1985. /* Tiny */
  1986. .ui.tiny.menu {
  1987.   font-size: 0.85714286rem;
  1988. }
  1989. .ui.tiny.vertical.menu {
  1990.   width: 11rem;
  1991. }
  1992.  
  1993. /* Small */
  1994. .ui.small.menu {
  1995.   font-size: 0.92857143rem;
  1996. }
  1997. .ui.small.vertical.menu {
  1998.   width: 13rem;
  1999. }
  2000.  
  2001. /* Medium */
  2002. .ui.menu {
  2003.   font-size: 1rem;
  2004. }
  2005. .ui.vertical.menu {
  2006.   width: 15rem;
  2007. }
  2008.  
  2009. /* Large */
  2010. .ui.large.menu {
  2011.   font-size: 1.07142857rem;
  2012. }
  2013. .ui.large.vertical.menu {
  2014.   width: 18rem;
  2015. }
  2016.  
  2017. /* Huge */
  2018. .ui.huge.menu {
  2019.   font-size: 1.21428571rem;
  2020. }
  2021. .ui.huge.vertical.menu {
  2022.   width: 22rem;
  2023. }
  2024.  
  2025. /* Big */
  2026. .ui.big.menu {
  2027.   font-size: 1.14285714rem;
  2028. }
  2029. .ui.big.vertical.menu {
  2030.   width: 20rem;
  2031. }
  2032.  
  2033. /* Massive */
  2034. .ui.massive.menu {
  2035.   font-size: 1.28571429rem;
  2036. }
  2037. .ui.massive.vertical.menu {
  2038.   width: 25rem;
  2039. }
  2040.  
  2041.  
  2042. /*******************************
  2043.          Theme Overrides
  2044. *******************************/
  2045. /*******************************
  2046.          Site Overrides
  2047. *******************************/
  2048. /*******************************
  2049.          Theme Overrides
  2050. *******************************/
  2051. /*******************************
  2052.          Site Overrides
  2053. *******************************/
  2054. /*******************************
  2055.          Theme Overrides
  2056. *******************************/
  2057. /*******************************
  2058.          Site Overrides
  2059. *******************************/
  2060. /*******************************
  2061.          Theme Overrides
  2062. *******************************/
  2063. /*******************************
  2064.          Site Overrides
  2065. *******************************/
  2066.  
  2067.  
  2068. $color_1: #fff;
  2069. $color_2: rgb(196, 140, 218);
  2070. $color_3: rgba(255, 255, 255, .9);
  2071. $color_4: rgba(231, 171, 255);
  2072. $color_5: rgb(205, 80, 255);
  2073. $color_6: rgba(255, 255, 255, 0.6);
  2074. $background_color_1: rgba(255, 255, 255, .9);
  2075. $background_color_2: #fff;
  2076. $background_color_3: #ffd;
  2077.  
  2078. /*menu icon*/
  2079. /*navbar*/
  2080. /*generic panel styles*/
  2081. /*first panel*/
  2082. /*second panel*/
  2083. /*third panel*/
  2084. /*fourth panel*/
  2085. /*fifth panel*/
  2086. /*footer panel*/
  2087. /*other styles*/
  2088. /*navbar*/
  2089. /*second panel*/
  2090. /*third panel*/
  2091. /*fourth panel*/
  2092. /*fifth panel*/
  2093. /*footer*/
  2094.  
  2095. html {
  2096.   height: 100%;
  2097. }
  2098. body {
  2099.   height: 100%;
  2100. }
  2101.  
  2102. #wrap {
  2103.   .col {
  2104.     body{ margin: 0 auto;
  2105.   }
  2106. } }
  2107.  
  2108. .ui.menu {
  2109.   .item.menu {
  2110.     .container {
  2111.       .bar1 {
  2112.         width: 17px;
  2113.         height: 2px;
  2114.         background-color: $background_color_1;
  2115.         margin: 3px 0;
  2116.         transition: 0.4s;
  2117.       }
  2118.     }
  2119.     .change {
  2120.       .bar1 {
  2121.         -webkit-transform: rotate(-45deg) translate(-4px, 3px);
  2122.         transform: rotate(-45deg) translate(-4px, 3px);
  2123.       }
  2124.       .bar2 {
  2125.         opacity: 0;
  2126.       }
  2127.       .bar3 {
  2128.         -webkit-transform: rotate(45deg) translate(-4px, -4px);
  2129.         transform: rotate(45deg) translate(-4px, -4px);
  2130.       }
  2131.     }
  2132.   }
  2133.   .item {
  2134.     color: $color_3;
  2135.   }
  2136. }
  2137.  
  2138. .bar2 {
  2139.   width: 17px;
  2140.   height: 2px;
  2141.   background-color: $background_color_1;
  2142.   margin: 3px 0;
  2143.   transition: 0.4s;
  2144. }
  2145. .bar3 {
  2146.   width: 17px;
  2147.   height: 2px;
  2148.   background-color: $background_color_1;
  2149.   margin: 3px 0;
  2150.   transition: 0.4s;
  2151. }
  2152. .ui.navbar {
  2153.   width: 100%;
  2154.   display: table;
  2155.   position: fixed;
  2156.   top: 0;
  2157.   left: 0;
  2158.   z-index: 100;
  2159.   .ui.nav.container {
  2160.     display: table-row;
  2161.     .ui.secondary.pointing.menu {
  2162.       margin-left: 0;
  2163.       margin-right: 0;
  2164.       margin-bottom: 0;
  2165.       border-bottom: none;
  2166.       background: rgba(153, 34, 201, 0.2);
  2167.       -webkit-transition: background 1000ms linear;
  2168.       -ms-transition: background 1000ms linear;
  2169.       transition: background 1000ms linear;
  2170.     }
  2171.     .ui.secondary.pointing.menu.open {
  2172.       background: rgb(196, 140, 218);
  2173.       .item.con {
  2174.         display: none;
  2175.       }
  2176.     }
  2177.   }
  2178.   .ui.nav.menu {
  2179.     display: table-row;
  2180.     background: rgba(153, 34, 201, 0.2);
  2181.     height: 0%;
  2182.     -webkit-transition: height .3s ease-in, background 1000ms linear;
  2183.     transition: height .3s ease-in, background 1000ms linear;
  2184.     .ui.nav.left {
  2185.       width: 50%;
  2186.       max-height: 0;
  2187.       -webkit-transition: max-height .3s ease-in;
  2188.       transition: max-height .3s ease-in;
  2189.       margin: 0% 5% 0% 5%;
  2190.       overflow: hidden;
  2191.       float: left;
  2192.       .ui.header {
  2193.         max-height: 0%;
  2194.         -webkit-transition: max-height .3s ease-in;
  2195.         transition: max-height .3s ease-in;
  2196.         margin: 0% 5% 0% 5%;
  2197.         display: none;
  2198.       }
  2199.     }
  2200.     .ui.nav.right {
  2201.       background: #fff;
  2202.       width: 30%;
  2203.       max-height: 0;
  2204.       -webkit-transition: max-height .3s ease-in;
  2205.       transition: max-height .3s ease-in;
  2206.       margin: 0% 10% 0% 10%;
  2207.       overflow: hidden;
  2208.       float: left;
  2209.       .ui.header {
  2210.         height: 0px;
  2211.         -webkit-transition: height .3s ease-in;
  2212.         transition: height .3s ease-in;
  2213.         margin: 0% 5% 0% 5%;
  2214.         display: none;
  2215.         margin-right: 0;
  2216.       }
  2217.     }
  2218.   }
  2219.   .ui.nav.menu.open {
  2220.     background: rgb(196, 140, 218);
  2221.     height: 100%;
  2222.     .ui.nav.left {
  2223.       margin: 5% 5% 5% 5%;
  2224.       height: auto;
  2225.       max-height: 100%;
  2226.       .ui.header {
  2227.         display: block;
  2228.         height: auto;
  2229.         padding-top: .5rem;
  2230.         padding-bottom: .5rem;
  2231.         cursor: default;
  2232.         color: $color_1;
  2233.         margin-left: 0;
  2234.         padding-left: 5%;
  2235.         max-height: 100%;
  2236.         &:hover {
  2237.           background: #fff;
  2238.           color: $color_2;
  2239.         }
  2240.       }
  2241.     }
  2242.     .ui.nav.right {
  2243.       margin: 5% 5% 5% 5%;
  2244.       height: auto;
  2245.       float: left;
  2246.       max-height: 100%;
  2247.       .ui.header {
  2248.         display: block;
  2249.         height: auto;
  2250.         padding-top: .5rem;
  2251.         padding-bottom: .5rem;
  2252.         cursor: default;
  2253.         color: $color_2;
  2254.         margin-left: 0;
  2255.         padding-left: 5%;
  2256.         &:hover {
  2257.           color: $color_1;
  2258.           background: rgb(196, 140, 218);
  2259.         }
  2260.       }
  2261.     }
  2262.   }
  2263. }
  2264.  
  2265. .ui.navbar.open {
  2266.   height: 100%;
  2267. }
  2268. .ui.full {
  2269.   position: relative;
  2270.   margin: 0 auto;
  2271.   height: 100%;
  2272.   width: 90%;
  2273.   background-color: $background_color_2;
  2274. }
  2275.  
  2276. .first.panel {
  2277.   background-image: url('/assets/Bitmap.png');
  2278.   background-repeat: no-repeat;
  2279.   background-size: 100% 100%;
  2280.   width: 100%;
  2281.   .ui.header {
  2282.     margin: 0 auto;
  2283.     color: $color_1;
  2284.     font-size: 6rem;
  2285.     padding-left: 10%;
  2286.     padding-top: 10%;
  2287.     .sub.header {
  2288.       color: $color_1;
  2289.       margin-bottom: 20px;
  2290.     }
  2291.     .ui.primary.basic.button {
  2292.       -webkit-box-shadow: 0 0 0 1px rgba(231, 171, 255) inset !important;
  2293.       box-shadow: 0 0 0 1px rgba(231, 171, 255) inset !important;
  2294.       color: $color_4 !important;
  2295.       &:hover {
  2296.         background: rgba(231, 171, 255, 1);
  2297.         color: $color_1 !important;
  2298.         background: rgba(231, 171, 255, 1) !important;
  2299.       }
  2300.     }
  2301.   }
  2302. }
  2303.  
  2304. .second.panel {
  2305.   .ui.left {
  2306.     width: 30%;
  2307.     padding: 10% 0% 0% 0%;
  2308.     float: left;
  2309.     clear: left;
  2310.     .ui.header.title {
  2311.       font-size: 2.5rem;
  2312.       color: $color_5;
  2313.     }
  2314.     .ui.header.navigator {
  2315.       margin-top: 10%;
  2316.     }
  2317.     .ui.header.toggle {
  2318.       height: 30px;
  2319.     }
  2320.     .ui.header {
  2321.       .sub.header {
  2322.         .button {
  2323.           -webkit-box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2324.           box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2325.           color: $color_5 !important;
  2326.           &:hover {
  2327.             background: rgba(205, 80, 255, 1);
  2328.             color: $color_1 !important;
  2329.             background: rgba(205, 80, 255, 1) !important;
  2330.           }
  2331.         }
  2332.         .ui.text {
  2333.           float: left;
  2334.           line-height: 1.6rem;
  2335.           margin-right: 1rem;
  2336.         }
  2337.         .ui.display.one {
  2338.           display: block;
  2339.           height: 16px;
  2340.           width: 16px;
  2341.           float: left;
  2342.           border: solid rgba(0,0,0,.6) 4px;
  2343.         }
  2344.         .ui.display.two {
  2345.           display: block;
  2346.           height: 24px;
  2347.           width: 24px;
  2348.           float: left;
  2349.           margin-left: 1rem;
  2350.           .ui.top {
  2351.             display: block;
  2352.             height: 13px;
  2353.             width: 100%;
  2354.             float: left;
  2355.           }
  2356.           .ui.bot {
  2357.             display: block;
  2358.             height: 11px;
  2359.             width: 100%;
  2360.           }
  2361.           .ui.square.one {
  2362.             display: block;
  2363.             height: 7px;
  2364.             width: 7px;
  2365.             float: left;
  2366.             border: solid rgba(0,0,0,.6) 2px;
  2367.           }
  2368.           .ui.square.two {
  2369.             display: block;
  2370.             height: 7px;
  2371.             width: 7px;
  2372.             float: right;
  2373.             border: solid rgba(0,0,0,.6) 2px;
  2374.           }
  2375.         }
  2376.       }
  2377.     }
  2378.   }
  2379.   .ui.right {
  2380.     background: #fff;
  2381.     float: left;
  2382.     width: 70%;
  2383.     height: 100%;
  2384.     .ui.card.container {
  2385.       background-color: $background_color_3;
  2386.       width: 98%;
  2387.       height: 88%;
  2388.       margin-top: 6%;
  2389.       position: relative;
  2390.       overflow-x: hidden;
  2391.       overflow-y: auto;
  2392.       .ui.glider {
  2393.         display: none;
  2394.       }
  2395.     }
  2396.     .ui.card.container.full {
  2397.       background-color: $background_color_3;
  2398.       width: 100%;
  2399.       height: 70%;
  2400.       margin-top: 15%;
  2401.       position: relative;
  2402.       overflow: hidden;
  2403.       .ui.card {
  2404.         height: 100%;
  2405.         width: 0%;
  2406.         float: left;
  2407.         -webkit-transition: width .3s ease-in;
  2408.         transition: width .3s ease-in;
  2409.         height: 100%;
  2410.         width: 0%;
  2411.         float: left;
  2412.         -webkit-transition: width .3s ease-in;
  2413.         transition: width .3s ease-in;
  2414.         .ui.image {
  2415.           height: 100%;
  2416.           width: 100%;
  2417.           background-size: cover;
  2418.         }
  2419.       }
  2420.       .ui.card.selected {
  2421.         width: 100%;
  2422.       }
  2423.       .ui.glider {
  2424.         display: block;
  2425.         position: absolute;
  2426.         top: 0;
  2427.         padding: 0;
  2428.         z-index: 50;
  2429.       }
  2430.       .ui.glider.left {
  2431.         width: 31px;
  2432.         height: 100%;
  2433.         background: rgba(0,0,0,0);
  2434.         left: 0;
  2435.       }
  2436.       .ui.glider.right {
  2437.         width: 31px;
  2438.         height: 100%;
  2439.         background: rgba(0,0,0,0);
  2440.         right: 0;
  2441.       }
  2442.       .ui.glider.container {
  2443.         position: relative;
  2444.         top: 50%;
  2445.         transform: translateY(-50%);
  2446.         background: rgba(151, 151, 151, 0.4);
  2447.         padding-top: 5px;
  2448.         padding-bottom: 5px;
  2449.         &:hover {
  2450.           background: rgba(151, 151, 151, 0.8);
  2451.         }
  2452.       }
  2453.     }
  2454.   }
  2455.   .ui.right2 {
  2456.     background: #fff;
  2457.     float: left;
  2458.     width: 70%;
  2459.     height: 100%;
  2460.     background-image: url('/assets/Product Shot.png');
  2461.   }
  2462. }
  2463.  
  2464. .third.panel {
  2465.   background: rgb(205, 80, 255);
  2466.   padding: 5%;
  2467.   .ui.left {
  2468.     float: left;
  2469.     width: 30%;
  2470.     color: $color_1;
  2471.     padding: 10%;
  2472.     .ui.huge.header {
  2473.       .ui.header {
  2474.         font-size: 3rem;
  2475.         color: $color_1;
  2476.       }
  2477.       .sub.header {
  2478.         font-size: .7rem;
  2479.         color: $color_1;
  2480.       }
  2481.     }
  2482.   }
  2483.   .ui.right {
  2484.     float: left;
  2485.     width: 30%;
  2486.     color: $color_1;
  2487.     padding: 10% 0% 0% 0%;
  2488.     .ui.huge.header {
  2489.       border: solid 5px #fff;
  2490.       padding: 10%;
  2491.       .ui.header {
  2492.         font-size: 1.8rem;
  2493.         color: $color_1;
  2494.       }
  2495.       .sub.header {
  2496.         .ui.header {
  2497.           font-size: 1rem;
  2498.           color: $color_1;
  2499.           margin-top: 5%;
  2500.         }
  2501.         .sub.header {
  2502.           font-size: 1rem;
  2503.           color: $color_1;
  2504.         }
  2505.       }
  2506.     }
  2507.   }
  2508. }
  2509.  
  2510. .fourth.panel {
  2511.   float: left;
  2512.   width: 90%;
  2513.   height: unset;
  2514.   color: $color_1;
  2515.   padding: 10% 5% 0% 5%;
  2516.   position: relative;
  2517.   .ui.header.title {
  2518.     margin-bottom: 2%;
  2519.     color: $color_5;
  2520.   }
  2521.   .ui.stories {
  2522.     float: left;
  2523.     width: 100%;
  2524.     background: #fff;
  2525.     margin-bottom: 5%;
  2526.     .ui.content {
  2527.       float: left;
  2528.       width: 30%;
  2529.       height: auto;
  2530.       .ui.image {
  2531.         float: left;
  2532.         width: 100%;
  2533.         height: 300px;
  2534.         background: #000;
  2535.       }
  2536.       .ui.details {
  2537.         padding-top: 8px;
  2538.         clear: left;
  2539.       }
  2540.     }
  2541.     .ui.content.mid {
  2542.       margin-left: 5%;
  2543.       margin-right: 5%;
  2544.     }
  2545.   }
  2546.   .ui.primary.basic.button {
  2547.     position: absolute;
  2548.     top: 20%;
  2549.     right: 5%;
  2550.     -webkit-box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2551.     box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2552.     color: $color_5 !important;
  2553.     &:hover {
  2554.       background: rgb(205, 80, 255) !important;
  2555.       color: $color_1 !important;
  2556.     }
  2557.   }
  2558. }
  2559.  
  2560. .fifth.panel {
  2561.   float: left;
  2562.   width: 90%;
  2563.   height: unset;
  2564.   color: $color_1;
  2565.   background: rgb(221, 218, 218);
  2566.   padding: 10% 5% 0% 5%;
  2567.   position: relative;
  2568.   .ui.primary.basic.button {
  2569.     position: absolute;
  2570.     top: 25%;
  2571.     right: 5%;
  2572.     -webkit-box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2573.     box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2574.     color: $color_5 !important;
  2575.     &:hover {
  2576.       background: rgb(205, 80, 255) !important;
  2577.       color: $color_1 !important;
  2578.     }
  2579.   }
  2580.   .ui.header.title {
  2581.     margin-bottom: 2%;
  2582.     color: $color_5;
  2583.   }
  2584.   .ui.stories {
  2585.     float: left;
  2586.     width: 100%;
  2587.     background: #fff;
  2588.     margin-bottom: 5%;
  2589.     .ui.content {
  2590.       float: left;
  2591.       width: 100%;
  2592.       .ui.image {
  2593.         float: left;
  2594.         width: 50%;
  2595.         height: 300px;
  2596.         background: #000;
  2597.       }
  2598.     }
  2599.   }
  2600. }
  2601.  
  2602. .ui.footer.panel {
  2603.   width: 100%;
  2604.   display: table;
  2605.   background: rgb(205, 80, 255);
  2606.   .ui.footer.top {
  2607.     display: table-row;
  2608.     .ui.link.list {
  2609.       .item {
  2610.         color: $color_1;
  2611.         padding-bottom: .7rem;
  2612.       }
  2613.       .item.head {
  2614.         display: none;
  2615.       }
  2616.     }
  2617.     .ui.div1 {
  2618.       width: 17.5%;
  2619.       float: left;
  2620.       margin-top: 3%;
  2621.       margin-bottom: 3%;
  2622.     }
  2623.     .ui.div1.logo {
  2624.       margin-left: 5%;
  2625.     }
  2626.     .ui.div2 {
  2627.       width: 20%;
  2628.       float: left;
  2629.       margin-top: 3%;
  2630.       .ui.form {
  2631.         .field {
  2632.           .ui.header {
  2633.             color: $color_1;
  2634.           }
  2635.           label {
  2636.             color: $color_1 !important;
  2637.           }
  2638.         }
  2639.         .ui.button {
  2640.           color: $color_1;
  2641.           background: rgb(205, 80, 255);
  2642.           width: 100%;
  2643.           -webkit-box-shadow: 0 0 0 1px #fff inset !important;
  2644.           box-shadow: 0 0 0 1px #fff inset !important;
  2645.           &:hover {
  2646.             background: #fff;
  2647.             color: $color_5;
  2648.           }
  2649.         }
  2650.       }
  2651.     }
  2652.   }
  2653.   .ui.footer.bot {
  2654.     position: relative;
  2655.     width: 100%;
  2656.     display: table-row;
  2657.     .ui.header {
  2658.       float: left;
  2659.       margin: 0;
  2660.       margin-bottom: 1%;
  2661.       .sub.header {
  2662.         color: $color_1;
  2663.         font-size: .7rem;
  2664.       }
  2665.     }
  2666.     .ui.header.rights {
  2667.       margin-left: 5%;
  2668.     }
  2669.     .ui.header.phone {
  2670.       float: right;
  2671.       margin-right: 5%;
  2672.     }
  2673.     .ui.header.policy {
  2674.       float: right;
  2675.       margin-right: 2%;
  2676.       cursor: default;
  2677.     }
  2678.     .ui.header.terms {
  2679.       float: right;
  2680.       margin-right: 2%;
  2681.       cursor: default;
  2682.     }
  2683.   }
  2684. }
  2685.  
  2686. #main_menu {
  2687.   a {
  2688.     &:hover {
  2689.       color: $color_6;
  2690.     }
  2691.   }
  2692. }
  2693.  
  2694.  
  2695. @media screen and (max-width: 44em) {
  2696.   .ui.navbar {
  2697.     .ui.nav.menu.open {
  2698.       .ui.nav.left {
  2699.         margin-top: 0%;
  2700.         width: 90%;
  2701.         .ui.header {
  2702.           font-size: 1.5rem;
  2703.           margin-right: 0;
  2704.         }
  2705.       }
  2706.       .ui.nav.right {
  2707.         margin-top: 0;
  2708.         width: 90%;
  2709.         .ui.header {
  2710.           font-size: 1rem;
  2711.           margin-right: 0;
  2712.         }
  2713.       }
  2714.     }
  2715.     .ui.nav.container {
  2716.       .ui.secondary.pointing.menu {
  2717.         .item.con {
  2718.           display: none;
  2719.         }
  2720.       }
  2721.     }
  2722.   }
  2723.   .second.panel {
  2724.     .ui.left {
  2725.       width: 100%;
  2726.       margin-bottom: 0;
  2727.       .ui.header.title {
  2728.         margin-bottom: 0;
  2729.       }
  2730.       .ui.header.toggle {
  2731.         display: none;
  2732.       }
  2733.       .ui.vertical.text.menu {
  2734.         display: none;
  2735.       }
  2736.       .ui.header.navigator {
  2737.         display: none;
  2738.       }
  2739.     }
  2740.     .ui.right {
  2741.       width: 100%;
  2742.       margin-bottom: 0;
  2743.       height: unset;
  2744.     }
  2745.     .ui.right2 {
  2746.       height: 70%;
  2747.       width: 100%;
  2748.       margin: 0;
  2749.     }
  2750.   }
  2751.   .third.panel {
  2752.     .ui.left {
  2753.       width: 100%;
  2754.       padding: 10% 0 0 0;
  2755.       .ui.huge.header {
  2756.         .ui.header {
  2757.           font-size: 1.5rem;
  2758.         }
  2759.       }
  2760.     }
  2761.     .ui.right {
  2762.       width: 100%;
  2763.       padding: 0;
  2764.       .ui.huge.header {
  2765.         .ui.header {
  2766.           font-size: 1.3rem;
  2767.         }
  2768.       }
  2769.     }
  2770.   }
  2771.   .fourth.panel {
  2772.     .ui.stories {
  2773.       .ui.content {
  2774.         .ui.image {
  2775.           height: 23vh;
  2776.         }
  2777.       }
  2778.       margin-bottom: 20%;
  2779.     }
  2780.     .ui.primary.basic.button {
  2781.       bottom: 2%;
  2782.       top: unset;
  2783.       width: 90%;
  2784.       margin: 0;
  2785.     }
  2786.   }
  2787.   .fifth.panel {
  2788.     .ui.stories {
  2789.       margin-bottom: 20%;
  2790.     }
  2791.     .ui.primary.basic.button {
  2792.       bottom: 2%;
  2793.       top: unset;
  2794.       width: 90%;
  2795.       margin: 0;
  2796.     }
  2797.   }
  2798.   .ui.footer.panel {
  2799.     .ui.footer.top {
  2800.       .ui.div1.logo {
  2801.         margin: 5%;
  2802.       }
  2803.       .ui.div1 {
  2804.         width: 90%;
  2805.         margin: 0 5% 0 5%;
  2806.         .ui.link.list {
  2807.           .item {
  2808.             display: none;
  2809.           }
  2810.           .item.head {
  2811.             display: block;
  2812.           }
  2813.         }
  2814.       }
  2815.       .ui.div2 {
  2816.         margin: 5%;
  2817.         width: 90%;
  2818.         border-top: solid 2px #fff;
  2819.         padding-top: 5%;
  2820.       }
  2821.     }
  2822.     .ui.footer.bot {
  2823.       .ui.header.rights {
  2824.         width: 90%;
  2825.       }
  2826.     }
  2827.   }
  2828. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top