/* iframe css */
body, html {
	background-color: 			transparent;
	margin: 					0 0 0 0;
	padding:					0 0 0 0;
}

iframe {
	height: 					100%;
	overflow: 					auto;
	width: 						100%; 
	frameborder: 				no;
	border: 					0;
	framespacing: 				0; 
	/*-webkit-overflow-scrolling: touch; */
	background:					url(https://limetimeapps.co.uk/appfiles/f1web/images/f1_back_plain.png) no-repeat center center;
	-webkit-background-size: 	cover;
	-moz-background-size: 		cover;
	-o-background-size: 		cover;
	background-size: 			cover;
}

div.ifrm1 {
	position:					fixed; /* banner locked, doesn't move */
	min-height:					150px;
	height: 					175px; /* cannot use 100% with mobile */
	width: 						100%;
	background-color: 			silver; /* base colour just in case */
	background-image: 			url("../img/banner.png"); /* The default background image to use */
	background-repeat: 			no-repeat;
    background-position: 		center; /* Center and scale the image nicely */
    background-size: 			cover;
	z-index: 					1; 		/* make banner stay in front of below scrolled frame */
}

div.ifrm2 {
	overflow:					hidden;
	height:						100%; 				/* height of frame not working on chrome */
	position: 					relative;
	padding: 					175px 0 0 0; 		/* position frame below the banner */
	margin: 					0 0 0 0;
	background:         url(https://limetimeapps.co.uk/appfiles/f1web/css/f1_back_plain.png) no-repeat center center width:100%; /* needed for android only, ios works without */
}

div.ifrm3 {
	overflow:					hidden;
	height:						100%; 				/* height of frame not working on chrome */
	position: 					relative;
	padding: 					175px 0 0 0; 		/* position frame below the banner */
	margin: 					0 0 0 0;
	background:         url(https://limetimeapps.co.uk/appfiles/f1web/css/f1_back_plain.png) no-repeat center center width:100%; /* needed for android only, ios works without */
}

/* compensation for smaller screens (iPhone 5S */
@media only screen and (max-device-width: 380px) {
  div.ifrm1 {
	/*-webkit-overflow-scrolling: touch !important; */
	/*overflow: 					scroll !important; */
	min-height:					75px;
	height: 					80px !important; 	/* make smaller banner with mobile */
  }

  div.ifrm2 {
	/*-webkit-overflow-scrolling:	touch !important; */
    overflow: 					hidden;
	overflow: 					scroll;
	width: 						100% !important;
	height: 					300% !important;  	/* allows long pages to scroll further */
	position: 					relative;
	padding: 					80px 0 0 0; 		/* position top of frame below the banner */
	
	/*position: fixed; */
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
    div.ifrm3 {
	/*-webkit-overflow-scrolling:	touch !important; */
    overflow: 					hidden;
	overflow: 					scroll;
	width: 						100% !important;
	height: 					300% !important;  	/* allows long pages to scroll further */
	position: 					relative;
	padding: 					80px 0 0 0; 		/* position top of frame below the banner */
	
	/*position: fixed; */
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}