@charset "utf-8";
@charset "UTF-8";

/* CSS Document */

/******************************************************
Fonts required for website, we also load one google font for main text
*******************************************************/
@font-face{
	font-family: LeagueGothic;
	src: url(webfonts/LeagueGothic-Regular.otf);
}


/******************************************************
Main grey radial gradient backgroun
*******************************************************/
body{
	font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000000;
	/*background-color: #f8f7f8;
	/*background: -webkit-radial-gradient(#f8f7f8, #8B8B8B); /* Safari 5.1 to 6.0 */
	/*background: -o-radial-gradient(#f8f7f8, #8B8B8B); /* For Opera 11.6 to 12.0 */
	/*background: -moz-radial-gradient(#f8f7f8, #8B8B8B); /* For Firefox 3.6 to 15 */
	/*background: radial-gradient(#f8f7f8, #8B8B8B); /* Standard syntax */
	background-color: #f8f7f8; /* #7C27CB */
	background: -webkit-radial-gradient(#ffffff, #35296c); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(#ffffff, #35296c); /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(#ffffff, #35296c); /* For Firefox 3.6 to 15 */
	background: radial-gradient(#ffffff, #35296c); /* Standard syntax */
	font-size: medium;
}
#grid{
		height: auto;
		margin-left: auto;
		margin-right: auto;
		/*padding: 20px;
		margin: 20px;*/
		position: relative;
		border-radius: 10px;
		background-color: #ffffff;
		overflow: auto;
		width:1064px;
}

#banner{
	position: static;
	margin-left: 20px;
	width: 800px;
	height: 115px;
	font-size: 14px;
	display: block;
}

#banner span{
	float: right;	
	margin-right: 20px;
	margin-top: 15px;
}

#banner img{
	float: right;	
	margin-top: 10px;
	margin-right: 5px;
}

img#logo{
	margin-right: 227px;	
	margin-top: 0px;
}
/******************************************************
Menu Bar
*******************************************************/
#menu-bar{
	position: relative;
/*	top: 0px;
	left: 0px;*/
	margin-left: 20px;
	width: 1025px;
	height: 60px;
	font-size: 14px;
	background: #35296c;
	background: linear-gradient(272deg, #7563ac, #35296c);
	background: -moz-linear-gradient(272deg, #7563ac, #35296c);
	background: -webkit-linear-gradient(272deg, #7563ac,#35296c);
}

/*hides submenu when it is not pressed*/
#menu-bar ul ul{
	display: none;	
}

#menu-bar ul{
	margin: 0px;
	margin-left: 10px;
	list-style: none;
	z-index: 2;
}

#menu-bar ul li {
	float: left;
	line-height: 60px;
	margin-right: 10px;
	display: block;
	font-weight: bold;
}


	
#menu-bar ul li:hover {
	  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	background: #35296c;
	background: linear-gradient(#7563ac 0%, #35296c 40%);
	background: -moz-linear-gradient(top, #7563ac 0%, #35296c 40%);
	background: -webkit-linear-gradient(top, #7563ac 0%,#35296c 40%);
	line-height:54px;
	border-top: 3px solid #FDD023;
	border-bottom: 3px solid #FDD023;
	display: block;
	height: 60px;
	color: #FDD023;
	}

	
#menu-bar ul li a {
	display: block; 
	color: #ffffff; 
	text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
}


#menu-bar ul ul {
	background: #35296c; 
	border-radius: 0px; 
	padding: 0;
	position: absolute; 
	top: 100%;
	margin-left: 0;
	border-left: 0;
}
	
#menu-bar ul ul li {
		  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	float: none; 
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #6b727c;
	position: relative;
	margin-right: 0px;
	line-height:38px;
	margin-left: 0px;
}

#menu-bar ul ul li a {
	padding-right: 10px;
	padding-left: 10px;
	color: #ffffff !important;
	position: relative;
}	


#menu-bar ul ul li:hover {
	background: #5f4b9f;
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	line-height:38px;
	height: 40px;
}
/*displays submenu when highlighted*/
#menu-bar ul li:hover > ul{
		display: block; 
