@charset "UTF-8";

html, body     {
	margin-left: 0;
	padding: 0;
	font-family: Arial, 'sans-serif';
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
}
canvas {
	position: relative;
	float: left;
}


input[type=range] {
	/*width: 100%;*/
	margin:0;
	background-color: transparent;
	-webkit-appearance: none;
  }
  input[type=range]:focus {
	outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
	/*background: #666666;*/
	border: 0;
	width: 100%;
	height: 25px;
	cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
	  margin-top: -5px;
	width: 25px;
	height: 25px;
	background: #ec982f;
	border: 0;
	border-radius: 15px;
	cursor: pointer;
	-webkit-appearance: none;
  }
  /*input[type=range]:focus::-webkit-slider-runnable-track {
	background: #999999;
  }*/
  input[type=range]::-moz-range-track {
	border: 0;
	width: 100%;
	height: 25px;
	cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
	width: 25px;
	height: 25px;
	background: #ec982f;
	border: 0;
	border-radius: 15px;
	cursor: pointer;
	-webkit-appearance: none;
  }
  input[type=range]::-ms-track {
	border: 0;
	width: 100%;
	height: 15px;
	cursor: pointer;

  }
  input[type=range]::-ms-fill-lower {
	border: 0;
  }
  input[type=range]::-ms-fill-upper {
	border: 0;
  }
  input[type=range]::-ms-thumb {
	  margin-top:-5px ;
	width: 20px;
	height: 20px;
	background: #ec982f;
	border: 0;
	border-radius: 15px;
	cursor: pointer;
	/*Needed to keep the Edge thumb centred*/
  }
  input[type=range]:focus::-ms-fill-lower {
	background:none;
  }
  input[type=range]:focus::-ms-fill-upper {
	background:none;
  }
  /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
  how to remove the virtical space around the range input in IE*/
  @supports (-ms-ime-align:auto) {
	/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
	input[type=range] {
	  margin: 0;
	  /*Edge starts the margin from the thumb, not the track as other browsers do*/
	}
  }
  



@media (min-width:700px){
	#bg{
		position: absolute;
		width: 700px;
		/*height: 450px;*/
	}

	#bg img{
		position: absolute;
		width: 100%;
		height:auto;
	}

	.beyond_canvas{
		width: 700px;
		overflow: hidden;
	}
	.beyond_canvas_text{
		position: relative;
    	float: left;
   	 	display: block;
		width: 100%;
		margin-left: 10px;
	}
}

@media (max-width:700px){
	#bg{
		position: absolute;
		width: 100%;
		height: auto;
	}

	#bg img{
		position: absolute;
		width: 100%;
		height:auto;
	}
	.beyond_canvas{
		width: 100%;
		overflow: hidden;
		float: left;
	}
	.beyond_canvas_text{
		width: 100%;
		position: relative;
		float: left;
		overflow: hidden;

		font-size: 12px;
	}
}