#smoking-cost-calculator {
font-family: "Akrobat", sans-serif;
font-size: 19px;
padding: 20px 0 0;
} #smoking-cost-calculator .scc-question {
overflow: hidden;
text-align: center;
}
#smoking-cost-calculator .scc-question > .scc-question-inner {
margin: 0 auto; text-align: center;
} .scc-question .scc-question-text-wrapper {
max-width: 835px;
margin: 0 auto;
overflow: hidden;
}
.scc-question .scc-question-text-wrapper .scc-question-text-wrapper-top {
height: 30px;
background: transparent url(//www.quittas.org.au/wp-content/plugins/smoking-cost-calculator/images/how-much-is-your-smoking-top.png) bottom left no-repeat;
background-size: 100% auto;
}
.scc-question .scc-question-text-wrapper .scc-question-text-wrapper-bottom {
height: 68px;
background: transparent url(//www.quittas.org.au/wp-content/plugins/smoking-cost-calculator/images/how-much-is-your-smoking-bottom.png) top left no-repeat;
background-size: 100% auto;
}
.scc-question .scc-question-text-wrapper .scc-question-text-wrapper-middle {
overflow: hidden;
background: transparent url(//www.quittas.org.au/wp-content/plugins/smoking-cost-calculator/images/how-much-is-your-smoking-middle.png) top left repeat-y;
background-size: 100% auto;
}
.scc-question .scc-question-text-wrapper .scc-question-text-content {
margin: 10px 25px;
text-align: center;
font-family: "flood-std", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 35px;
line-height: 1;
color: #0d2b88;
}
#smoking-cost-calculator .line-text {
} #smoking-cost-calculator .scc-intro {
padding-top: 0;
}
#smoking-cost-calculator .scc-intro h2 {
color: #0d2b88;
}
#smoking-cost-calculator .scc-intro p {
font-family: "Akrobat", sans-serif;
font-size: 19px;
} #scc-calculator-slider {
padding-top: 30px;
text-align: center;
}
#scc-calculator-slider .section-inner {
max-width: 100%;
margin: 0 auto;
text-align: left;
}
#scc-calculator-slider .scc-calculator-cigar {
margin-bottom: 10px;
text-align: center;
}
#scc-calculator-slider .scc-calculator-cigar .scc-calculator-cigar-inner {
position: relative;
width: 165px;
height: 219px;
margin: 0 auto;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-box-back {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-box-back > img {
width: auto;
height: 100%;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks {
position: absolute;
width: calc(100% - 5px);
height: 100%;
overflow: visible;
top: 0;
left: 5px;
z-index: 20;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick {
position: absolute;
height: 154px;
visibility: hidden;
top: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
transition-delay: 0s;
-webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, top 1s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, top 1s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, top 1s ease-in-out;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, top 1s ease-in-out;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick.show {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick.reverse {
-webkit-transition: opacity 0.3s ease-in-out 0.7s, visibility 0.3s ease-in-out 0.7s, top 1s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out 0.7s, visibility 0.3s ease-in-out 0.7s, top 1s ease-in-out;
-o-transition: opacity 0.3s ease-in-out 0.7s, visibility 0.3s ease-in-out 0.7s, top 1s ease-in-out;
transition: opacity 0.3s ease-in-out 0.7s, visibility 0.3s ease-in-out 0.7s, top 1s ease-in-out;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick > img {
width: auto;
height: 100%;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick:nth-child(3n+1) {
top: 13px;
left: 14px;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick:nth-child(3n+2) {
top: 24px; left: 7px }
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick:nth-child(3n+3) {
top: 35px;
left: 0;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick:nth-child(1) {
top: -154px; }
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-box-front {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 30;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-box-front > img {
width: auto;
height: 100%;
}
#scc-calculator-slider .scc-calculator-slider-question {
font-family: "Akrobat", sans-serif;
font-size: 19px;
line-height: 1.1;
text-align: center;
}
#scc-calculator-slider .scc-calculator-slider-slide-wrapper {
margin-top: 25px;
} #scc-calculator-slide-value { margin-bottom: 10px;
font-family: "Raleway", sans-serif;
font-size: 40px; color: #0d2b88;
text-align: center;
}
#scc-calculator-slide.ui-slider-horizontal {
height: 3px;
cursor: pointer;
}
#scc-calculator-slide.ui-widget-content {
background-image: none; background-color: #d2d3d5;
border: none;
}
#scc-calculator-slide.ui-corner-all {
border-radius: 3px;
}
#scc-calculator-slide .ui-slider-range.ui-corner-all {
border-radius: 0;
}
#scc-calculator-slide .ui-slider-handle {
cursor: pointer;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#scc-calculator-slide .ui-widget-header {
background-image: none;
background-color: #0d2b88;
} #scc-calculator-slide.ui-slider .ui-slider-handle {
height: 17px;
width: 17px;
}
#scc-calculator-slide.ui-slider-horizontal .ui-slider-handle {
top: -7px;
margin-left: -9px;
}
#scc-calculator-slide.ui-slider .ui-slider-handle.ui-state-default {
background-image: none;
background-color: #0d2b88;
border-color: #0d2b88;
}
#scc-calculator-slide.ui-slider .ui-slider-handle.ui-state-default.active,
#scc-calculator-slide.ui-slider .ui-slider-handle.active { -webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
#scc-calculator-slide.ui-slider-horizontal .ui-slider-handle:hover { }
#scc-calculator-slide.ui-slider .ui-slider-handle.ui-state-default.active {
background-color: #fff;
}
#scc-calculator-slide.ui-slider .ui-slider-handle.ui-corner-all {
border-radius: 50%;
} #smoking-cost-calculator .scc-quit-smoking-title {
padding-top: 70px;
}
#smoking-cost-calculator .scc-quit-smoking-title p { font-style: normal; font-size: 28px;
line-height: 1.07;
color: #0d2b88;
} #scc-money-saved .scc-time-amounts {
position: relative;
height: 60px;
overflow: hidden; }
#scc-money-saved .scc-time-amounts .scc-time-amounts-inner  {
height: 100%;
}
#scc-money-saved .scc-time-amounts .scc-time-amount {
position: absolute;
width: 100%;
text-align: center;
visibility: hidden;
font-family: "Raleway", sans-serif;
font-size: 45px;
line-height: 1;
color: #0d2b88;
z-index: 5; }
#scc-money-saved .scc-time-amounts .scc-time-amount.active {
visibility: visible;
z-index: 10;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
} #scc-money-saved .scc-time-buttons {
margin-top: 20px;
overflow: hidden;
}
#scc-money-saved .scc-time-buttons .scc-time-buttons-inner {
height: 100%;
}
#scc-money-saved .scc-time-buttons ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#scc-money-saved .scc-time-buttons ul > .scc-time-button {
display: inline-block;
margin: 0 2px;
}
#scc-money-saved .scc-time-button > a {
display: block;
padding: 8px 15px;
border: 1px solid #0d2b88;
font-family: "Raleway", sans-serif;
color: #0d2b88;
background-color: #fff;
-webkit-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
-moz-transition:background-color 0.5s ease-in-out, color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
#scc-money-saved .scc-time-button > a:hover {
text-decoration: none;
} #scc-money-saved .scc-time-button.active > a {
color: #fff;
background-color: #0d2b88;
} #smoking-cost-calculator .scc-categories {
position: relative;  margin-top: 30px;
overflow: hidden;
}
#smoking-cost-calculator .scc-categories .scc-categories-inner {
height: 100%;
}
#smoking-cost-calculator .time-wrap {
float:left;
position:relative;
width:300px;
height:500px;
}
#smoking-cost-calculator .scc-category {
position: absolute;
width: 100%;
overflow: hidden;
visibility: hidden;
z-index: 5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;*/
}
#smoking-cost-calculator .scc-category.active {
visibility: visible;
z-index: 10;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
#smoking-cost-calculator .scc-category .scc-category-hero-image { text-align: center;  }
#smoking-cost-calculator .scc-category .scc-category-hero-image .scc-category-hero-image-inner {
display: inline-block;
margin: 40px;
text-align: center; }
#smoking-cost-calculator .scc-category .scc-category-hero-image .scc-category-hero-image-inner > img {
display: block;
}
#smoking-cost-calculator .scc-category .scc-category-hero-title { overflow: hidden;
text-align: center; font-weight: 400;
font-style: normal;
font-size: 24px;
line-height: 1.2;
color: #0d2b88;
-webkit-transform: translate3d(0,15px,0);
-moz-transform: translate3d(0,15px,0);
-ms-transform: translate3d(0,15px,0);
-o-transform: translate3d(0,15px,0);
transform: translate3d(0,15px,0);
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition-delay: 0.1s;
}
#smoking-cost-calculator .scc-category .scc-category-hero-title .scc-category-hero-title-inner {
height: 100%;
}
#smoking-cost-calculator .scc-category .scc-category-details-or {
margin-top: 40px;
text-align: center;
-webkit-transform: translate3d(0,15px,0);
-moz-transform: translate3d(0,15px,0);
-ms-transform: translate3d(0,15px,0);
-o-transform: translate3d(0,15px,0);
transform: translate3d(0,15px,0);
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition-delay: 0.2s;
}
#smoking-cost-calculator .scc-category .scc-category-details-or p {
margin-bottom: 0;
font-family: "Akrobat", sans-serif;
font-size: 19px;
font-weight: bold;
text-transform: uppercase;
}
#smoking-cost-calculator .scc-category .scc-category-details { -webkit-transform: translate3d(0,15px,0);
-moz-transform: translate3d(0,15px,0);
-ms-transform: translate3d(0,15px,0);
-o-transform: translate3d(0,15px,0);
transform: translate3d(0,15px,0);
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition-delay: 0.3s;
}
#smoking-cost-calculator .scc-category .scc-category-details .scc-category-detail {
}
#smoking-cost-calculator .scc-category .scc-category-hero-image.animate .scc-category-hero-image-inner > img {
animation: bounce-in 0.5s forwards;
}
#smoking-cost-calculator .scc-category .scc-category-hero-title.animate,
#smoking-cost-calculator .scc-category .scc-category-details-or.animate,
#smoking-cost-calculator .scc-category .scc-category-details.animate {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: scale(.001);
}
20%{
opacity: 1 !important;
}
80% {
transform: scale(1.15);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@media (min-width: 375px) {
#smoking-cost-calculator {
padding-top: 40px;
}
.scc-question .scc-question-text-wrapper .scc-question-text-content {
margin: 15px 50px;
}
#smoking-cost-calculator .scc-intro {
padding-top: 30px;
} #scc-calculator-slider {
padding-top: 70px;
}
#scc-calculator-slider .scc-calculator-slider-question {
font-size: 25px;
}
#scc-calculator-slider .scc-calculator-slider-slide-wrapper {
margin-top: 60px;
}
#scc-calculator-slide-value {
font-size: 45px;
}
}
@media (min-width: 768px) {
#smoking-cost-calculator {
padding-top: 70px;
font-size: 24px;
}
.scc-question .scc-question-text-wrapper .scc-question-text-wrapper-bottom {
height: 98px;
} #smoking-cost-calculator .scc-intro p {
font-size: 24px;
} .scc-question .scc-question-text-wrapper .scc-question-text-content {
margin: 15px 90px;
font-size: 45px;
}
#smoking-cost-calculator .line-text {
display: block;
} #scc-calculator-slider {
padding-top: 100px;
text-align: center;
}
#scc-calculator-slider .section-inner {
max-width: 85%;
}
#scc-calculator-slider .scc-calculator-cigar {
margin-bottom: 0;
}
#scc-calculator-slider .scc-calculator-slider-question {
font-size: 30px;
}
#scc-calculator-slide-value {
margin-top: -4px;
margin-left: 20px;
margin-bottom: 0;
font-size: 50px;
line-height: 0;
text-align: left;
} #scc-calculator-slider .scc-calculator-cigar .scc-calculator-cigar-inner {
height: 234px;
width: 176px;
}
#scc-calculator-slider .scc-calculator-cigar .scc-cigar-sticks > .scc-cigar-stick {
height: 165px;
} #smoking-cost-calculator .scc-quit-smoking-title {
padding-top: 100px;
}
#smoking-cost-calculator .scc-quit-smoking-title p {
font-size: 40px;
} #scc-money-saved .scc-time-amounts .scc-time-amount {
font-size: 50px;
}
#scc-money-saved .scc-time-button > a {
padding: 10px 20px;
}
#scc-money-saved .scc-time-button > a:hover {
color: #fff;
background-color: #0d2b88;
}
#smoking-cost-calculator .scc-category .scc-category-hero-title {
font-size: 28px;
}
#smoking-cost-calculator .scc-category .scc-category-details-or p {
font-size: 24px;
}
}
@media (min-width: 991px) {
#scc-calculator-slider .section-inner {
max-width: 70%;
}
}
@media (min-width: 1200px) {
#scc-calculator-slider .section-inner {
max-width: 58%;
}
}
@media (max-width:1000px) {
.cost-wrap {cursor:pointer}
.cost-wrap.active {background:#000}
.time-wrap {display:none}
.time-wrap.active {display:block}
}