/* animation css*/

.jkm_animation {
	-webkit-animation: jkm_animation 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate-reverse both;
	        animation: jkm_animation 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate-reverse both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-1-4 15:35:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jkm_animation
 * ----------------------------------------
 */
@-webkit-keyframes jkm_animation {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes jkm_animation {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


.shadow-pop-tr {
	-webkit-animation: shadow-pop-tr 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: shadow-pop-tr 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-1-4 15:56:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-pop-tr
 * ----------------------------------------
 */

@keyframes shadow-pop-tr {
  0% {
    -webkit-box-shadow: 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7;
            box-shadow: 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7, 0 0 #00bde7;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px -1px #00bde7, 2px -2px #00bde7, 3px -3px #00bde7, 4px -4px #00bde7, 5px -5px #00bde7, 6px -6px #00bde7, 7px -7px #00bde7, 8px -8px #00bde7;
            box-shadow: 1px -1px #00bde7, 2px -2px #00bde7, 3px -3px #00bde7, 4px -4px #00bde7, 5px -5px #00bde7, 6px -6px #00bde7, 7px -7px #00bde7, 8px -8px #00bde7;
    -webkit-transform: translateX(-2px) translateY(2px);
            transform: translateX(-2px) translateY(2px);
  }
}




.jkm_rotate:hover {
    -webkit-animation: jkm_rotate 0.6s ease-in-out both;
            animation: jkm_rotate 0.6s ease-in-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-1-5 15:56:43
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jkm_rotate
 * ----------------------------------------
 */
@-webkit-keyframes jkm_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes jkm_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}



/*circle animation */
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
    
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

.ch-img-1 { 
    background-image: url(../images/7.jpg);
    z-index: 12;
}

.ch-img-2 { 
    background-image: url(../images/8.jpg);
    z-index: 11;
}

.ch-img-3 { 
    background-image: url(../images/9.jpg);
    z-index: 10;
}

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 60px;
    padding: 22px 0 0 0;
    height: 85px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: #333;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 24px;
    margin: 7px auto 0;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;
    
    -webkit-transition: 
        -webkit-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -moz-transition: 
        -moz-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -o-transition: 
        -o-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -ms-transition: 
        -ms-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transition: 
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
        
    -webkit-transform: translateX(60px) rotate(90deg);
    -moz-transform: translateX(60px) rotate(90deg);
    -o-transform: translateX(60px) rotate(90deg);
    -ms-transform: translateX(60px) rotate(90deg);
    transform: translateX(60px) rotate(90deg);
        
    -webkit-backface-visibility: hidden;
}

.ch-info p a:hover {
    background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -moz-transform: translateX(0px) rotate(0deg);
    -o-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
}


.launcher {
    -webkit-animation: launcher 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse backwards;
            animation: launcher 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse backwards;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-1-17 18:42:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation launcher
 * ----------------------------------------
 */
@-webkit-keyframes launcher {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
}
@keyframes launcher {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
}


.requestquote {
    -webkit-animation: requestquote 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) infinite alternate-reverse both;
            animation: requestquote 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) infinite alternate-reverse both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-1-17 19:4:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation requestquote
 * ----------------------------------------
 */
@-webkit-keyframes requestquote {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    -webkit-transform: translateZ(-400px);
            transform: translateZ(-400px);
  }
}
@keyframes requestquote {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    -webkit-transform: translateZ(-400px);
            transform: translateZ(-400px);
  }
}



  /* Create the animation... */
  @keyframes slide-in {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  /* ...and then apply it: */
  .quotebtn {
    animation: slide-in 1000ms;
  }