.jmg-panel .slide-left a{
	transition: transform .2s;
}
.jmg-panel .slide-left:hover a{
	transform: translate(-10%, 0);
}

.jmg-panel .slide-right a{
	transition: transform .2s;
}
.jmg-panel .slide-right:hover a{
	transform: translate(10%, 0);
}

.jmg-panel .zoom a{
	transition: transform .2s;
}
.jmg-panel .zoom a:hover{
	transform: scale(1.2, 1.2);
}

.jmg-panel .flip:hover a{
	animation-name: flip;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
	transform: rotateY(0deg);
}
@keyframes flip { 
        0% { 
            transform: rotateY(0deg); 
        } 
		50% { 
            transform: rotateY(180deg); 
        }
		100% { 
            transform: rotateY(0deg); 
        }
}

.illuminated-border a{
  position: relative;
  margin: 300px auto 0;
}

.illuminated-border:hover a:before,
.illuminated-border:hover a:after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
    #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: -1;
  animation: steam 20s linear infinite;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.illuminated-border a:after {
  filter: blur(50px);
}



.clippath-border a{
	width: auto;
	height: auto;
	background-color: #DDFFF7;
	position: relative;
}
.clippath-border a:hover{
	box-shadow: 10px 10px 42px 0 rgba(0,0,0,0.75);
}
.clippath-border a:hover .jmg-button-div:before, 
.clippath-border a:hover:before{
	mix-blend-mode:multiply;
	filter:none;
	z-index: -1;
	content:'';
	width:calc(100% + (50px * 2));
	height:calc(100% + (50px * 2));
	position: absolute;
	display: block;
	animation: borderanim 10s ease-in-out infinite;
	transform:translateX(-50px) translateY(-50px);
}
@keyframes borderanim {
  0%, 100% {
    -webkit-clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
            clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
  }
  50% {
    -webkit-clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
            clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
  }
}

.clippath-border a:hover .jmg-button-div:before{
	animation-delay: -5s;
	background-color: #93e1d8;
	clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
}
.clippath-border a:before {
	background-color: #AA4465;
	  clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
}

.clippath-borderx a:hover:after{
	animation-delay: -0.1s;
}
.clippath-border:hover:before, 
.clippath-border:hover:after {
          animation-duration: 0.2s;
}


.gold-border-shimmer a{
  position: relative;
  margin: 300px auto 0;
}

.gold-border-shimmer:hover a:before,
.gold-border-shimmer:hover a:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, transparent 20%, transparent 40%, #ECD08C 50%, #ECD08C 55%, transparent 70%, transparent 100%);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: shine 1s linear;
}

@keyframes shine {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}




.border-composition a{
  position: relative;
  margin: 300px auto 0;
}

.border-composition a:hover:before,
.border-composition a:hover:after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: -1;
  background-repeat: no-repeat;
  background-image:   linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
                      linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%),
                      linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
                      linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%);
  background-size:    100% 1px,
                        1px 100%,
                        100% 1px,
                        1px 100%;
  background-position:    0 0,
                            100% 0,
                            100% 100%,
                            0 100%;
  animation: bg 0.75s cubic-bezier(0.19, 1, 0.22, 1) 1;
}

@keyframes bg {
    0% {
        background-size:    0 1px,
                            1px 0,
                            0 1px,
                            1px 0;
    }
    25% {
        background-size:    100% 1px,
                            1px 0,
                            0 1px,
                            1px 0;
    }
    50% {
        background-size:    100% 1px,
                            1px 100%,
                            0 1px,
                            1px 0;
    }
    75% {
        background-size:    100% 1px,
                            1px 100%,
                            100% 1px,
                            1px 0;
    }
    100% {
        background-size:    100% 1px,
                            1px 100%,
                            100% 1px,
                            1px 100%;
    }
}





.framed a{
  position: relative;
}

