/* --- Seperator-Angled -- */
.kc-angle-top {
    clip-path: polygon(0px 0px, 50% 35px, 100% 0px, 100% 100%, 0px 100%);
    padding-top: 6% !important;
}
.kc-angle-bottom {
    clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% calc(100% - 40px), 0px 100%);
    padding-bottom: 6% !important;
}
.kc-angle-topBottom {
    clip-path: polygon(0px 0px, 50% 35px, 100% 0px, 100% 100%, 50% calc(100% - 40px), 0px 100%);
    padding: 6% 0 !important;
}

/* -- Effects -- */
.kc-item-float {
  transform: translateY(0);
  transition-duration: .3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.kc-item-float:hover {
  transform: translateY(-8px);
}
.kc-item-grow {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition-duration: .3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.kc-item-grow:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*------- Animations -------*/
@-webkit-keyframes scaleTilt {
  0% {-webkit-transform: rotate(-30deg);}
  50% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(-30deg);}
}

@-webkit-keyframes rotateLR_Scale {
  0% {-webkit-transform: rotate(30deg) scale(1.1);}
  50% {-webkit-transform: rotate(-25deg) scale(1);}
  100% {-webkit-transform: rotate(30deg) scale(1.1);}
}
    
@-webkit-keyframes moveUp {
  0% {-webkit-transform: rotate(30deg) translateY(-15px);}
  50% {-webkit-transform: rotate(0deg) translateY(0px);}
  100% {-webkit-transform: rotate(30deg) translateY(-15px);}
}
    
@keyframes rotateLeftRight {
  0% {margin-left: -30px;}
  50% {margin: 0px;}
  100% {margin-right: 30px;}
}
 
@-webkit-keyframes ripple {
0%{box-shadow:0 8px 10px rgba(102,102,102,0.1),0 0 0 0 rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1)}
100%{box-shadow:0 8px 10px rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1),0 0 0 20px rgba(102,102,102,0)}
}

@keyframes ripple {
0%{box-shadow:0 8px 10px rgba(102,102,102,0.1),0 0 0 0 rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1)}
100%{box-shadow:0 8px 10px rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1),0 0 0 20px rgba(102,102,102,0)}
}

/*------- Responsive -------*/
@media only screen and (max-width: 768px) {
 .kc-angle-top {clip-path: polygon(0px 0px, 50% 20px, 100% 0px, 100% 100%, 0px 100%);}
 .kc-angle-bottom {clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% calc(100% - 30px), 0px 100%);}
 .kc-angle-topBottom {clip-path: polygon(0px 0px, 50% 20px, 100% 0px, 100% 100%, 50% calc(100% - 20px), 0px 100%);}
}
/*------- End All CSS -------*/