/* ======== Icon List CSS =========== */

.su-icon-list {
    padding: 0;
}

.su-icon-list.has-connector .icon_list_item  {
    overflow: hidden;
}

.su-icon-list .icon_list_item {
    padding-bottom: 30px;
    margin: 0;
    clear: both;
    position: relative;
    line-height: inherit;
}
.su-icon-list .icon_list_item .icon_list_icon {
    font-size: 24px;
    width: 3em;
    height: 3em;
    padding: 20px;
    line-height: 3em;
    text-align: center;
    background: #FFF;
    z-index: 9;
    position: relative;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.su-icon-list .icon_list_item .icon_list_connector {position: relative;}
.su-icon-list .icon_list_item .icon_list_connector:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0px;
    margin-left: -1px;
    height: 900px;
    border-left: 2px dashed #ddd;
    z-index: 1;
    margin-top: 3px;
}

.su-icon-list .list-img-icon {
    display: block;
    margin: 0 auto;
    max-height: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.su-icon-list .icon_list_item .icon_description h3  {
    font-size: 18px;
    font-weight: bold;
    margin-top: 3px;
    margin-bottom: 10px;
    clear: none !important;
    line-height: normal;
}
.su-icon-list .icon_list_item .icon_description .icon_description_text {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    display: block;
}

.su-flip-box .su-icon-list:last-child .icon_list_item {
    padding-bottom: 0;
}

/*left*/
.su-icon-list.su-icon-align-left .icon_list_item .icon_list_wrapper {
    float: left;
}
/*right*/
.su-icon-list.su-icon-align-right {
    text-align: right;
}
.su-icon-list.su-icon-align-right .icon_list_item .icon_list_wrapper {
    float: right;
}

/*top*/
.su-icon-list.su-icon-align-top {
    display: flex;
}
.su-icon-list.su-icon-align-top .icon_list_item {
    display: table-cell;
    display:-moz-box;
    width: 100%;
}
.su-icon-list.su-icon-align-top .icon_list_item .icon_list_wrapper .icon_list_icon {
    margin: 0 auto;
    float: none;
}
.su-icon-list.su-icon-align-top .icon_list_item .icon_description {
    text-align: center;
    margin-top: 15px;
    padding-bottom:0;
}
.su-icon-list.su-icon-align-top_left .icon_list_icon,
.su-icon-list.su-icon-align-top_right .icon_list_icon {
  margin-bottom: 10px;
  display: inline-block;
}
.su-icon-list.su-icon-align-title .icon_list_icon {
  float: left;
  margin-right: 10px;
  background: none !important;
  margin-top: 3px;
}
.su-icon-list.su-icon-align-top_left .icon_list_icon {
  text-align: left;
}
.su-icon-list.su-icon-align-top_right {
  text-align: right;
}


/* description gap style */
.su-icon-align-right .description-gap .icon_description {
    margin-right: 0 !important;
}

.description-gap .icon_description {
    margin-left: 0 !important;
}
.description-gap .icon_description .icon_description_text {
    display: inline-block;
    margin-top: 15px;
}
.su-il-link:hover .icon_title, .su-il-link:hover .icon_description_text {
  opacity: 0.8;
}



/* animation 1 */
.su-il-animation-1 .icon_list_item:hover .icon_list_icon {
    -webkit-animation-name: wobble-bottom;
    animation-name: wobble-bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes wobble-bottom {
  16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); }
  33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); }
  49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); }
  66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); }
  83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); }
  100% { -webkit-transform: skew(0); transform: skew(0); }
}
@keyframes wobble-bottom {
  16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); }
  33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); }
  49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); }
  66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); }
  83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); }
  100% { -webkit-transform: skew(0); transform: skew(0); }
}

/* aniamtion 2 */
.su-il-animation-2 .icon_list_item:hover .icon_list_icon{
    -webkit-animation-name: push;
    animation-name: push;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
@-webkit-keyframes push {
  50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes push {
  50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 
  100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* animation 3 */
.su-il-animation-3 .icon_list_item:hover .icon_list_icon {
    -webkit-animation-name: pop;
    animation-name: pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes pop {
  50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
}
@keyframes pop {
  50% { transform: scale(1.2); transform: scale(1.2); }
}

/* animation 4 */
.su-il-animation-4 .icon_list_item:hover .icon_list_icon {
    -webkit-animation-name: buzz-out;
    animation-name: buzz-out;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* effect 4 */
@-webkit-keyframes buzz-out {
  10% { -webkit-transform: translateX(3px) rotate(2deg); }
  20% { -webkit-transform: translateX(-3px) rotate(-2deg); }
  30% { -webkit-transform: translateX(3px) rotate(2deg); }
  40% { -webkit-transform: translateX(-3px) rotate(-2deg); }
  50% { -webkit-transform: translateX(2px) rotate(1deg); }
  60% { -webkit-transform: translateX(-2px) rotate(-1deg); }
  70% { -webkit-transform: translateX(2px) rotate(1deg); }
  80% { -webkit-transform: translateX(-2px) rotate(-1deg); }
  90% { -webkit-transform: translateX(1px) rotate(0); }
  100% { -webkit-transform: translateX(-1px) rotate(0); }
}
@keyframes buzz-out {
  10% { transform: translateX(3px) rotate(2deg); }
  20% { transform: translateX(-3px) rotate(-2deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  40% { transform: translateX(-3px) rotate(-2deg); }
  50% { transform: translateX(2px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-1deg); }
  70% { transform: translateX(2px) rotate(1deg); }
  80% { transform: translateX(-2px) rotate(-1deg); }
  90% { transform: translateX(1px) rotate(0); }
  100% { transform: translateX(-1px) rotate(0); }
}

/* animation 5 */
.su-il-animation-5 .icon_list_item:hover .icon_list_icon .list-img-icon {
    -webkit-animation: spinAround 2s linear infinite;
    -moz-animation: spinAround 2s linear infinite;
    animation: spinAround 2s linear infinite;
}

@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}


/* animation 6 */
.su-il-animation-6 .icon_list_icon .list-img-icon:before {
    position: absolute;
    right: 50%;
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.su-il-animation-6:hover .icon_list_icon i.list-img-icon:before,
.su-il-animation-6:hover .icon_list_icon img.list-img-icon {
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-animation-name: icon-drop;
    animation-name: icon-drop;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
@-webkit-keyframes icon-drop {
  0% { opacity: 0; }
  50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  51%, 100% { opacity: 1; }
}

@keyframes icon-drop {
  0% { opacity: 0; }
  50% { opacity: 0; transform: translateY(-100%); }
  51%, 100% { opacity: 1; }
}

/* inside shortcode style */

.su-icon-align-right .su-list ul li {
  padding: 4px 2em 4px 0 !important;
}
.su-icon-align-right .su-list ul li i {
  right: 0;
  left: auto;
}