#smoking-cost-calculator {
    font-family: "Akrobat", sans-serif;
    font-size: 19px;
    padding: 20px 0 0;
}

/*QUESTION*/
#smoking-cost-calculator .scc-question {
    overflow: hidden;
    text-align: center;
}

#smoking-cost-calculator .scc-question > .scc-question-inner {
    margin: 0 auto;
    /*max-width: 70%;*/
    text-align: center;
}
/*
#smoking-cost-calculator .scc-question > .scc-question-inner > img {
    margin: 0 auto;
    width: 100%;
    height: auto;
}
*/

.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('../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('../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('../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 {
}

/*INTRO*/
#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;
}


/*SLIDER*/
#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 > img {
    width: 100%!important;
    height: 100%!important;
}

#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; /*+ 11*/
    left: 7px /*+ 7*/
}

#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; /*- 167*/
}




#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;
}



/*SLIDE*/
#scc-calculator-slide-value {
    /*margin-top: -4px;
    margin-left: 20px;*/
    margin-bottom: 10px;
    font-family: "Raleway", sans-serif;
    font-size: 40px;
    /*line-height: 0;*/
    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: #0d2b88;*/
    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:nth-child(2) {
    display: none;
}*/

#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 {
    /*height: 29px;
    width: 29px;*/
    
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

#scc-calculator-slide.ui-slider-horizontal .ui-slider-handle:hover {
    /*top: -13px;
    margin-left: -15px;*/
}

#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%;
}


/*QUIT SMOKING TITLE*/
#smoking-cost-calculator .scc-quit-smoking-title {
    padding-top: 70px;
}

#smoking-cost-calculator .scc-quit-smoking-title p {
   /* font-family: "flood-std", sans-serif;
    font-weight: 400;*/
    font-style: normal;
    /*font-size: 33px;*/
    font-size: 28px;
    line-height: 1.07;
    color: #0d2b88;
}

/*TIME AMOUNTS*/
#scc-money-saved .scc-time-amounts {
    position: relative;
    height: 60px;
    overflow: hidden;
    /*border: 1px solid #000;*/
}

#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;
    
   /* -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;*/
}

#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;
}

/*TIME*/
#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 > a:focus {
    border-color: orange;
}
*/

#scc-money-saved .scc-time-button.active > a {
    color: #fff;
    background-color: #0d2b88;
}

/*CATEGORIES*/
#smoking-cost-calculator .scc-categories {
    position: relative;
    /*height: 1100px;*/ /*Need to set*/
    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 {
    /*overflow: hidden;*/
    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.6s ease-in-out;
    -moz-transition: transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    
    transition-delay: 0s;*/
    
    /*animation: bounce-in 0.4s 0.5s forwards;*/
}

#smoking-cost-calculator .scc-category .scc-category-hero-image .scc-category-hero-image-inner {
    display: inline-block;
    margin: 40px;
    text-align: center;
    /*overflow: hidden;*/
}

#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 {
    /*margin-top: 30px;*/
    overflow: hidden;
    text-align: center;
    /*font-family: "flood-std", sans-serif;*/
    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 {
    /*margin-top: 5px;*/
    -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;
    }
    
    /*SLIDER*/
    #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;
    }
    
    /*INTRO*/
    #smoking-cost-calculator .scc-intro p {
        font-size: 24px;
    }
    
    /*
    #smoking-cost-calculator .scc-question > .scc-question-inner {
        max-width: 70%;
    }
    */
    
    .scc-question .scc-question-text-wrapper .scc-question-text-content {
        margin: 15px 90px;
        font-size: 45px;
    }

    #smoking-cost-calculator .line-text {
        display: block;
    }
    
    /*SLIDER*/
    #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-slider-slide-wrapper {
        margin-top: 60px;
    }
    */
    
    
    #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;
    }
    
    
    /*QUIT SMOKING TITLE*/
    #smoking-cost-calculator .scc-quit-smoking-title {
        padding-top: 100px;
    }

    #smoking-cost-calculator .scc-quit-smoking-title p {
        font-size: 40px;
    }
    
    /*TIME AMOUNTS*/
    #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}
}