/*@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');

body {
	/* background-color:	#eeeeFF	; */
	color: #2a2a2a;
	font-family: Verdana, Helvetica, sans-serif;
	/* margin:				60px; */
	margin: 0;
	padding: 0;
	  height: 100%;
 
}
#container {
	/*margin: 0 6%;*/
	
}
#banner{
	
	margin: 1em 0;
}
#banner img {
	width: 300px;
	float: right;
}
#banner_text{
		font-family: 'Raleway', sans-serif;
color: #0000aa;
	font-size:			1em;
	/* position:absolute; */
	float: left;
	padding: 1em;
	width: 400px;
	font-size: 1.2em;
	/* top: 4em; */
	/* left: 1em; */
	background-color: #d7d7d7a3;
}

.banner-image {
  background-image:  url("banner.jpg");
  height: 180px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.banner-text {
 		font-family: 'Raleway', sans-serif;

  position: absolute;
  top: 22%;
  font-size: 1.8em;
  left: 8%;
  /* transform: translate(-50%, -50%); */
  color: white;
  
  line-height: 1.7em;
}
.banner-text .smaller{
	color: #b0bbe4;
	font-size: .8em;
	line-height: 1em;
	display: block;
}
#new_intro {
		font-weight: bold;
		font-family: 'Raleway', sans-serif;
		border-radius: 8px;
		color: #3f58c2;
		font-size: 1.2em;
		padding: 0.5em 1em 0.5em 1em;
		font-weight: normal;
		font-size: 1.2em;
		/* border: 1px solid #bababa;
		text-align: center; */
		margin: 1.2em 5% 0.7em 5%;
}
#new_intro2 {
		font-weight: bold;
		font-family: 'Raleway', sans-serif;
		color: #3f58c2;
		font-size: 1.2em;
		/* padding: 0.5em 1em 0.5em 1em; */
		font-weight: normal;
		font-size: 1.2em;
		margin: 1.2em 0 0 6%;
}
#new_intro img {
	
	float: left;
	width: 20%;
	margin-right: 2em;
	 
}
#new_intro2 img {
	float: left;
	width: 45%;
	/* margin-right: 1em; */
}
#intro_right {
	/* margin: 0 0 0 0; */
	width: 50%;
	float: right;
}
.alastair {
	
	color: #2a2a2a;
    font-size: 1.6em;
	
	
}
#intro {
		font-weight: bold;
		font-family: 'Raleway', sans-serif;
		border-radius: 8px;
		color: #3f58c2;
		font-size: 1.2em;
		padding: 0.5em 1em 0.5em 1em;
		font-weight: normal;
		font-size: 1.2em;
		border: 1px solid #bababa;
		text-align: center;
		margin: 1.2em 5% 0.7em 5%;
}
#left{
	width: 46%;
	float: left;
	padding: 0 0 0 2%;
}
#right{
	width: 50%;
	float: left;
	padding: 0 2% 0 0;
}
#lower {
	clear: both;
	/* height: auto; */
	/* float: left; */
	width: 100%;
	margin: 0em 0 0 0;
}
#clearer {
	clear: both;
	/* height: auto; */
	/* float: left; */
	width: 100%;
	margin: 0em 0 0 0;
}


h2{
		font-family: 'Raleway', sans-serif;
		color: #323232;
		font-size: 1.2em;
		padding: 1em 1em 0.3em 0;
		font-weight: normal;
		font-size: 1.2em;
		margin: 0 6% 1em 6%;
		/* margin-left: 6%; */
		border-bottom: #0000aa dotted 1px;
}
h3{
	color:				#0000aa;
	font-size:			1.1em;
}
h4{
	font-size:			1em;
}
h5{	
	visibility:hidden;
}
table{
	font-size: 0.9em;
	padding: 0 4em;
}
p, li{
	/* text-align:	justify; */
	font-size: 0.9em;
	margin: 0 6% 0.4em 6%;
	color: #757575;
}
li {
	margin: 0 3%;
}
th{
	
		font-family: 'Raleway', sans-serif;
padding: 0.6em;
	background-color: #7d7d7d;
	color: 				white;
	font-size:			1em;
	font-weight:		normal;
}
td{
	
	vertical-align:		top;/* border:				2px outset; */padding: 0.8em;
}
 #rates td {
	background-color: #e7e7e7;
}
#right a{
	color: #3f58c2;
	margin-left: 2em;
}
#right a:hover{
		color:			 #000;

}
#footer a{
	color:			 #c9c9c9;
}
#footer a:hover{
		color:			 #fff;

}
.menu{
	/*float: left;
	margin: 8px 8px 4px 8px;
	border: 2px outset;
	padding: 8px 2px 4px 2px;
	background-color:	#ddddFF;
	*/
	text-align: center;
	width: 100%;
	margin-bottom: 32px;
	height: 32px;
	display: block;
}
#content{
	/*border: 1px solid red;*/
	margin: 32px;
/*	margin-left: 170px;
	margin-right: 5px;
	position: absolute;
	top: 90px;
	left: 5px;*/
	width: 1000px;
	clear: both;
}
.banner-image 
h1{
	padding: 2em;
	color: white;
	margin: 0px 0px 2px 0px;/*border: 4px outset #9999ff;*//* border-top: 2px solid #818181; */

}
/* General properties for all menu items */
.menu a:hover,.menu a:link,.menu a:active,.menu a:visited{
	color: white;
	background-color:#0000aa;
	border:	2px outset #9999ff;
	display: block;
	width: 133px;
	text-decoration:none;
	padding: 2px;
	text-align:center;
	margin: 0 2px 0 2px;
	font-size: 0.9em;
	float: left;
	height:32px; 
}
/* Ordinary menu when mouse hovers */
.menu a:hover{
	color: white;
	background-color: #6666FF;
	border:	2px outset #99ccff;
}
/* Selected menu */
.menu a.selected{
	color: red;
}
/* Make menu item look like a pressed button when mouse is clicked */
.menu a:active{
	border:	2px inset #0033CC;
}
/* Make selected menu item look like a pressed button when mouse is clicked */
.menu a.selected:active{
	border:	2px inset #0033CC;
}
/* Selected menu when mouse hovers */
.menu a.selected:hover{
	color: white;
	background-color: #6666FF;
	border:	2px outset #99ccff;
}
img{
	/* border: 1px solid #333333; */
	/* margin:10px; */
	/* float:right; */
	/* width:306px; */
	/* height:230px; */
}
p.endnote{
	font-size: 10px;
}
#credit{
	margin: 0 16px 4px 0;
	bottom: 0px;
	font-size: 10px;
	float: right;
}
.endnote{
	margin: 0 0 4px 16px;
	bottom: 0px;
	font-size: 10px;
	float: left;
}
#footer{
 
    margin-top: 2em;
    color: #fff;
    line-height: 1.5em;
    padding: 2em 0 2em 12%;
    background-color: #575795;
}

@media screen and (max-width: 878px) {

#intro_right {
	font-size: 80%;
	
}
}


@media screen and (max-width: 700px) {


body {
	font-size: 110%;
/*background-image:none;*/
}

#left, #right {
	width: 94%;
    margin: 0 3% 0 3%;
    padding: 0;
}
/* #intro_right { */
	/* font-size: 80%; */
	
/* } */
li{
	margin: 0 6% 0 0;
}
p, li{
	text-align: left;
	
}
#intro br  {
     display: none;
   }
#footer{
	/*font-size: 0.6em;*/
}
}