.iq-counter {
padding: 15px;
}
.iq-counter .iq-counter-icon {
color: var(--color-theme-secondary);
margin-bottom: 15px;
}
.iq-counter .iq-counter-img i {
line-height: normal;
}
.iq-counter i:before {
font-size: 60px;
line-height: normal;
}
.iq-counter .iq-counter-info .timer, .iq-counter .iq-counter-info .counter-symbol, .iq-counter .iq-counter-info .counter-after-content {
font-size: 40px;
color: var(--color-theme-primary);
}
.iq-counter .iq-counter-info {
margin-bottom: 0;
line-height: normal;
font-weight: var(--font-weight-regular);
}
.iq-counter .counter-content .counter-title-text {
margin: 0;
}
.iq-counter .counter-content .counter-content-text, .iq-counter .counter-content .counter-title-text {
margin: 10px 0 0;
font-weight: normal;
} .iq-counter.iq-counter-style-2 {
display: flex;
}
.iq-counter.iq-counter-style-2 .iq-counter-icon {
height: 80px;
width: 80px;
margin-bottom: 0;
}
.iq-counter.iq-counter-style-2.text-right, .iq-counter.iq-counter-style-2.text-center {
display: block;
}
.iq-counter.iq-counter-style-2.text-right .iq-counter-icon {
float: right;
}
.iq-counter.iq-counter-style-2 .counter-content .counter-title-text {
margin: 0;
}
.iq-counter.iq-counter-style-2.text-center .iq-counter-icon {
margin: 0 auto 15px;
width: auto;
height: auto;
} .iq-counter.iq-counter-style-3 .iq-counter-info {
display: block;
font-size: 48px;
margin: 10px 0;
margin-bottom: 30px;
line-height: 40px;
}
.iq-counter.iq-counter-style-3 .counter-title-text {
position: relative;
}
.iq-counter.iq-counter-style-3 .counter-title-text:before {
background: var(--color-theme-white);
content: "";
height: 3px;
position: absolute;
top: -10px;
width: 50px;
margin-left: -25px;
left: 50%;
margin-left: -25px;
}
.iq-counter.iq-counter-style-3 {
position: relative;
z-index: 0;
color: var(--color-theme-white);
}
.iq-counter.iq-counter-style-3 .iq-counter-info .timer {
font-weight: 600;
}
.iq-counter.iq-counter-style-3 i {
color: var(--color-theme-white);
font-size: 90px;
opacity: 0.4;
line-height: 90px;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
z-index: -1;
}
.iq-counter.iq-counter-style-3 i:before {
font-size: 90px;
} .iq-counter.iq-counter-style-4 {
padding: 0;
position: relative;
margin-bottom: 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.iq-counter.iq-counter-style-4 .counter-content {
border: 1px solid #f2f2f4;
padding: 45px 30px;
background: var(--color-theme-white);
position: relative;
z-index: 1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.iq-counter.iq-counter-style-4 .counter-content .iq-counter-icon {
margin-bottom: 15px;
font-size: 45px;
line-height: 45px;
}
.iq-counter.iq-counter-style-4 .counter-content .iq-counter-icon i::before {
vertical-align: middle;
}
.iq-counter.iq-counter-style-4 .counter-content .counter-title-text {
font-weight: bold;
}
.iq-counter.iq-counter-style-4 .iq-counter-info {
font-weight: normal;
}
.iq-counter.iq-counter-style-4 .counter-content .counter-content-text {
margin-bottom: 0;
}
.iq-counter.iq-counter-style-4:before {
position: absolute;
content: "";
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-theme-primary);
transform: rotate(0deg);
z-index: -1;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
transform: rotate(0deg);
}
.iq-counter.iq-counter-style-4:hover:before, .iq-counter.iq-counter-style-4.active:before {
opacity: 1;
transform: rotate(12deg);
}
.iq-counter.iq-counter-style-4:hover .counter-content .iq-counter-icon, .iq-counter.iq-counter-style-4.active .counter-content .iq-counter-icon {
color: var(--color-theme-primary);
} .iq-counter.iq-counter-style-5 .counter-content .counter-title-text {
margin: 0 0 30px;
display: block;
font-weight: bold;
}
.iq-counter.iq-counter-style-5 .iq-counter-info {
font-weight: normal;
}
.iq-counter.iq-counter-style-5 .counter-content-text {
text-transform: uppercase;
margin-top: 15px;
} .iq-counter.iq-counter-style-6 .counter-content .iq-counter-info {
display: block;
float: left;
width: 100%;
margin-bottom: 15px;
font-weight: normal;
font-size: 35px;
color: var(--color-theme-white);
}
.iq-counter.iq-counter-style-6 .iq-counter-info .timer, .iq-counter.iq-counter-style-6 .iq-counter-info .counter-symbol, .iq-counter.iq-counter-style-6 .iq-counter-info .counter-after-content {
font-size: 30px;
color: var(--color-theme-white);
}
.iq-counter.iq-counter-style-6 .counter-content .counter-title-text {
color: var(--color-theme-white);
}
.iq-counter.iq-counter-style-6 .counter-content {
color: var(--color-theme-white);
}
.iq-counter.iq-counter-style-6 .counter-content .iq-border-effect {
position: relative;
display: inline-block;
}
.iq-counter.iq-counter-style-6.text-center .counter-content .iq-counter-info {
text-align: center;
display: inline-block;
float: none;
margin: 0 auto 15px;
}
.iq-counter.iq-counter-style-6 .counter-content .iq-border-effect .iq-effect {
position: relative;
background: var(--color-theme-white);
height: 30px;
width: 2px;
overflow: hidden;
}
.iq-counter.iq-counter-style-6 .counter-content .iq-border-effect .iq-effect::after, .iq-counter.iq-counter-style-6 .counter-content .iq-border-effect .iq-effect::before {
content: "";
position: absolute;
background: var(--color-theme-primary);
width: 2px;
height: 3px;
left: 0;
z-index: 1;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: MOVE-BG;
animation-name: MOVE-BG;
}
@-webkit-keyframes MOVE-BG {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(60px);
transform: translateY(60px);
}
}
@keyframes MOVE-BG {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(60px);
transform: translateY(60px);
}
} .iq-counter.iq-counter-style-7 {
text-align: center;
margin: 0 auto 30px;
padding: 20px;
border-radius: 5px;
background: var(--color-theme-primary);
}
.iq-counter.iq-counter-style-7 .counter-content .iq-counter-info {
display: inline-block;
vertical-align: middle;
margin-bottom: 0px;
font-weight: normal;
font-size: 35px;
color: var(--color-theme-secondary);
margin-top: 0;
}
.iq-counter.iq-counter-style-7 .iq-counter-info .timer, .iq-counter.iq-counter-style-7 .iq-counter-info .counter-symbol, .iq-counter.iq-counter-style-7 .iq-counter-info .counter-after-content {
float: left;
font-size: 35px;
color: var(--color-theme-secondary);
}
.iq-counter.iq-counter-style-7 .counter-content .counter-title-text {
color: var(--color-theme-secondary);
}
.iq-counter.iq-counter-style-7 .counter-content {
color: var(--color-theme-secondary);
}
.iq-counter.iq-counter-style-7 .counter-content .iq-border-effect {
position: relative;
display: inline-block;
vertical-align: middle;
}
.iq-counter.iq-counter-style-7.text-center .counter-content .iq-counter-info {
text-align: center;
display: inline-block;
float: none;
margin: 0 auto 15px;
}
.iq-counter.iq-counter-style-7 .counter-content .iq-border-effect .iq-effect {
margin: 0 15px;
position: relative;
background: var(--color-theme-secondary);
height: 2px;
width: 30px;
overflow: hidden;
vertical-align: middle;
}
.iq-counter.iq-counter-style-7 .counter-content .iq-border-effect .iq-effect::after, .iq-counter.iq-counter-style-7 .counter-content .iq-border-effect .iq-effect::before {
content: "";
position: absolute;
background: var(--color-theme-white);
width: 2px;
height: 3px;
left: 0;
z-index: 1;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: H-MOVE-BG;
animation-name: H-MOVE-BG;
}
.iq-counter.iq-counter-style-7 .counter-content .counter-title-text {
display: inline-block;
vertical-align: middle;
margin: 0;
}
@-webkit-keyframes H-MOVE-BG {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(60px);
transform: translateX(60px);
}
}
@keyframes H-MOVE-BG {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(60px);
transform: translateX(60px);
}
}
@media(max-width:1024px) { .iq-counter {
margin-bottom: 30px;
}
}
@media(max-width:1199px){
.iq-counter .timer {
font-size: 52px;
line-height: normal;
}
}