.taketest{
	padding: 20px;
    border: 1px solid #f0f0f0;
    margin-bottom: 60px; 
    background: #fff;
}
.taketest p{font:20px/28px "nexa-unilever", arial; color:#074c31; margin:0 0 30px;}
.taketest .btn{ float:right; clear:both;}
.taketest:after{content:''; clear:both; height:0; line-height:0; display:block;}
.top-process-bar {
    padding: 20px;
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
    background: #fff;
}
.top-process-bar h2 {
    font: 24px "nexa-unilever", arial;
    color: #074c31;
    margin: 20px 0 0 0px;
}
.process-bar .step {
    width: 50px;
    float: left
}
.process-bar .step {
	margin-left: -webkit-calc(26.33% - 50px);
    margin-left: -moz-calc(26.33% - 50px);
    margin-left:Calc(26.33% - 50px);
}
.process-bar .step:before {
    height: 2px;
    background: #cee2b5;
    content: '';
    margin-left: 34px;
	width: -webkit-calc(32.33% - 57px);
    width: -moz-calc(32.33% - 57px);
    width: Calc(32.33% - 57px);
    position: absolute;
    top: 94px; z-index:0;
}
.process-bar .step:first-child {
    margin-left: 0
}
.process-bar .step:last-child:before {
    display:none
}

.process-bar .step .dot {
    width: 26px;
    height: 22px;
    margin: 0 auto;
    background: url(../images/sprite.png) no-repeat 2px -121px; 
}
.process-bar .step .person + .dot,
.process-bar .step.active + .step .dot {
    background-position: -32px -123px;
}
.process-bar .step.active:before {
    background-color: #074c31
}
.process-bar .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    background: url(../images/sprite.png) no-repeat 5px -110px;
}
.process-bar .step .icon {
    background-position: 5px -65px;
}
.process-bar .step .icon.person {
    background-position: 5px -65px;
}
.process-bar .icon.scale {
    background-position: -45px -4px;
}
.process-bar .icon.stethoscope {
    background-position: 5px -5px; 
}
.process-bar .icon.heart {
    background-position:-164px -6px;
    position: relative;
    float: none;
}

.process-bar .step.active + .step .icon.scale {
    background-position: -42px -66px;
}
.process-bar .step.active + .step .icon.stethoscope {
    background-position:-103px -66px;
}
.process-bar .step.active + .step .icon.heart {
    background-position: -165px -66px;
}
.box {
    padding: 20px;
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
    background: #fff;
}
.box label {
    font: 20px "nexa-unilever", arial;
    color: #074c31;
}
.box .input {
    background: #f0f0f0;
    height: 48px;
    padding: 10px 15px;
    font: 20px/28px "nexa-unilever", arial;
    box-shadow: 1px 1px 1px #c0c0c0 inset; 
    display: block;
}
.form-elements {
    margin-bottom: 30px
}
.form-elements input[type="radio"] {
    opacity: 0;
	filter: alpha(opacity=0);
    position: absolute;
    left: -99999px;
}
.form-elements input[type="radio"] + label {
    height: 50px;
    margin-right: 10px;
    width: 100px;
    display: block;
    float: left;
    background: #ebebeb;
    text-align: center;
    cursor: pointer;
    font: 20px/50px "nexa-unilever", arial;
}
.form-elements input[type="radio"]:checked + label {
    background: #83b93c;
    color: #fff
}
.form-elements .selectdiv {
    min-width: 270px;
}
#bws-main .steps .form-elements .selectdiv .selectboxdiv {
    padding:10px  ; background-image:url(../images/rectangle2.png); color:#074c31; font:16px/30px "nexa-unilever", arial; height:50px;
}
#bws-main .steps  .cholesterolunit.form-elements .selectdiv{min-width:128px; display:inline-block; vertical-align:middle; margin-left:10px;}
#bws-main .steps  .cholesterolunit.form-elements .input{width:80px; float:left}
.error{clear:left;}
.form-elements select {
    width: 100%;
    font: 16px/50px "nexa-unilever", arial;
    color: #074c31;
}
.form-elements.height-unit, .form-elements.weight-unit {
    margin-bottom: 0;
    float: none;
}
.form-elements.height-unit .selectdiv, .form-elements.weight-unit .selectdiv {
    display: inline-block;
    min-width: 100px;
    height: 50px;
    vertical-align: top;
}
.form-elements.height-unit .input, .form-elements.weight-unit .input {
    width: 55px;  
    margin-right: 10px;
    float: left;
}
.example {
    display: block;
    color: #83b93c;
    font: 16px/22px "nexa-unilever", arial;
}
.help-text {
    clear: both;
    background: #f0f0f0;
    padding: 20px 28px;
    margin-bottom: 30px;
    font: 16px "nexa-unilever", arial;
    color: #074c31;
}
.help-text small {
    font-size: 13px;
    display: block;
}
.chart {
    background: url(../images/chart.png) no-repeat left bottom;
    width: 240px;
    height:350px;
    position: relative;
    margin: 0 auto 30px;
}
.elevated-cholesterol{margin: 0 auto 30px;}
.chart{  font:700 41px/43px "nexa-unilever", arial; text-align:center}
.chart span{font:400 20px/22px "nexa-unilever", arial; display:block; margin-bottom:12px;}
.chart .col1 {
    width: 68px; 
    position: absolute;
    right: 0;
    bottom: 0;
}
.chart .col2 {
    width: 68px;
    position: absolute;
    right:70px;
    bottom: 0;
}
.chart .static { background: url(../images/chartstrip.png) repeat-y left top ;
    width:100%; height:80px;}  
