section{
    font-family: "Open Sans"; 
	width:647px;
	height:660px;
	background: url(https://www.heartonline.org.au/images/heart/calculators/THR_Calc/bg.jpg) no-repeat 0 0;
	background-size: 100% 100%;
}

.short-line{
	width:130px;
	height:4px;
	background-color: #fb0e1d;
	margin:20px 0;
}

.first_ul{
	list-style-image:url(https://www.heartonline.org.au/images/heart/calculators/THR_Calc/red_heart.svg);
	margin-left:30px;
}

.first_ul li{
	margin-left:22px;
}

.second_ul{
	list-style:none;
}

.second_ul span{
	color:#fb0e1d;
	font-weight:bold;
}

.introduction{
	width: 100%;
	margin-bottom:30px
}

.tip{
  width: 100%;
  overflow: hidden;
  border-top: solid 2px #fb0e1d;
  border-bottom: solid 2px #fb0e1d;
  padding-top: 20px;
  margin-bottom: 20px;
}

.tip_line{
	height:1px;
	background-color:#fb0e1d;
	margin-top:30px;
	margin-bottom:30px;
}

.tip_left{
   float:left;
   width:30px;
   padding-top:7px;
}
.tip_left>img{width:100%;}

.tip_right{
   float:right;
   max-width: 600px;
}
.heading {
    margin-left:34px;
	padding-top:30px;
	padding-bottom: 10px;
	text-transform: uppercase;
	font-weight: bold;
	color: #fb0e1d;
	font-size: 14px;
}
.heading>h4{margin-left:0;}
.details-wrapper
{
	margin-left: 34px;
	margin-top: -20px;
}


.details-wrapper img{
	vertical-align: -10px;
}

.details-wrapper p{
	text-transform: uppercase;
	font-weight: bold;
	font-size:12px;
	margin: 0px;
	line-height: 1;
	color: #242424;
}

.details-wrapper input{
	color: #fb0e1d;
	font-weight: bold;
	padding-left:10px;
}

input,select{
	height:40px;
	border: 1px solid #c8c8c8;
}

select{
	background: #ffffff url(https://www.heartonline.org.au/images/heart/calculators/THR_Calc/dropdown.svg) no-repeat right; 
	border:0px;
   
	-webkit-appearance: none;
	-moz-appearance: none;
   
	cursor: pointer;
	color:#5e5e5e;
	padding-left: 5px;
}


div.step{
    margin-bottom:20px;
	position: relative;
}
div.step img, div.step p, div.step input{
	display:inline-block;
	margin-right:8px;
}

div.step p.or{color:#fb0e1d;}
div.first-step{margin-top:20px;}

.details-value-first{
	width:66px;
}

.details-value-second{
	width:102px;
}

.details-value-three{
	width:144px;
}

#first_text{
	width:150px;
}
#second_text{
	width:160px;
	padding: 0;
}

.red-line{
	height : 1px;
	background-color:#fb0e1d;
	margin-left:34px;
	margin-right:34px;
	margin-top:15px;
}

.exercise-intensity{
	width: 90%;
	margin-left: 34px;
}

.exercise-intensity td{
	height:40px;
	padding-left: 12px;
	padding-right: 10px;
	font-size:12px;
	vertical-align: middle;
}

.header,.footer{
  background-color: #fb0e1d;
  color:#ffffff;
}
.footer td{
	height:30px;
	color: #ffffff;
}
.header th{
	height:50px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	text-transform: uppercase;
	font-size:12px;
}

.intensity, .hrr, .hrr-max, .rpe{
 	text-align: left;
}

.hrr, .hrr-max, .rpe{
 	color:#5e5e5e;
}

.calculated-range{
	text-align: right;
	width: 50px;
	color: #fb0e1d;
	font-weight: bold;
}

#light, #hard{
	background-color:#ffffff;
}

.intensity{
	font-weight: bold;
}

@media screen and (min-width: 1025px){
	.introduction{max-width: 647px;}
}

@media screen and (min-width: 640px) and (max-width: 1024px){
	.tip,section{width:580px;margin-left:30px;}
	.tip_right{max-width:540px}
	.tip_right p{margin-left:0;}
	div.step p.mhr_text{ width:160px; position: relative; top:6px;}
}

@media screen and (max-width: 639px){
	section{width:100%; height:760px}
	.tip{margin:0 5%;width:90%;}
	.tip_left{width:5%;}
	.tip_right{width:95%;}
	.tip_right p{margin-right:0;margin-left:20px;}
	
	div.step p.or{
		display: block;
		margin: 10px 40px;
	}
	div.step p.mhr_text{ width:160px; position: relative; top:6px; margin-left:40px;}
	
	div.third-step  p{max-width:115px; position: relative; top:11px; margin-right:0;}
	.details-value-second {width: 66px; float:right;}
	
	.details-value-three {width: 104px; 
		position: absolute;
		right: 9px;
		top: 5px;}
	.thr-wrapper{width:100%; overflow:auto;}
	.exercise-intensity{width:580px;margin:0;}
	.exercise-intensity td {width:100px;}
	
	.details-wrapper input{position: absolute; right: 0px;}
	
	.red-line{margin-right:11px;}
}