.media-container {position: relative;}
.media-container__link--wrap {position: absolute; top:0; left:0; bottom: 0; right:0; }
.media-container__link--btn {position: absolute; top:50%; left:50%; -webkit-transform:translate3d(-50%, -50%,0); transform:translate3d(-50%, -50%,0); outline: none !important; -webkit-backface-visibility: hidden;}
.media-container__link .kl-icon {color:#fff;}
.media-container__link--btn .kl-icon:not(.circled-icon) {margin-right: 5px; -webkit-transition:margin-right .2s ease-out; transition:margin-right .2s ease-out;}
.media-container__link--btn:hover .kl-icon:not(.circled-icon) {margin-right: 15px; }
/* Bodered animated 1 */
.media-container__link--style-borderanim1 {padding: 10px 30px; font-size: 42px; letter-spacing: 2px; font-weight: 600; line-height: 1.2; color:#fff; text-align: center; white-space: nowrap; -webkit-transition: color .2s ease-out; transition: color .2s ease-out;}
.media-container__link--style-borderanim1 > i {opacity:.8; background-color: #fff; display: block; position: absolute; -webkit-transition: all .2s ease-out; transition: all .2s ease-out }
.media-container__border-tt { width:30%; height:7px; top: 0; left: 0;}
.media-container__border-tl { height:80%; width:7px; top: 7px; left: 0;}
.media-container__border-bb { width:30%; height:7px; bottom:0; right:0; }
.media-container__border-br { height:80%; width:7px; bottom:7px; right:0; }
.media-container:hover > i {opacity:1; }
.media-container:hover .media-container__border-tt { width:100%; height:3px; top: 0; left: 0;}
.media-container:hover .media-container__border-tl { height:100%; width:3px; top: 0; left: 0;}
.media-container:hover .media-container__border-bb { width:100%; height:3px; bottom:0; right:0; }
.media-container:hover .media-container__border-br { height:100%; width:3px; bottom:0; right:0; }
/* Alternative animated border */
.media-container__link--style-borderanim2 .media-container__text{ text-align:center; font-size: 32px; letter-spacing: 4px; font-weight: 700; line-height: 1; color:#fff; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.borderanim2-svg {position: relative; }
.borderanim2-svg__shape {stroke-width: 8px; fill: transparent; stroke: #FFF; -webkit-transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; }
.media-container:hover .borderanim2-svg__shape {stroke-width: 3px; stroke-dashoffset: 0; }
/* Circle animation */
.circleanim-svg {width: 108px; height: 108px; }
.circleanim-svg__circle-front,
.circleanim-svg__circle-back {fill:none; stroke: #fff;}
.circleanim-svg__circle-front { stroke-dasharray: 60 1000; stroke-width: 5px; stroke-opacity: .5; stroke-dashoffset: 0; -webkit-transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s, stroke-opacity 1s; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s, stroke-opacity 1s; }
.media-container:hover .circleanim-svg__circle-front { stroke-dasharray: 340; stroke-width: 2px; stroke-opacity:1; }
@media screen and (min-width: 1200px){ .media-container { height:300px;  } }
@media screen and (min-width: 992px) and (max-width: 1199px){ .media-container { height:300px;  } }
@media screen and (min-width: 768px) and (max-width: 991px){ .media-container { height:300px;  } }
@media screen and (max-width: 767px){ .media-container { height:400px;  } }