.framed a:hover:before{
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  width: calc(50% + 1px);
  height: calc(50% + 1px);
  z-index: -1;
  animation: frame .2s linear;
}
.framed a:hover:after {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  width: calc(50% + 1px);
  height: calc(50% + 1px);
  z-index: -1;
  animation: frame .2s linear;
}
.framed a:hover .jmg-button-div:before{
  content: '';
  position: absolute;
  left: -1px;
  bottom: -1px;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  width: calc(50% + 1px);
  height: calc(50% + 1px);
  z-index: -1;
  animation: frame .2s linear;
}
.framed a:hover  .jmg-button-div:after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  width: calc(50% + 1px);
  height: calc(50% + 1px);
  z-index: -1;
  animation: frame .2s linear;
}

@keyframes frame {
  0% {
    width: calc(1%);
  	height: calc(1%);
  }
  100% {
    width: calc(50%);
  	height: calc(50%);
  }
}


.clipme a{
  position: relative;
}

.clipme a:hover:before{
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background:#69ca62;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  clip-path: inset(0% 0% 0% 0%);
  animation: clipbefore 3.2s linear infinite;
}
.clipme a:hover:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background:#69ca62;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  clip-path: inset(0% 0% 0% 90%);
  animation: clipafter 3.2s linear infinite;
}

@keyframes clipbefore {
  0% { 
	  clip-path: inset(0% 0% 90% 0%); 
	}
  25% { 
	  clip-path: inset(0% 90% 0% 0%);
	}
  50% { 
	  clip-path: inset(90% 0% 0% 0%); 
	}
  75% { 
	  clip-path: inset(0% 0% 0% 90%); 
	}
  100% { 
	  clip-path: inset(0% 0% 90% 0%); 
	}
}

@keyframes clipafter {
  0% { 
	  clip-path: inset(90% 0% 0% 0%); 
	}
  25% { 
	  clip-path: inset(0% 0% 0% 90%);
	}
  50% { 
	  clip-path: inset(0% 0% 90% 0%); 
	}
  75% { 
	  clip-path: inset(0% 90% 0% 0%); 
	}
  100% { 
	  clip-path: inset(90% 0% 0% 0%); 
	}
}



.pulse a:hover .jmg-icon-div{
  box-shadow: 0 0 0 rgba(0,0,0, 0.6);
  animation: pulseit 1s linear;
}


@keyframes pulseit {
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,0, 0.6);
  }
  70% {
      box-shadow: 0 0 0 40px rgba(0,0,0, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(0,0,0, 0);
  }
}


.gradient-purple a{
  position: relative;
  margin: 300px auto 0;
}

.gradient-purple a:hover:before,
.gradient-purple a:hover:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: gpurple 9s ease infinite;
}

@keyframes gpurple {
  0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.gradient-purple a:after {
  filter: blur(50px);
}









.clippath-circle a .jmg-icon-div{
  position: relative;
}

.clippath-circle a:hover .jmg-icon-div:before,
.clippath-circle a:hover .jmg-icon-div:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background: #ff8a00;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: cpcircle .5s ease;
}

@keyframes cpcircle {
  	0% {
		clip-path: circle(25%);
	}
	100% {
		clip-path: circle(75%);
	}
}

.text-color a .jmg-icon-wrap span{
	-webkit-transition: color 0.5s ease;
	-moz-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	-ms-transition: color 0.5s ease;
	transition: color 0.5s ease;
}

.icn-hover-color a .jmg-icon-div{
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
	-ms-transition: color 0.2s ease-out;
	transition: color 0.2s ease-out;
}

.jmg-panel ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.lft span{
	animation: 0.3s ease 0s 1 flyInFromLeft;
	animation-fill-mode: both;
	z-index: -1;
	visibility: hidden;
}
.jmg-panel:hover ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.lft span{
	visibility: visible;
}
.jmg-panel ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.lft:hover span{
	animation: 0.3s ease 0s 1 flyOutFromLeft;
	animation-fill-mode: both;
}
@keyframes flyOutFromLeft{
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	75% {
		opacity: 0.9;
		transform: translateX(5px);
	}
	100% {
		opacity: 1;
		transform: translateX(5px);
	}
}
@keyframes flyInFromLeft{
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	25% {
		opacity: 0.9;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(-100%);
	}
}

