.info-c-full .info-c-full-wrap {
display: table;
width: 100%;
height: 100%
}
.info-circle-icons {
cursor: pointer
}
.info-circle-icons {
text-align: center
}
.info-wrapper {
padding-top: 1px; /* collapsing margin behavior - http://goo.gl/qe7Qkn */
}
.info-circle-wrapper {
width: 100%
}
.info-circle-wrapper .smile_icon_list.left li .icon_description {
margin-left: 1.2em;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px 10px 10px 15px
}
.info-c-full-br .info-circle-img-icon,
.info-c-semi-br .info-circle-img-icon {
-webkit-transform: none;
-ms-transform: none;
transform: none;
vertical-align: baseline;
}
.info-c-full-br .icon-circle-list .info-circle-img-icon,
.info-c-semi-br .icon-circle-list .info-circle-img-icon {
-webkit-box-shadow: none;
box-shadow: none;
max-width: 100%;
width: 1em;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: top;
}
.info-c-full-br,
.info-c-semi-br {
max-width: 80%;
position: relative;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: auto;
border: 1px solid rgba(0, 0, 0, 0)
}
.info-c-full-br .info-c-full {
text-align: center;
width: 60%;
height: 60%;
margin: 20%;
-webkit-border-radius: 50%;
border-radius: 50%;
padding: 20px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden !important;
}
.clipped-info-circle .info-c-full-br .info-c-full{
overflow: visible;
}
.info-circle-def {
display: table;
width: 100%;
height: 100%
}
.info-circle-sub-def {
display: table-cell;
vertical-align: middle
}
.info-c-full i {
line-height: 1;
width: 1.5em;
height: 1.5em
}
.info-c-full h3 {
margin: 0;
text-align: center;
color: inherit
}
.info-c-full {
padding: 20px
}
.info-circle-text {
text-align: center;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
display: block;
width: 90%;
margin: 0 auto
}
.info-c-full-br .icon-circle-list .info-details {
display: none
}
.info-c-full-br .icon-circle-list .info-circle-icons {
height: 2em;
width: 2em;
list-style: none;
position: absolute;
opacity: 0;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
}
.info-c-full-br .icon-circle-list {
position: absolute;
top: 50%;
left: 50%
}
.info-c-semi-br.br-dash-out {
border-style: dashed;
border-width: 2px;
position: relative
}
.info-c-semi {
border: 2px solid green;
margin: 50px;
text-align: center;
line-height: 200px
}
.info-c-semi-br .icon-circle-list .info-circle-icons img {
width: 64px;
max-width: 100%
}
.info-c-semi-br .icon-circle-list .info-circle-icons span {
display: none
}
.info-c-semi-br .icon-circle-list .info-circle-icons {
list-style: none;
position: absolute;
margin: -32px
}
.info-c-semi-br .icon-circle-list {
position: absolute;
top: 200px;
left: 200px
}
.info-circle-responsive .smile_icon_list_wrap {
display: none
}
.info-circle-wrapper .icon-circle-list {
background-color: transparent !important
}
.icon-circle-list .info-circle-link{
position:relative;
width:100%;
height:100%;
}
.icon-circle-list a.info-circle-href{
position:absolute;
width:100%;
height:100%;
left:0;
border-bottom: none;
z-index:99999;
}
.info-circle-buzz-out {
-webkit-animation-name: circle_buzz_out;
animation-name: circle_buzz_out;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes circle_buzz_out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg)
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg)
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg)
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg)
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg)
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg)
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg)
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg)
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0)
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0)
}
}
@keyframes circle_buzz_out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
-ms-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg)
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
-ms-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg)
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
-ms-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg)
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
-ms-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg)
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
-ms-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg)
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
-ms-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg)
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
-ms-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg)
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
-ms-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg)
}
90% {
-webkit-transform: translateX(1px) rotate(0);
-ms-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0)
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
-ms-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0)
}
}
.info-circle-pulse {
-webkit-animation-name: circle_pulse;
animation-name: circle_pulse;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes circle_pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
75% {
-webkit-transform: scale(0.9);
transform: scale(0.9)
}
}
@keyframes circle_pulse {
25% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
75% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9)
}
}
.info-circle-push {
-webkit-animation-name: circle_push;
animation-name: circle_push;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes circle_push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes circle_push {
50% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8)
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
.info-circle-pop {
-webkit-animation-name: circle_pop;
animation-name: circle_pop;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes circle_pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes circle_pop {
50% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
.smile_icon_list.ic-resp-img li.icon_list_item {
min-height: .5em !important
}
.smile_icon_list.ic-resp-img li .icon_list_icon {
width: 2em;
height: 2em;
line-height: 2em;
}
.smile_icon_list.ic-resp-img li .icon_list_icon img {
-webkit-box-shadow: none;
box-shadow: none;
max-width: 100%;
width: 1em;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: top;
}
.info-circle-wrapper .smile_icon_list.left.ic-resp-img li .icon_description {
margin-left: 0.85em !important
}
.info-circle-wrapper .smile_icon_list.left.ic-resp-img li .icon_description{
height:2em;
}
.info-circle-responsive .smile_icon_list.left li .icon_list_icon {
margin-right: 1em;
}
.info-circle-icons * {
line-height: inherit;
} |