/**
 * Pushly CSS
 */

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-300px);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(300px);
  }
  to {
    opacity: 1;
  }
}

.toopib_close {
  position: absolute;
  right: 0px;
  top: 10px;
  width: 12px;
  height: 12px;
  opacity: 0.6;
  z-index:100001;
}
.toopib_close:hover {
  opacity: 1;
}
.toopib_close:before, .toopib_close:after {
  position: absolute;
  left: 0;
  content: ' ';
  height: 12px;
  width: 2px;
  background-color: #333;
}
.toopib_close:before {
  transform: rotate(45deg);
}
.toopib_close:after {
  transform: rotate(-45deg);
}

.toopib_container {
  z-index: 2147483638;
  overflow: hidden;	
  position: relative;
  cursor: pointer;
}

.progress {
  height: 5px;
  width: 100%;
}
.progress .in {
  animation: fill 15s linear 1;
  height: 100%;
  background-color: #94ed7b;
}

@keyframes fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#toopib_pib_box {
  position: fixed;
  top: 50%;
  max-width: 55%;
  right: 5px;
  background-color: #fff;
  animation: fadeInTop 1s ease-in-out;
  border-radius: 3px;
  box-shadow: rgba(99,99,99,.2) 0px 2px 8px 0px;
  border: 1px solid #3636363d;
  border-right: none;
  transform: translateY(-50%);
}

#toopib_pib_box .toopib_image{
  height: 125px;
  overflow: hidden;
}

#toopib_pib_box .toopib_body{
  margin:5px;
  min-height: 50px;
}

#toopib_pib_box .toopib_title A{
  font-size:14px;
  color:#001689;
  font-weight: bold;
}

#toopib_pib_box .toopib_description{
  font-size:12px;
  color:#363636;
}

#toopib_pib_box .toopib_close {
  position: absolute;
  top: -20px;
  right: 0px;
  width: 25px;
  height: 20px;
  opacity: 1;
  z-index: 100001;
  background-color: #f3f3f3;
  border-radius: 3px 3px 0 0;
  border: 1px solid #d7d7d7e0;
}

#toopib_pib_box .toopib_close::before, #toopib_pib_box .toopib_close::after {
  position: absolute;
  left: 11px;
  content: ' ';
  height: 14px;
  width: 2px;
  background-color: #555;
  top: 5px;
}

@media only screen and (min-width: 768px) {
  #toopib_pib_box {
    max-width: 300px;
    top: 45vh;
    right: 0px;
    animation: fadeInBottom 1s ease-in-out;
  }
}