/* universal information */
/* ver:0.9.5 */
* {margin:0;padding:0;font-family:"Comic Sans", Helvetica, sans-serif}


	@keyframes ban{
	0% {left:0%;}
	28% {left:0%;}
	33% {left:-100%;}
	61% {left:-100%;}
	66% {left:-200%;}
	95% {left:-200%;}
	100% {left:-300%;}

}
	@keyframes note{
	0% {left:100%}
	100% {left:-160%}

}






/*footer*/
	footer h5 {text-align:center;color:#cccccc;font-size:20px;text-decoration:underline}
	footer p {text-align:center;color:#cccccc;font-size:15px}
	footer{padding:20px;clear:both;height:200px;background-color:rgba(59,56,56,1);margin-top:30px;}
	
	
/*links to socials*/
	#links{width:300px;margin:auto}
	#face, #twit, #insta, #stra{width:20%;float:left;margin:2.5%}
	#face:hover{background-color:#4267B2}
	#twit:hover {background-color:#1DA1F2}
	#insta:hover{background-color:#833AB4}
	#stra:hover{background-color:#fc4c02}
	#faceI, #twitI, #instaI, #straI{width:100%}
	
	

/*text formatting*/
	
	h1{color:#FF661E;font-size:55px;padding:28px 0;margin-left:35%}
	h2{font-size:30px;text-align:center;text-decoration:underline}
	h3{color:#FF661E;font-size:25px;text-align:center;text-decoration:underline}
	h4{text-align:center;font-size:20px}
	.HM h4 ,.tenK h4 ,.fiveK h4 ,.oneK h4{text-decoration:underline;font-size:25px;color:#FF661E}


/* map objects */

	.mapi{width:100%;height:450px;border:0;padding-left:0%}
	
	



/* Navigation List Properties */
	a:hover{color:blue}
	.mDiv a:hover{color:rgba(255,153,0,1)}
	nav{height:70px;width:100%;background-color:rgb(255,153,0);z-index:100}
	nav ul {list-style-type:none}
	a {color:black}
	nav ul li a{display:block;padding:10px;text-decoration:none;transition:background-color 0.5s, color 0.5s,display 2s}
	nav ul li a:hover {background-color:#FF661E; color:white;}


	.bannerH{overflow:hidden}
	



/* for a scroll in the centre of page*/
	.scrolling{height:400px;text-align:center;display:block;overflow:auto;margin:auto;width:923px}
	.scroltxt{background-color:rgba(56,56,56,0.85);color:rgba(255,255,255,0.8);height:initial;margin-top:10px;margin-bottom:30px}
	
/*sticky*/
	.sticky{position:fixed;top:0;width:100%}
	.sticky + .content {padding-top:60px}


	


/*table of results*/
.rTable{ min-height:1100px}
	.rTable table{width:100%;text-align:left;border:1px solid black;}
	.rTable table ,.rTable th,.rTable td {border:1px solid black; border-collapse:collapse;padding:15px;font-size:18px}
	
	.resOP {height:35px;width:150px;font-size:20px;text-align:center;background-color:rgb(255,153,0);color:black;transition:background-color 0.25s, color 0.25s;border-width:0px;margin-top:20px}
	.resOP:hover{background-color:#FF661E; color:white;}
	
	.res{display:inline}
	.resDiv{width:100%;padding-top:30px;text-align:center}
	
	tr:nth-child(even) {
	background-color: rgba(255,153,0,0.2);
	}
	.arc{font-size:20px;text-align:center;width:100%;display:block}
	tr:hover {background-color: rgba(255,153,0,0.4)}
	
/*notice*/
		.noticeblock{z-index:101;width:100%;margin:auto;padding-top:2px;padding-bottom:2px;
		background-color:#FF661E;overflow:hidden;
		
		}

		#noticemoving{position:relative;min-width:150%;
			animation-name:note;
			animation-duration: 90s;
			animation-timing-function:linear;
		animation-iteration-count:infinite;}

	.noticeblock h3{color:rgb(255,244,229);font-size:20px;display:inline;padding-top:0px}



/*portrait iphone*/
@media (min-width:100px) and (max-width:950px)
{
	
	main{width:90%;margin:auto}
	/*hide title*/
		header{display:none}
		
	/*nav bar*/
		nav ul li{display:none;width:100%;float:left;border-bottom-style:solid;border-bottom-width:2px; background-color:rgb(255, 153, 0);border-color:rgba(80,60,40,0.8);height:43px;text-align:center;font-size:20px}
		#home{border-top-width:2px;border-top-style:solid;}
		
		
		
	/*training page*/
		#mon,#wed{display:none;height:initial;padding:40px}
		.mobH{display:block;color:rgba(255,153,0,1);border-width:2px}
		.mobH:hover{text-decoration:underline}
		.coach{width:80%}
		/*past training stuff*/
			.scrolling{width:100%}
			.scroltxt{width:80%;margin-left:5%;padding:5%;padding-top:0px}
		
		
	/* Show mobile title*/
		#spec {display:block;float:left;width:15%;clear:none;height:87px;border-bottom-width:0px;text-align:left;font-size:25px;text-align:center}
		#spec:hover  {background-color:#FF661E; color:white;}	
		#specChar{height:35px;width:22px;margin:auto;margin-top:26px;margin-bottom:26px}
					
		.title{display:block;float:left;clear:none;width:85%;height:87px;border-bottom-width:0px}
		
	/*adjust main areas*/
		nav {height:110px;width:100%;background-color:rgb(255, 153, 0);position:fixed;z-index:100}
		.logo{float:right;width:87px;height:87px;margin:auto}
		.main{width:100%;margin:0px}
		
		@keyframes note{
	0% {left:100%}
	100% {left:-310%}

}
		#noticemoving{width:300%;animation-duration: 60s}
		.noticeblock h3{font-size:15px}

	/*the banner image*/
		#banner{position:relative;margin-top:120px;display:block;
		animation-name: ban;
		animation-duration: 30s;
		animation-iteration-count:infinite;}
		#banI{width:400%}
		
	/*event banner*/
		#coll{margin:0px;width:100%;padding-top:120px}
		#colli{width:100%;margin-left:0%;margin-top:0px}

	/*sticky*/
		.sticky{width:100%}
		
		
	/*event page */
		.HM, .tenK, .fiveK, .oneK{margin-bottom:100px}
		.HM ul, .tenK ul,.fiveK ul, .oneK ul{list-style-type:none}
		#sponsor{width:100%}
		
	/* text */
		h1{margin:0px;color:black;padding:32px 0;display:inline-block;font-size:20px}
		h3{padding-top:20px;font-size:17px}
		.intro h3 {padding-top:10px}
		.mDiv p,.mDiv h3,.intro p{clear:both;text-align:center}
		p{font-size:15px}
		h4{font-size:17px}
		.HM h4 ,.tenK h4 ,.fiveK h4 ,.oneK h4{font-size:17px}

				
	/*adjust map spacing*/
		.map{margin-top:50px}
		
	/* feedback and meet us stuff*/
		#feed{padding:10px}
		#typ{width:50%}
		.imgUs{width:100%;clear:none}
		#feed{text-align:center}

		

	/*sections adjusted*/
		body{background-color:rgba(255,153,0,0.3)}
		.facebook{display:block;overflow:auto;width:100%;margin:auto}
	
	
	/*section altering*/
		.intro{height:initial;margin-top:25px}
		.mDiv{height:initial;margin-top:50px}
	
	
	/*side by side text*/
		.leftText,.rightText{width:100%;height:inital}
		.rightText{padding-bottom:40px}
	
	
	
	
	
	/*footer*/
		footer{margin-top:100px}

	

	
	/*top element altering ADD THIS TO THE TOP ELEMENT OF A PAGE*/
		#top{padding-top:120px;margin-top:00px;height:initial}
	

	


/*result table */
	.rTable td,.rTable th{font-size:15px}
	.rTable{width:100%}
	.resOP {font-size:15px;width:20%}
	.rTable table ,.rTable th,.rTable td{padding:5px}
	
	td:nth-child(10), th:nth-child(10),td:nth-child(7),td:nth-child(8),td:nth-child(9),th:nth-child(7),th:nth-child(8),th:nth-child(9) {display:none}


/*archive page*/
	.arc{font-size:15px;text-align:center;width:100%;display:block}



}

@media only screen and (min-width:1200px){
	
	#banner{display:block;margin:auto;width:100%;position:relative;
		animation-name: ban;
		animation-duration: 30s;
		animation-iteration-count:infinite;}
	.bannerH{width:1200px;margin:auto}
	
}



/* desktop */
@media only screen and (min-width:950px)
{
/*nav*/
	nav ul li {width:20%;float:left; background-color:rgb(255, 153, 0);height:43px; text-align:center; font-size:20px;display:block}
		
/*mobile stuff*/
	#spec,.title {display:none}
	
	#top{height:initial}

/*div formating for the two different colours*/
	.mDiv{margin-top:30px}
	.mDiv p {font-size:19px;display:block;}
	.mDiv ul li p{text-align:left}


/*intro section on index page*/	
	.intro{height:200px;margin-top:30px}
	.intro p {font-size:19px;display:block}
	

	.mDiv .mobH{display:none}








	/*positions the facebook imbed*/
	.facebook{height:610px;display:block;overflow:auto;width:500px;margin:auto}

	/*for side by side text*/
	.rightText{text-align:center;width:40%;margin-left:5%;margin-right:5%;display:inline-block;float:right}
	.leftText{text-align:center;margin-left:5%;margin-right:5%;width:40%;display:inline-block}
	
	.rightText h3{font-size:30px}
	.rightText h4{font-size:20px}
	.leftText h3{font-size:30px}
	.leftText h4{font-size:20px}

	/* for text by itself*/
	.centered{padding-top:10px;margin-left:12.5%;width:75%;text-align:center}
	
	/*box for text */
	.txtBox{padding:5%;text-align:center;margin:auto;width:90%;margin-top:0px}


	
/*formats the box of map and the map aswell*/
	.map{height:450px;margin-top:30px}






/* special objects */

	#banner{margin-top:30px;animation-name: ban;position:relative;
		animation-duration: 30s;
		animation-iteration-count:infinite;}
		



	/*Title of the page NOTE NEED TO UPDATE THIS!!!*/
	#head{height:120px;display:block;margin:auto;width:1200px}
	.title{display:none}
	.logo{height:100px;padding:10px;width:100px;float:left;padding-left:50px}
	
	#colli{width:50%;margin-left:25%;margin-top:30px;margin-bottom:30px}
	#coll{display:block;margin:auto;width:100%;margin-top:30px}



	.HM, .tenK{height:455px}
	.fiveK, .oneK{height:213px}
	.HM ul, .tenK ul,.fiveK ul, .oneK ul{list-style-type:disc}

	#sponsor{width:80%;margin-left:10%;margin-top:30px;margin-bottom:30px}


/* Form Stuff*/
	#feed{padding:4px;font-size:17px}
	#typ{font-size:15px}





/*big parts*/
	body{background-color:rgba(255,153,0,0.1)}
	header{background-color:rgba(29,28,28,1);height:120px;display:block;width:100%;}
	main{margin:auto;clear:both;width:1200px;background-color:rgba(255,153,0,0.2)}


/*meet us images*/
	.imgUs{width:50%;clear:none}
	
	.coach{width:35%}
	.comit{width:90%;text-align:left}





	

}
/*portrait ipad*/
@media (min-width:950px) and (max-width:1200px) {

	/*positions the facebook imbed*/
	.facebook{height:610px;display:block;overflow:auto;width:500px;margin:auto}
	
	
	
	#face, #twit, #insta, #stra{width:15%;float:left;margin:5%}
	main, #head{width:100%}
	#banI{width:400%}
	
}
/*facebook sorting*/
@media (min-width:650px) {
	.facebook{height:610px;display:block;overflow:auto;width:500px;margin:auto}
}

/*landscape ipad*/
@media (min-width:650px) {
	.coach{width:35%}
}


/*result text*/
@media (max-width:440px) {
/*link objects*/
#links{width:250px;margin:auto}

.rTable td, .rTable th {
    font-size: 10px;
}
}