

@keyframes pulse_animation {
	0% { transform: scale(1); }
	10% { transform: scale(0.90); }
	20% { transform: scale(1); }
	30% { transform: scale(0.90); }
	40% { transform: scale(1); }
	50% { transform: scale(0.90); }
	60% { transform: scale(1); }
	70% { transform: scale(0.90); }
	80% { transform: scale(1); }
	90% { transform: scale(0.90); }
	100% { transform: scale(1); }
}

.progsect.__active .progsect-pill::before {
	animation-name: pulse_animation;
	animation-duration: 8000ms;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.mobile-timeframes {display:none;}

.progsect.__active .progsect-pill::before { width:60px; height:60px; top:-17px; left:-17px;}

.progsect {outline:0 !important; text-align:center; background:none;}
.progsect-pill {width:26px; height:26px; z-index:1;}

.progsect-pilltitle {color:#CCC;}
.progsect.__active .progsect-pilltitle {font-size:1.4em; margin-top:-6px; transition:all 0.3s ease 0s; color:#FFF;}

.progwrap {margin:40px 0 80px;}
.proginnerwrap {position:relative;}
.proginnerwrap #slider-bg {position:absolute; top:48px; height:13px; width:100%; border:1px solid #c5c5c5; background:#FFF;}

.progbutton::after {top:38px;}

.progcontent-col{ margin:0px auto; width:100%;}

@media(min-width: 992px) {
    .progcontent-col {
        width: 31%;
        padding: 10px 10px;
    }

    .progcontent-col:first-child {
        width: 35%;
        padding: 10px;
    }
    .progcontent-image {
        float:right;
        width:70%;
    }
}
.progcontent-figure {font-size:4em;}
.progcontent-wattage {font-size:2.15em;}
.progcontent-perunit {font-size:0.8em;}

.progcontent-total{ font-size:2.5em; }
.progcontent-total.bignumber{ font-size:1.4em; }

#slider {display:block; margin-top:45px; position:relative; width:80%; height:20px; left:10%; z-index:1; border:0; background:none;}
#slider .ui-slider-handle { outline-width:0px; background: #fff none repeat scroll 0 0; border:0 none; border-radius:100px; box-shadow:0 0 8px 1px #4a4a4a; height:26px; width:26px; top:-0.3em; margin-left:-0.85em;}
#slider .ui-slider-handle.ui-state-active {background:#26B8F8;}
#slider .ui-widget-header {background:none;}


/*#slider .ui-slider-handle::before {background:#26b8f8; border-radius:50%; content:""; display:inline-block; height:50px; left:-12px; position:absolute; top:-12px; transition:all 0.3s ease 0s; width:50px; z-index:-1;}*/

.power-menu {}
.power-menu ul {}
.power-menu ul li {}



 /* Remove margins and padding from the list, and add a black background color */
.power-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFF;
}


/* Style the links inside the list items */
.power-menu ul li {
    display: inline-block;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    width:85%;
}

/* Change background color of links on hover */
.power-menu ul li:hover, .power-menu ul li.active:hover { cursor:pointer;}

.power-menu ul li:not(.active) {display:none; width:100%;}
.power-menu ul li.icon {float:right; display:inline-block; width:15%;}


.power-menu.responsive ul {position: relative;}
.power-menu.responsive ul li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
.power-menu.responsive ul li {
    display: block;
    text-align: left;
  }



@media(max-width: 992px) {

    .progwrap {margin:0 0 40px;}
    .progcontent {padding:0 0 10px;}
    .progcontent-col.__border {border:none;}
    .progbutton {width:40%; outline:0 !important;}

    .mobile-timeframes {position:absolute; top:35px; left:50%; margin-left:-75px; text-align:center; display:block; width:150px; height:30px;}
    .mobile-timeframes p {float:left; display:block; color:#FFF; font-size:1.4em; width:150px; height:30px;}

}

.smallprint{
    min-height:150px;
}
.smallprint p{
    clear:both;
    margin-top:30px;
    color:#FFF;
    font-size:0.7em;
    word-wrap:break-word;
}