/*		pointer-events:none;*/
}

#menu-bar li.link:hover{
	background: #5f4b9f;	
}

#menu-bar li a:active{
	color: #FDD023 !important;	
}

h1{
	font-size: 16px;
	color: #000000;
	margin-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 1px;
}

h2{
	font-size: 12px;
	margin-bottom: 0px;
}

#pictures{
	position: static;
	float: right;
	height: auto;
	width: 430px;
	z-index: 0;
	margin: 36px;
}

#pictures img{
	margin: 0px;
	float: left;	
}
#pictures img.small{
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 10px;	
}

#main-text{
	position: static;
	height: auto;
	width: auto;
	color: #000000;
	float: none;
	font-size: 16px;
	line-height: 1.4em;
	margin: 36px;
}

#main-text li{
	padding-top: 10px;	
}

#main-text h1{
	font-family: LeagueGothic;
	font-size: 52px;
	line-height: 1em;
	font-weight: 100;
	color: #878787;
}

#main-text h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 1.2em;
	font-weight: 100;
	color: #878787;
}

h2.contact{
	font-size: 16px;
	color: #000000;
	margin-top: 16px;
	padding-bottom: 2px;
	margin-bottom: 0px;	
}

p.contact{
margin-bottom: 0px;
margin-top: 0px;
}


#footer {
	position: static;
	display: block;
	background: #35296c;
	background: linear-gradient(272deg, #7563ac, #35296c);
	background: -moz-linear-gradient(272deg, #7563ac, #35296c);
	background: -webkit-linear-gradient(272deg, #7563ac,#35296c);
	margin-left: 16px;
	margin-bottom: 40px;
	height: auto;
	width: 1025px;
	clear: both;
}


#footer p, #footer a {
	font-size: 9px;
	vertical-align: middle;
	color: white;
	text-decoration: none;
}

#footer p.footer-address{
	padding-top: 5px;
	padding-bottom: 25px;
	padding-left: 25px;
	/*font-weigh7: bold;*/
	font-size: 10px;
	color: white;
}

#footer a{
	font-weight: bold;
	font-size: 10px;
}

#footer p.float-right{
	text-align: right;
	margin-right: 50px;
	float: right;
	margin-top: 18px;
	font-size: 9px;
}

#footer p span{
	margin-right: 85px;
	float: right;
}

#vertical-line-footer{
	width: 1px;
	height: 85px;
	background: #171174;	
	float: right;
	display: inline;
	margin-top: 5px;
	margin-right: 72px;
}


#footer img{
	float: right;	
	margin-top: 20px;
	margin-right: 40px;
}

p.small-print{
	font-size: 10px;
	line-height: 1.4em;
}

#contact-us{
background-image:url('images/ContactUSHUD.png');
height: 475px;
}

/******************************************************
For smaller screens make adaptations, 3 breakpoints
*******************************************************/
/*@media (min-width: 1064px){
	#grid{
		width: 1064px;
	}
}

@media (max-width: 1063px){
	
	#grid{
		width: 99%;

		
	}
	
	#menu-bar{
		max-width: 80%;
	}
	
	#menu-bar ul{
		margin-left: 0px;	
	}
	
	#main-text, #pictures{
		margin-left: 200px;
	}
	
	#news-text, #tweet-text, #events-text{
	display: none;	
	}
	
	#footer{
		width: 820px;	
	}
	
	#vertical-line-footer{
		margin-right: 25px;	
	}
	
	#footer p span{
		margin-right: 45px;
	}	
	#footer p.float-right{
		margin-right: 25px;
	}
}


@media (max-width: 767px)
{
	
	#grid{
		width: 99%;
		background-color:blue;	
	}
	
	#menu-bar{
		max-width: 50%;
	}
	
	
	#footer{
		width: 480px;	
	}
	
	#vertical-line-footer{
		margin-right: 15px;	
	}
	
	#footer p span{
		margin-right: 15px;
	}	
	#footer p.float-right{
		margin-right: 15px;
	}
	#footer img{
		display: none;
	}

}
*//* CSS Document */