/* MOBILE */
@media only screen and (max-width: 600px) {

  /* MENU */
  .menu-outer-top {
    transition: opacity 200ms ease-in-out;
  }

  /* opc  */
  .opc-hover {
    opacity: 1;
  }

  .opc-hover:hover {
    opacity: 0.5;
    transition: opacity 300ms ease-in-out;
  }

  /* icon  */
  .opc-hover-icon {
    opacity: 0.5;
  }

  .opc-hover-icon:hover {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
  }

  .time-title {
    transition: opacity 200ms ease-in-out;
  }

  .opc-date-active {
    opacity: 1;
  }

  .opc-date-disable {
    opacity: 0.5;
  }
}


/* HOVER */
/* DESKTOP */
@media only screen and (min-width: 600px) {

  #intro #nextButton:hover,
  #modal-date-btn:hover {
    background-color: var(--white-color);
    color: var(--black-color);
    transition: all 250ms ease-in-out;
  }

  #intro #nextButton:hover span,
  #modal-date-btn:hover span {
    color: var(--black-color);
    transition: all 250ms ease-in-out;
  }

  /* MENU */
  .menu-top-control ul a span:hover {
    color: var(--blue-color);
  }

  #t-switch span,
  #t-send span {
    transition: color 200ms ease-in-out;
  }

  .icon-color img,
  .icon-save img {
    transition: opacity 200ms ease-in-out;
  }

  /* ARROW */
  .menu-top-control ul a span:hover .arrow-show {
    display: inline-flex;
  }

  .language-passive:hover {
    opacity: 1;
  }

  .nav-hover:hover {
    opacity: 0.5;
  }

  .nav-hover {
    opacity: 1;
    transition: all 250ms;
  }

  /* NAV right */
  .opc-hover {
    opacity: 1;
  }

  .opc-hover:hover {
    opacity: 0.5;
    transition: opacity 300ms ease-in-out;
  }

  /* icon  */
  .opc-hover-icon {
    opacity: 0.5;
  }

  .opc-hover-icon:hover {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
  }

  .time-title {
    transition: opacity 200ms ease-in-out;
  }

  .opc-date-active {
    opacity: 1;
  }

  .opc-date-disable {
    opacity: 0.5;
  }

  /* MENU */
  .icon-edit:hover .edit-grfc {
    opacity: 1;
    transition: opacity 200ms ease-in-out;
  }

  .icon-edit:hover .edit-bg {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
  }

  .menu-outer-bot,
  .menu-outer-top {
    transition: all 650ms ease-in-out;
  }
}

/* ALL */
.btn-clr img {
  height: 27px;
  transition: width 200ms ease-out, height 200ms ease-out;
}

/* GLOBAL */
#main {
  transition: filter 250ms ease-out, transform 250ms ease-out;
}

.opc-global-active {
  animation: opcUp 500ms ease-in-out;
  animation-fill-mode: forwards;
}

.opc-global-disable {
  animation: opcDown 500ms ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes opcUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes opcDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}