Current Path : /var/test/www/foundation/wp-content/themes/kallyas/pagebuilder/elements/TH_Statistics/ |
Current File : /var/test/www/foundation/wp-content/themes/kallyas/pagebuilder/elements/TH_Statistics/style.css |
.statistic-box__title { font-size: 40px; color: #fff; font-weight: 300; line-height: 1; margin: 0 0 10px;} .statistic-box__content { color: #fff; font-size: 13px; } .statistic-box__details { margin:0; position: relative; width: 100%;} .statistic-box__icon-holder {width: 100%; margin: 0; vertical-align: middle;} .statistic-box__icon { color: #fff; opacity:.8; line-height: 60px; margin:0; -webkit-transition:opacity .2s ease-out; transition:opacity .2s ease-out;} span.statistic-box__icon {font-size: 40px; } .statistic-box__icon-holder--img { line-height: 60px;} .statistic-box__iconimg {max-height: 80px; width:auto;} .statistic-box:hover .statistic-box__icon {opacity:1;} .statistic-box__line { position: relative; width: 100%; height: 1px; border-bottom: dotted 1px #cd2122; margin: 0;} .statistic-box__line::before { content: ''; position: absolute; height: 3px; background-color: #fff; width: 3px; display: block; left: 50%; border-radius: 3px; top: -1px; box-shadow: 0px 5px 0 -1px #fff, 0px 10px 0 -1px #fff, 0px 15px 0 -1px #fff, 0px 20px 0 -1px #fff;} /* Style 1 - horiontal odd/even */ .statistic-box--stl-style1.statistic-box__container { width: 100%; display:table; table-layout:fixed; margin-top: 120px; margin-bottom: 120px;} .statistic-box--stl-style1 .statistic-box {position:relative; display:table-cell; text-align: center;} .statistic-box--stl-style1 .statistic-box__icon-holder { position:absolute; top: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); padding-top:0; padding-bottom:35px;} .statistic-box--stl-style1 .statistic-box__details {position:absolute; top: 0;min-height: 90px; padding-top: 35px; padding-bottom: 0;} .statistic-box--odd .statistic-box__icon-holder { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); padding-top:35px; padding-bottom:0;} .statistic-box--odd .statistic-box__details { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); padding-bottom:35px; padding-top:0;} .statistic-box--odd .statistic-box__line::before {bottom:-2px; box-shadow: 0px -5px 0 -1px #fff, 0px -10px 0 -1px #fff, 0px -15px 0 -1px #fff, 0px -20px 0 -1px #fff;} /* Style 1 - horiontal normal */ .statistic-box--stl-style2.statistic-box__container { width: 100%; display:table; table-layout:fixed; margin-top: 120px; margin-bottom: 120px;} .statistic-box--stl-style2 .statistic-box {position:relative; display:table-cell; text-align: center;} .statistic-box--stl-style2 .statistic-box__icon-holder { position:absolute; top: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); padding-top:0; padding-bottom:35px;} .statistic-box--stl-style2 .statistic-box__details {position:absolute; top: 0;min-height: 90px; padding-top: 35px; padding-bottom: 0;} /* Dark */ .statistic-box--dark .statistic-box__title { color: #121212; } .statistic-box--dark .statistic-box__content { color: #121212; } .statistic-box--dark .statistic-box__icon { color: #121212; } .statistic-box--dark .statistic-box__line::before { background-color: #121212; box-shadow: 0px 5px 0 -1px #121212, 0px 10px 0 -1px #121212, 0px 15px 0 -1px #121212, 0px 20px 0 -1px #121212;} .statistic-box--dark .statistic-box--odd .statistic-box__line::before {box-shadow: 0px -5px 0 -1px #121212, 0px -10px 0 -1px #121212, 0px -15px 0 -1px #121212, 0px -20px 0 -1px #121212;} /* notification hide on enabled PB. */ .zn_pb_editor_enabled .statistic-box__icon-holder ~ .statistic-box__line, .zn_pb_editor_enabled .statistic-box__details ~ .statistic-box__line {min-height: 3px;} /* MQ's */ @media screen and (min-width: 992px) and (max-width: 1199px){ .statistic-box__title { font-size: 32px; } } @media screen and (max-width: 991px){ /* Style 1 - horiontal odd/even */ .statistic-box--stl-style1.statistic-box__container { width: 100%; display:block; margin:0;} .statistic-box--stl-style1 .statistic-box {position:relative; display:block; float:left; width:50%; margin-bottom: 30px; text-align: center;} .statistic-box--stl-style1 .statistic-box__icon-holder { position:static; -webkit-transform: none; -ms-transform: none; transform: none; padding-top:0; padding-bottom:0;} .statistic-box--stl-style1 .statistic-box__details {position:static; min-height: 90px; padding-top: 0; padding-bottom: 0;} .statistic-box--stl-style1 .statistic-box--odd .statistic-box__icon-holder { -webkit-transform: none; -ms-transform: none; transform: none; padding-top:0; padding-bottom:0;} .statistic-box--stl-style1 .statistic-box--odd .statistic-box__details { -webkit-transform: none; -ms-transform: none; transform: none; padding-bottom:0; padding-top:0;} .statistic-box--stl-style1 .statistic-box__line { display: none;} /* Style 2 - horiontal odd/even */ .statistic-box--stl-style2.statistic-box__container { width: 100%; display:block; margin:0;} .statistic-box--stl-style2 .statistic-box {position:relative; display:block; float:left; width:50%; margin-bottom: 30px; text-align: center;} .statistic-box--stl-style2 .statistic-box__icon-holder { position:static; -webkit-transform: none; -ms-transform: none; transform: none; padding-top:0; padding-bottom:0;} .statistic-box--stl-style2 .statistic-box__details {position:static; min-height: 90px; padding-top: 0; padding-bottom: 0;} .statistic-box--stl-style2 .statistic-box--odd .statistic-box__icon-holder { -webkit-transform: none; -ms-transform: none; transform: none; padding-top:0; padding-bottom:0;} .statistic-box--stl-style2 .statistic-box--odd .statistic-box__details { -webkit-transform: none; -ms-transform: none; transform: none; padding-bottom:0; padding-top:0;} .statistic-box--stl-style2 .statistic-box__line { display: none;} } @media screen and (max-width: 767px){ .statistic-box--stl-style1 .statistic-box, .statistic-box--stl-style2 .statistic-box { float:none; display: block; width:100%; } }