.chart .static .col1, .chart .static .col2{ top:6px; font-size:26px; line-height:30px; text-align:center; height:auto; font-weight:400;color:#074c31}

.chart .col2 .levels {
    height: 100px;
    background: #7eb559;
}
.chart .col1 .levels {
    height: 100px;
    background: #f48e31;
}

.key-cholesterol-numbers img { margin: 0 auto 30px;}

.average-prevalence .custom-tabs ul li {padding:0;}
.tab-pane h3{color:#074c31;font-size:20px;}
.steps .btn-group {width: 100%; margin-top:20px; }
.steps .btn-group .prevbtn, .steps .btn-group .nextbtn {   
    color: #fefefe;
    font: 20px/22px "nexa-unilever", arial; 
    padding: 9px 33px;
    float: left;
    border: 0; cursor:pointer;
}
.steps .btn-group .nextbtn,#bws-main .steps #stepThree .btn-group .nextbtn {float: right; margin-right:20px; padding:9px 20px ;font: 20px/22px "nexa-unilever", arial;}
.elevated-cholesterol img{margin-top:0px;float: right;margin-right: 13px;}
.step-two, .step-three, #fatherAgeAtProblem, #motherAgeAtProblem, #parentsHelpText, #father-status, #mother-status, #knowLevelsHelp, #toldHighCholesterol, #hastoldBP,  #sbp, #TotalCholesterol, #totalHDL, #knowBpHelptext, #knowlevelsHelp, .gender-text-male, .gender-text-female, .gender-text, .medical-contitions,.top-process-bar , .step-one,#knowbpHelp ,.pdf-heading{display: none;}
#knowbpHelp .help-text{margin:30px 0 10px;width:100%;}
div.error div.has-error, div.error label.error { font-size: 13px;color: #ff0000;}
.email-options .box{width: 100%;padding: 20px 170px;}
.email-options .btn-small{padding:10px 15px !important;margin-bottom:0 !important;min-width: 90px !important;}
.steps {margin-bottom: 50px;}
.no-margin-bottom {margin-bottom: 0}
.gender-text .help-text, .smoked-options, #sbp .help-text, #medical-contitions .help-text, .medical-contitions .help-text { margin: 22px 0 0;}
.smoked-options .form-elements {margin-bottom: 0}
.box1 .btn{background:#64a70b; color:#fff;padding: 10px 33px; font:700 20px/20px "nexa-unilever", arial; margin:0 0 10px 0; border-radius:0; min-width:198px; text-align:center}
.box1 {padding-bottom:10px;}
.box h2{color:#074c31; font:30px/34px  "nexa-unilever", arial; margin:0 0 25px;}
.box p{color:#074c31; font:16px/26px  "nexa-unilever", arial; margin-bottom:30px; }
.steps .btn-group .nextbtn, #bws-main .steps #stepThree .btn-group .nextbtn,
.linkx{ background:url(../images/input-btn.png) no-repeat right top #64a70b; display:inline-block; padding:9px 30px 9px 20px !important; color:#fff;position:relative;font:700 18px/20px  "nexa-unilever", arial; border:0}
.prevbtn {background:url(../images/input-btn-prev.png) no-repeat left top #64a70b; padding-left:30px !important; padding-right: 20px !important;}	
.linkx:hover{color:#fff; text-decoration:none; }
 #bws-main .steps #stepThree .btn-group .nextbtn:after {content:none;}
.steps .btn-group .prevbtn{ margin-left:20px;padding-left:10px;padding-right:10px;}
.steps .btn-group .prevbtn:after{left:-19px; border-right:20px solid #64a70b; border-left:0;}
.custom-tabs ul li{ width:100%;border:0; border-radius:0; padding:0 1px; margin:0}
.custom-tabs span{ display:block; padding:10px 20px;height:40px; font:22px/22px "nexa-unilever", arial; background:url(../images/rectangle.png) no-repeat right top; box-shadow:-1px 2px 2px #ebebeb; margin:0 0 30px;} 
.custom-tabs ul li a{ display:block;border:0; border-radius:0; background:#d8e9c2; color:#688a3d; text-align:center; font:24px/30px "nexa-unilever", arial; padding:15px 10px; margin:0; border-top:1px solid #bdd79c; } 
.custom-tabs ul li.active a,.custom-tabs ul li a:hover,.custom-tabs ul li a:focus,.custom-tabs ul li.active a:hover,.custom-tabs ul li.active a:focus{background:#64a70b; color:#fff; border:0;border-top:1px solid #bdd79c;position:relative} 
.preloader{min-height:100px;}
.custom-tabs{position:relative}
.custom-tabs .nav-tabs{position:absolute; top:40px; display:none; width:100%}
.box 	.form-elements.genders{ float:left; margin:0}
.box 	.form-elements.genders input[type="radio"] + label{margin:30px 10px 10px 0}
.steps.results .box 	.form-elements.genders input[type="radio"] + label{margin:30px 40px 10px 0}
.taketest .linkx{ float:right; margin-right:20px; margin-bottom:20px;}
.steps.results .elevated-cholesterol ~ div .linkx {float: left;clear: both;}
#knowbpHelp,.gender-text .help-text,  #sbp .help-text, .medical-contitions .help-text, .help-text {margin-left:-35px;	width:106%;}
.medical-contitions .help-text, .help-text{margin-left:-27px;}
.chart .green{background:#7eb559 !important;}
.chart .green-low{background:#7eb559 !important;}
.chart .amber{background:#f48e31 !important;}
.chart .red{background:#ff0000 !important;}
.email-red {color:#ff0000;}
.email-green{color:#7eb559;}
.dot-height-feet{font:16px/52px "nexa-unilever", arial;display:none;float:left;margin-left: -8px;margin-right: 2px;}
.results .errorMsg {color:#ff0000;font-size:13px; text-align:center;min-height:250px;margin-top:5%;}
.addOpacity {opacity: 0.1;cursor: default !important;filter: alpha(opacity=40);}

#formsendemail, #formpdfdownload {display:inline-block;}
#formpdfdownload button{margin-left:0;}
.btn-small{padding: 6px 14px;margin-bottom: 0;}
#email-wrapper {display:inline-block;}
#email-wrapper button{margin-left:30px}
#sendemail{margin-bottom: 10px;}
#email-result, div.error div.has-error{margin:5px;}
#bws-main select::-ms-expand {display: none;}
#bws-main .input#heightinch{ float:none; display:inline-block}
.tab-content > #national{text-align:center;background: #EDF7E3;}
.tab-content > #national .img-responsive {display:inline-block;}
.tab-content > #national .form-elements.genders{max-width: 100%;display: block; width: 100%;text-align: left;}
.steps.results .box1 #sendEmail{margin-left: 20px;}
.bws-carousel-full-width, .taketest{display:none;}
#sendemail_validate {text-align:left;}

/****** banner CSS *****/
.bws-carousel-full-width .container .heartage .bws-carousel-caption .bws-caption {z-index:99;left: 3%; margin-top: 2%;}
.bws-carousel-full-width .container .heartage .bws-carousel-caption .bws-caption p {display:none;}

@media (max-width:767px) {
	.bws-carousel-full-width .container .heartage .bws-carousel-caption .bws-caption {left: 6%;  margin-top: 3%;width: 90%;}
	.bws-carousel-full-width .container .heartage .bws-carousel-caption .bws-caption h1{font:44px/48px nexa-unilever,arial;}
	.linkx.mobile-big:after{border-bottom-width:30px;border-top-width:30px;}
	.taketest .linkx{float:left;} 
	#knowbpHelp,.gender-text .help-text,  #sbp .help-text, .medical-contitions .help-text, .help-text{margin-left:0; width:100%;}
	.steps.results .box {position:relative;}
	.steps.results .box .right{text-align: center; width: 100%;}
	.steps.results .box .right img{float:none; margin: 0 auto;}
	
	.elevated-cholesterol img{margin-top:0;}
	.steps.results .box.discover-why  +  .right{position: relative;top:auto;}
	.steps.results .box.discover-why  +  h2+p{margin-top: auto;}
	
	.steps.results .box .form-elements.genders input[type="radio"] + label{margin: 30px 20px 10px 0;}
	
	.box1 .btn {padding: 10px 18px; min-width: 175px;}
	#bws-main .box input,#bws-main .box select {font-size: 16px;}
	#sendemail{display:inline;}
	.email-options .box{padding:20px 20px;}
	.steps.results .box .form-elements.genders{width:100%; text-align:center}
	.steps.results .box .form-elements.genders input[type="radio"] + label{margin:30px 10px 10px; display:inline-block; float:none;}
	.steps.results {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		/* optional */
		-webkit-box-align: start;
		-moz-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
	}
	.steps.results .firstSection{
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
		margin-top: 25px;
		text-align:center;
	}
	.chart{font-size:27px; line-height:21px; height:320px;}
	.steps.results .box{width:100%;}
	.steps.results .box1 .btn {min-width:225px;}
	.steps.results .box1 #sendEmail{margin-left: 10px;}
	.chart .static .col1, .chart .static .col2{font-size:18px; line-height:22px;}
}

@media (min-width: 320px) and (max-width: 479px) {
	.steps.results .elevated-cholesterol ~ div .linkx{padding: 5px 30px 4px 20px !important;}
	.steps.results .clearfix a.linkx{background-size:contain;line-height:17px;}
	.steps.results .box.clearfix .right{ top: 130px;}
	.steps.results .box.clearfix .right.elevated-cholesterol{ top: 120px;}
	.steps.results .box1{text-align:center;}
	.box1 .btn {padding: 10px 33px;}
	.box input, .box select {font-size: 16px;}
	#sendemail{width: 100%;}
	.email-options .box{padding:20px 20px;}
	.bws-carousel-full-width .container .heartage .bws-carousel-caption .bws-caption {left: 6%;  margin-top: 1%;width: 90%;}
	.bws-carousel-full-width .container .heartage .bws-carousel-caption .bws-caption h1{font:26px/28px nexa-unilever,arial;}
}

@media (min-width:768px) {
	.box1 .btn{ margin-right: 25px;min-width:0}	
	.box1 .btn:first-child{margin-left:0}
	.steps .btn-group .prevbtn,.steps .btn-group .nextbtn{padding-left:20px; padding-right:20px;}
	.process-bar .step:before{top:104px; width: -webkit-calc(27.33% - 57px); width: -moz-calc(27.33% - 57px);width:Calc(27.33% - 57px)}
    .top-process-bar {padding: 30px 50px; }
	#knowbpHelp, .gender-text .help-text, #sbp .help-text, .medical-contitions .help-text, .help-text {margin-left:0; width:100%;}
	.taketest{padding: 30px 50px;}
    .box ,.box1 {
        padding: 22px 30px; 
    }
	.results .box1{padding:0 30px 10px}
    .box .left-box {
        float: left;
    }
    .form-elements {
        float: right;
        max-width: 280px;
    }
    .left-box {
		width: -webkit-calc(100% - 280px);
		width: -moz-calc(100% - 280px);
        width: Calc( 100% - 280px);
    }
    .age .left-box {
        width: auto;
		min-width: 150px;
    }
	.left-box label{
		margin-top: 10px;
	}
    .width-50 .left-box {
        float: none;
        width: auto;
    }
    .form-elements input[type="radio"] + label {
        margin-left: 40px;
        margin-right: 0;
    }
	.key-cholesterol-numbers img {
        margin: 0 auto 30px;
        display: inline-block;
        vertical-align: top;
    }
    .key-cholesterol-numbers img + img {
        margin-left: 55px
    }
    .box .input {
        display: inline-block;
    }
    .box .input#age {
        margin-left: 122px
    }
	.top-process-bar h2{font-size:32px; margin-left:10px;}
	.results .box .left {
		float: left;
		width: -webkit-calc(100% - 340px);
		width: -moz-calc(100% - 340px);
		width: Calc(100% - 340px);
	}
	.results .box .right {
		float: right;
		width: 300px;
	}
	.chart {
	  
		width: 270px;
	  
	}
	.chart .col1 {
		width: 100px;
	   
		right: 0;

	}
	.chart .col2 {
		width: 100px;
		right: 102px;
	}
	.custom-tabs .nav-tabs{position:inherit;  display:block;}
	.custom-tabs > span{ display:none;}
	.average-prevalence .custom-tabs  li{ width:50%}
	.discover-why .custom-tabs  li{ width:33.333%}
	.custom-tabs{position:inherit}
	.discover-why .tab-content{ padding:25px 70px;}
	.custom-tabs ul li a{border-top:1px solid transparent}
	.custom-tabs ul li.active:after{ border-top:15px solid #64a70b; border-left:20px solid transparent;border-right:20px solid transparent; content:''; display:block; width:0; height:0; left:50%; margin-left:-20px; bottom:-14px;position:absolute} 
	.steps.results div.clearfix .linkx {float: left;clear: both;}
} 
@media (min-width:1025px) {
	#knowbpHelp, .gender-text .help-text, #sbp .help-text, .medical-contitions .help-text, .help-text {margin-left:-35px; width:106%;}	
	
	.top-process-bar {padding: 30px 100px; }
	.process-bar .step:before{top:104px;width: -webkit-calc(28.33% - 57px);width: -moz-calc(28.33% - 57px);width:Calc(28.33% - 57px);}
}	
@media (min-width: 768px) and (max-width: 992px) {
	.steps .btn-group .nextbtn, #bws-main .steps #stepThree .btn-group .nextbtn, .linkx {    opacity: 0.9; position: relative;  padding-bottom: 8px !important;}
	.email-options .box{    padding: 20px 80px;}
	.steps.results div.clearfix .linkx{background-size:contain;}
	.bws-carousel-full-width .container .heartage .bws-carousel-caption .bws-caption h1{font:42px/44px nexa-unilever,arial;}
}
@media (min-width:992px) {
	.process-bar .step:before{top:104px; width: -webkit-calc(128.33% - 45px);width: -moz-calc(28.33% - 45px);width:Calc(28.33% - 45px);}
	.process-bar .step{margin-left: -webkit-calc(31.33% - 50px);margin-left: -moz-calc(31.33% - 50px);margin-left:Calc(31.33% - 50px);}
	.taketest{padding: 30px 100px;}
    .top-process-bar {
        padding: 30px 80px;
    }
    .box,.box1  {
        padding:40px 90px; 
    }
    .form-elements.height-unit, .form-elements.weight-unit {
        float: right;
    }
    .width-50 .left-box {
        width: auto; float:left;
    }
    .width-50 .form-elements {
        width: auto
    }

	.results .box1{padding:10px 100px 20px}

    #pdf-page-break {
        display:none;
    }
}