span.photobox__label a{color:#ffffff;}
span.photobox__label a:hover{}


.photobox{
  display: inline-block;
}

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

.photobox__preview{
  display: block;
  max-width: 100%;
}

.photobox__previewbox:before{
  content: "";
}

/* type 1 */

.photobox_type1 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  border-radius: 50%;
  
  position: absolute;
  top: 0;
  left: 0;

  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  transition: transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
  will-change: transform;
  transform: scale(0);
}

.photobox_type1:hover .photobox__previewbox:before{
  transform: scale(2);
  transition-duration: var(--photoboxAnimationDuration, .2s);
  transition-delay: 0s;
}

.photobox_type1 .photobox__label{
  width: 50%;
  transform: translate(-200%, -50%);
  transition: transform var(--photoboxAnimationDuration, .2s) ease-out;
  will-change: transform;
    color:#ffffff;
  position: absolute;
  top: 50%;
  left: 15%;
}

.photobox_type1:hover .photobox__label{
  transition-duration: var(--photoboxAnimationDuration, .2s);
  transform: translate(0, -50%);
}

/* type 2*/

.photobox_type2 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  
  border-radius: 50%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  
  position: absolute;
  top: 0;
  right: 0;

  transition: transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
  will-change: transform;
  transform: scale(0);
}

.photobox_type2:hover .photobox__previewbox:before{
  transform: scale(2);
  transition-duration: var(--photoboxAnimationDuration, .2s);
  transition-delay: 0s;
}

.photobox_type2 .photobox__label{
  width: 50%;
  text-align: right;
  color:#ffffff;
  transform: translate(200%, -50%);
  transition: transform var(--photoboxAnimationDuration, .2s) ease-out;
  will-change: transform;
  
  position: absolute;
  top: 50%;
  right: 15%;
}

.photobox_type2:hover .photobox__label{
  transition-duration: var(--photoboxAnimationDuration, .2s);
  transform: translate(0, -50%);
}


/* type 3 */

.photobox_type3 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.photobox_type3:hover .photobox__previewbox:before{
  opacity: 1;
}

.photobox_type3 .photobox__label{
  width: 98%;
  text-align: center;
    color:#ffffff;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.photobox_type3:hover .photobox__label{
  opacity: 1;
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

.photobox_type3 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type3:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}

/*
* demo styles for photobox
*/

.photobox{
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;

  --photoboxOverlay: rgba(72, 27, 174, .7);
  /*--photoboxAnimationDuration: .5s;*/
}

@media (min-width: 768px){

  html{
    font-size: 62.5%;
  }
}

@media (max-width: 767px){

  html{
    font-size: 50%;
  }
}

.patreon{
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  flex: none;
  
  color: #222;
  text-align: center;
  background-color: #fffdee;
}

.patreon__container{
  padding-left: 10px;
  padding-right: 10px;
}

.patreon__link{
  text-decoration: underline;
  color: #ff4242;
}