.shared-play-button {
	width: 60px;
	height: 60px;
	line-height: 1;
	border: 3px solid rgba(255, 255, 255, 1);
	font-size: 26px;
	text-align: center;
	border-radius: 50%;
	background: rgba(0, 140, 153, .5);
	color: #fff;
	position: absolute;
	padding: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: none;
	transition: background 100ms, border-color 100ms;
}
.contentRender[class*=contentRender_name_plugins_collections] .img-cont:hover .shared-play-button {
	border-color: rgba(255, 255, 255, .6);
	background: rgba(0, 0, 0, .7);
}


/* Animation Button Special */

/* 
  <div class="cta">
    <a class="read-more border-button trace" href="{{link.url}}" target="{{link.target}}">
      <span class="btn-border-top border"></span>
      <span class="btn-border-right-top border"></span>
      <span class="btn-border-right-bottom border"></span>
      <span class="btn-border-bottom border"></span>
      <span class="btn-border-left border"></span>
      <span class="text">I am a button <i class="fas fa-caret-right"></i></span>
    </a>
  </div>
 */

/* Styles */

/* class="cta"  */
.cta {
    padding-bottom: 22px;
    width: max-content;
    display: flex;
}
/* .border-button trace */
.cta .border-button {
    color: #fff;
}
.border-button.trace {
    padding: 22px 0px 22px 22px;
    border: none;
}
.border-button {
    position: relative;
    box-sizing: border-box;
    padding: 15px 15px 15px 25px;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    letter-spacing: 5.4px;
    line-height: 1;
    color: #008c99;
}
a {
    background-color: transparent;
}
a:active, a:hover {
    outline: 0;
}
/* span.1 */
.border-button:hover .btn-border-top, .border-button:hover .btn-border-bottom {
    animation: shrink-grow-x 0.6s cubic-bezier(.67,.05,.26,.81);
}
.border-button.trace .btn-border-top {
    left: 0;
    top: 0;
    width: calc(100% - 23px);
    height: 3px;
    transform-origin: left;
}
.border-button.trace .border {
    position: absolute;
    background: #fff;
}
/* span.2 */
.border-button:hover .btn-border-right-top, .border-button:hover .btn-border-right-bottom, .border-button:hover .btn-border-left {
    animation: shrink-grow-y 0.6s cubic-bezier(.67,.05,.26,.81);
}
.border-button.trace .btn-border-right-top {
    right: 20px;
    top: 0;
    width: 3px;
    height: 20%;
    transform-origin: top;
}
/* span.3 */
.border-button.trace .btn-border-right-bottom {
    right: 20px;
    bottom: 0;
    width: 3px;
    height: 20%;
    transform-origin: bottom;
}
/* span.4 */
.border-button.trace .btn-border-bottom {
    left: 0;
    bottom: 0;
    width: calc(100% - 23px);
    height: 3px;
    transform-origin: right;
}
/* span.5 */
.border-button.trace .btn-border-left {
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    transform-origin: bottom;
}
/* span.6.readmore */
.border-button:hover .text {
    animation: fade-in-right 1.2s cubic-bezier(.17,.54,.39,.88);
}
.border-button.trace .text {
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    font-size: 18px;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
}
/* Animations keyframes */
@keyframes shrink-grow-x {0%{transform: scale(0);}100% {transform: scale(1);}}
@keyframes shrink-grow-y {0%{transform: scale(0);}100% {transform: scale(1);}}
@keyframes fade-in-right { 0% { opacity: 0; transform: translateX(-10px); } 20% { opacity: 0; transform: translateX(-10px);} 100% { opacity: 1; transform: translateX(0); }}