/**
 * Eifel
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Benjamin Hofmann <hofmann@infomax-it.de>
 * @since      2016-04-16
 * @version    $$Id$$
 **/

/**

Navigation:
A. keyframes (outside mediaquery for IE)
B. loading animation

**/

/*  =========================================================
keyframes (outside mediaquery for IE))
========================================================= */
@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-moz-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-ms-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-moz-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-o-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}

/*  =========================================================
loading animation
========================================================= */
@media screen {
  .fullMap__infoBoard__loadingAnimation,
  .listFilter__offcanvas__loadingAnimation,
  .listFilter__dropdown_options__loadingAnimation,
  .contentForm__form__loadingAnimation {
    top: 0;
    z-index: 10;
    display: none;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
  }
  .fullMap__infoBoard__loadingAnimation {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .listFilter__offcanvas__loadingAnimation {
    position: fixed;
    right: 0;
  }
  .listFilter__dropdown_options__loadingAnimation,
  .contentForm__form__loadingAnimation {
    position: absolute;
    left: 0;
    width: 100%;
  }
  .fullMap__infoBoard__loadingAnimation--active,
  .loadingAnimation--active {
    display: block;
  }

  #listFilter__offcanvas__opener:not(:checked) ~ .listFilter__offcanvas__area .listFilter__offcanvas__loadingAnimation {
    display: none;
  }

  .uil-ripple-css {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    background: none;
  }
  .uil-ripple-css div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    border-width: 10px;
    border-style: solid;
    -ms-animation: uil-ripple 1.75s ease-out infinite;
    -moz-animation: uil-ripple 1.75s ease-out infinite;
    -webkit-animation: uil-ripple 1.75s ease-out infinite;
    -o-animation: uil-ripple 1.75s ease-out infinite;
    animation: uil-ripple 1.75s ease-out infinite;
  }
  .uil-ripple-css div:nth-of-type(1) {
    border-color: #545454;
  }
  .uil-ripple-css div:nth-of-type(2) {
    border-color: #8e947d;
    -ms-animation-delay: 0.875s;
    -moz-animation-delay: 0.875s;
    -webkit-animation-delay: 0.875s;
    -o-animation-delay: 0.875s;
    animation-delay: 0.875s;
  }
}