/*
	Import
	------------------------------------------------
*/
/*
	@package manisa
*/
/*
	Mixins
	------------------------------------------------
*/
/*
	Placeholder
	------------------------------------------------
*/
.navbar {
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, black 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, black 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, black 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0ffffff',GradientType=1 );
  /* IE6-9 */ }

.navbar {
  width: 100vw;
  display: block;
  position: fixed;
  height: 100vh;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 320ms ease-in-out;
  -moz-transition: all 320ms ease-in-out;
  -ms-transition: all 320ms ease-in-out;
  -o-transition: all 320ms ease-in-out;
  transition: all 320ms ease-in-out; }
  .navbar .bg_logo {
    width: 150px;
    max-width: 100%;
    position: absolute;
    top: 19%;
    right: 8%;
    background-size: 150px; }
  .navbar .collapse {
    position: absolute;
    top: 60%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 111px; }
  .navbar .navbar-nav {
    text-align: right;
    display: block;
    width: 100px; }
  .navbar .nav-item {
    margin: 20px 0 0 0;
    -webkit-transition: all 320ms ease-in-out;
    -moz-transition: all 320ms ease-in-out;
    -ms-transition: all 320ms ease-in-out;
    -o-transition: all 320ms ease-in-out;
    transition: all 320ms ease-in-out;
    opacity: 1; }
    .navbar .nav-item:nth-of-type(1) {
      animation-name: menu1;
      animation-duration: 700ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
    .navbar .nav-item:nth-of-type(2) {
      animation-name: menu1;
      animation-duration: 700ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
    .navbar .nav-item:nth-of-type(3) {
      animation-name: menu1;
      animation-duration: 700ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
    .navbar .nav-item:nth-of-type(4) {
      animation-name: menu1;
      animation-duration: 700ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
    .navbar .nav-item:nth-of-type(5) {
      animation-name: menu1;
      animation-duration: 700ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
    .navbar .nav-item:nth-of-type(6) {
      animation-name: menu1;
      animation-duration: 700ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
    .navbar .nav-item a {
      font-size: 21px;
      color: #fff; }
    .navbar .nav-item.show-li-nav:hover {
      margin: 20px 10px 0 0; }

.open {
  visibility: visible;
  opacity: 1;
  z-index: 99; }
  .open .nav-item {
    opacity: 0; }
    .open .nav-item:nth-of-type(1) {
      animation-name: menu;
      animation-duration: 400ms;
      animation-delay: -100ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); } }
    .open .nav-item:nth-of-type(2) {
      animation-name: menu;
      animation-duration: 400ms;
      animation-delay: 0ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); } }
    .open .nav-item:nth-of-type(3) {
      animation-name: menu;
      animation-duration: 400ms;
      animation-delay: 100ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); } }
    .open .nav-item:nth-of-type(4) {
      animation-name: menu;
      animation-duration: 400ms;
      animation-delay: 200ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); } }
    .open .nav-item:nth-of-type(5) {
      animation-name: menu;
      animation-duration: 400ms;
      animation-delay: 300ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); } }
    .open .nav-item:nth-of-type(6) {
      animation-name: menu;
      animation-duration: 400ms;
      animation-delay: 400ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-fill-mode: forwards; }
@keyframes menu {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%); } }
.nav-toggle {
  width: 55px;
  height: 55px;
  display: inline-block;
  position: fixed;
  top: 9px;
  right: 9%;
  background-color: #fff;
  border-radius: 50%;
  z-index: 999;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(51, 51, 51, 0.09); }
  .nav-toggle .menu {
    width: 30px;
    height: 21px;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .nav-toggle .menu .line1,
    .nav-toggle .menu .line2,
    .nav-toggle .menu .line3 {
      position: absolute;
      background-color: #333;
      width: 100%;
      height: 2px;
      border-radius: 15px;
      -webkit-transition: all 320ms cubic-bezier(0.42, 0, 0.38, 1.54);
      -moz-transition: all 320ms cubic-bezier(0.42, 0, 0.38, 1.54);
      -ms-transition: all 320ms cubic-bezier(0.42, 0, 0.38, 1.54);
      -o-transition: all 320ms cubic-bezier(0.42, 0, 0.38, 1.54);
      transition: all 320ms cubic-bezier(0.42, 0, 0.38, 1.54); }
    .nav-toggle .menu .line1 {
      top: 2px; }
    .nav-toggle .menu .line2 {
      top: 10px; }
    .nav-toggle .menu .line3 {
      top: 18px; }

.nav-toggle.toggle .line1,
.nav-toggle.toggle .line2,
.nav-toggle.toggle .line3 {
  top: 10px; }
.nav-toggle.toggle .line1 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }
.nav-toggle.toggle .line2,
.nav-toggle.toggle .line3 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.navbar a .bg_logo {
  background-image: url(http://via.placeholder.com/230x58); }

.option-box {
  top: 170px; }

/* X Small Screen */
@media (min-width: 100px) and (max-width: 991px) {
  .navbar-toggler {
    display: none; }

  .navbar {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 1%, black 100%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 1%, black 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 1%, black 100%); }
    .navbar .collapse {
      right: 62px;
      display: block; }
    .navbar .navbar-nav {
      border-top: none; } }

/*# sourceMappingURL=panel-nav.css.map */