.jmg-panel ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.rght span{
	animation: 0.3s ease 0s 1 flyInFromRight;
	animation-fill-mode: both;
	z-index: -1;
	visibility: hidden;
}
.jmg-panel:hover ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.rght span{
	visibility: visible;
}
.jmg-panel ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.rght:hover span{
	animation: 0.3s ease 0s 1 flyOutFromRight;
	animation-fill-mode: both;
}
@keyframes flyOutFromRight{
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	75% {
		opacity: 0.5;
		transform: translateX(0);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes flyInFromRight{
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	25% {
		opacity: 0.5;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}


.jmg-panel ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.btm{

}

.jmg-panel ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.btm span{
	animation: 0.3s ease 0s 1 flyInFromBottom;
	animation-fill-mode: both;
	z-index: -1;
	visibility: hidden;
}
.jmg-panel:hover ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.btm span{
	visibility: visible;
}
.jmg-panel ul li.flyout-text div.jmg-button-div .jmg-icon-wrap.btm:hover span{
	animation: 0.3s ease 0s 1 flyOutFromBottom;
	animation-fill-mode: both;
	height: auto;
}
@keyframes flyOutFromBottom{
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
	75% {
		opacity: 0.5;
		transform: translateY(0);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes flyInFromBottom{
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	25% {
		opacity: 0.5;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-100%);
	}
}
.jmg-panel ul li.shadow-remove .jmg-icon-div{
	transition: box-shadow 0.3s ease-in-out;
}
.jmg-panel ul li.shadow-remove .jmg-icon-div:hover{
	box-shadow: none;
}



.jmg-panel ul li.expand-button div.jmg-button-div .jmg-icon-wrap.lft span{
	display: flex;
  	align-items: center;
  	justify-content: center;
	z-index: -1;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	transform: translateX(-100%);	
}
.jmg-panel ul li.expand-button div.jmg-button-div .jmg-icon-wrap{
	overflow: hidden;
}
.jmg-panel ul li.expand-button div.jmg-button-div .jmg-icon-wrap.lft:hover span{
	opacity: 1;	
}

.jmg-panel ul li.expand-button div.jmg-button-div .jmg-icon-wrap.rght span{
	display: flex;
  	align-items: center;
  	justify-content: center;
	z-index: -1;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	transform: translateX(100%);	
}
.jmg-panel ul li.expand-button div.jmg-button-div .jmg-icon-wrap{
	overflow: hidden;
}
.jmg-panel ul li.expand-button div.jmg-button-div .jmg-icon-wrap.rght:hover span{
	opacity: 1;	
}




.jmg-panel ul li.animate-shadow .jmg-icon-div{
	transition: box-shadow 0.3s ease-in-out;
	box-shadow: none;
}
.jmg-panel ul li.animate-shadow .boxshadow-1 .jmg-icon-div:hover{
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.jmg-panel ul li.animate-shadow .boxshadow-2 .jmg-icon-div:hover{
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.jmg-panel ul li.animate-shadow .boxshadow-3 .jmg-icon-div:hover{
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.jmg-panel ul li.animate-shadow .boxshadow-4 .jmg-icon-div:hover{
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.jmg-panel ul li.animate-shadow .boxshadow-5 .jmg-icon-div:hover{
	box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
}
.jmg-panel ul li.animate-shadow .boxshadow-6 .jmg-icon-div:hover{
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.jmg-panel ul li.animate-shadow .boxshadow-7 .jmg-icon-div:hover{
	box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}





.jmg-panel ul li.animate-tooltip div.jmg-button-div .jmg-tooltip-wrap .jmg-tooltip-div{
	transform: translateY(100%);
  	opacity: 0;
  	pointer-events: none;
  	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


.jmg-panel ul li.animate-tooltip div.jmg-button-div .jmg-tooltip-wrap:hover .jmg-tooltip-div{
  	transform: translateY(-10px);
  	opacity: 1;
  	pointer-events: auto;
}