@font-face {
    font-family: 'plaza';
    src: url('../fonts/plaza.ttf');
  }

  h1,h2,h3,h4,h5,h6{
    font-family: 'plaza';
  }

  .btn-animated, #offcanvas a {
    position: relative;
    overflow: hidden;
  }
  .btn-animated:after, #offcanvas li:not(.offlogo) a:after{
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: 0.45;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 1050ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: 10;
  }

  .btn-animated:hover:after, #offcanvas li:not(.offlogo) a:hover:after {
    left: 120%;
    transition: all 1050ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .flashing{
    position: relative;
    overflow: hidden;
  }




  .flashing:after {
    background: #fff;
    content: "";
    height: 200%;
    left: -100%;
    opacity: 0.20;
    position: absolute;
    top: -80px;
    transform: rotate(35deg);
    transition: all 1050ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 100px;
    z-index: 10;
  }

  .flashing:hover:after {
    left: 120%;
    transition: all 1050ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  @-webkit-keyframes rotate {
    100% {
      transform: rotate(1turn);
    }
  }
  
  @keyframes rotate {
    100% {
      transform: rotate(1turn);
    }
  }
  .tricolor .thumbcover {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 4px;
    border: none;
    background: white;
  }
  .tricolor .thumbcover:hover::before, .tricolor .thumbcover:hover::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#ffffff, #ffffff), linear-gradient(#d53e33, #d53e33);
    -webkit-animation: rotate 4s linear infinite;
            animation: rotate 4s linear infinite;
  }
  .tricolor .thumbcover:hover::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
    -webkit-animation: opacityChange 3s infinite alternate;
            animation: opacityChange 3s infinite alternate;
  }
  
  @-webkit-keyframes opacityChange {
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.5;
    }
  }
  
  @keyframes opacityChange {
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.5;
    }
  }