/***************************** PopUp ********************************/
.popup-banner {
    border-top: 10vh solid rgba(14, 17, 62,0.8);
    border-bottom: 10vh solid rgba(14, 17, 62,0.8);
    border-left: 10vw solid rgba(14, 17, 62,0.8);
    border-right: 10vw solid rgba(14, 17, 62,0.8);
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    animation: 1s ease-in-out 0s 1 fade;
    border-radius: 0px;
    display: block;
    color: #767676;
    font-size: 0.8rem;
  }

.popup-banner-inner {

  padding: 30px;
  background-color: #fff;
  overflow-y: auto;
  height: 100%;
}
.popup-banner-inner img {
  display: block;
}
.popup-banner-inner img.aligncenter {
  margin: 0 auto 10px auto;
}
.popup-banner .popup-close {
  position: absolute;
  right: -25px;
  top: -25px;
  cursor: pointer;
  text-decoration: none;
  background-color: #5c872f;
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 3px;
  transition: all ease 300ms;
}

.popup-banner .popup-close svg{
  transform: translateY(-50%);
  top: 50%;
  position: relative;
}

.popup-banner .popup-close:hover {
width: 70px;
height: 70px;
  transition: all ease 300ms;
}

@media (min-width:700px) {
  .popup-banner {
    border-top: 20vh solid rgba(14, 17, 62,0.8);
    border-bottom: 20vh solid rgba(14, 17, 62,0.8);
    border-left: 20vw solid rgba(14, 17, 62,0.8);
    border-right: 20vw solid rgba(14, 17, 62,0.8);
  }
  .popup-banner-inner {
    padding: 50px;
  }
  
}


/* custom css per site */
.show-popup .nav-bar {
  top: 40px
}
.show-popup .nav-bar.hidden{
  -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
}
.logged-in.show-popup .nav-bar {
  top: 72px
}
.logged-in.show-popup .nav-bar.hidden{
  -webkit-transform: translateY(-72px);
    -moz-transform: translateY(-72px);
    -ms-transform: translateY(-72px);
    -o-transform: translateY(-72px);
    transform: translateY(-72px);
}
.show-popup .nav-bar{
  transition: transform .3s cubic-bezier(0.86, 0, 0.07, 1);
}


/************************** animations *********************/

@keyframes slideInFromLeft {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
