@charset "UTF-8";

/* CSS Document */  /* Hamburher to X */

.icon {
background-color: #000033;	/*This only affects colour of enclosing shape - not transparent one! */					   										 							/* enclosing shape is round, square etc! */
border: 0;   /*make zero so cannot see */
/*border-color:red; */
height: 70px;
width: 70px;
border-radius: 10%;
cursor: pointer;
position: absolute;  /*  this should move icon out to where needed  */
left: 130px;
top: 65px; /*margin: 0 30px 0 0;*/
}
.icon span {
diplay: block;
height: 4px;  /* this is the height of the lines of hamburger and X */
width: 30px;  /* this is the width  of the lines of hamburger and X */
background-color: #cccccc;  /*This only affects colour of bars in enclosing shape - not transparent one! */
border-radius: 2px;
position: absolute; 
left: 10px;
-webkit-transition: -webkit-transform 100ms;
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
.icon span:first-child { top: 28px; left: 20px; }
.icon span:nth-child(2) { top: 37px; left: 20px; }
.icon span:last-child { top: 46px; left: 20px; }

.icon--active span:first-child {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 20px; top: 37px; }

.icon--active span:last-child {
-webkit-transform: rotate(-45deg); /* this routine turns the bars around to make the X */
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute; left: 20px; top: 37px; }
.icon--active span:nth-child(2) { opacity: 0; } /* this hides the third bar to make the X */

.icon--button { border-radius: 10px; }
.icon--square { border-radius: 0; }
.icon--transparent { background-color: transparent; }
.icon--transparent span { background-color: #cccccc; } /* The transparent colour for hamburger and X symbol */


/* CSS Menu and mobile */

			/* style the main menu */
.myMenu {
	margin:0;
	padding:0;
	display:block;
	list-style:none;
	position:relative;
	z-index:1003;
	/*margin-top:2px;  this decides the white space above the menu */
	font-size: 14px;	
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.myMenu li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	line-height: 5px;
	-webkit-transition-timing-function:all 100ms ease-in;
	-o-transition:all 50ms ease-in;
	-moz-transition:all 50ms ease-in;
}

.myMenu li a:link, .myMenu li a:visited {
	text-decoration:underline;	
	background-color:#000033;
	margin:5px;/* this is the margin of the links from the left */
	color:#cccccc; /* this is the color of the menu text before hover */
}

.myMenu li a:hover {
	background-color:#666;
	color:#eeeeee;  /* this is the color of the menu text at hover */
	text-decoration:none;	
	-webkit-transition-timing-function:all 100ms ease-in;
	-o-transition:all 50ms ease-in;
	-moz-transition:all 50ms ease-in;
}

		/* end of style of the main menu */

		/* Giovani extra */
.mobile-left {margin:left; position:relative; text-align:left;display:block;}		
.mobile-hidden {display: none;}
.mobile-on {display: block;}
.mobile-centered {text-align:centered; }
.icon-position { margin-left: 80px; }	/*places the icon on the line in right position*/
		/* end Giovani extra */

ol, dl { /* Due to variations between browsers, it's best to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0px; margin: 10px; }
	
ul { padding: 0px; margin: 10px; }	

	/* Styling for your site's links must remain in this order - including selectors that create hover effect */
a:link { color:#cccccc; text-decoration: none; text-decoration:underline;}
	/* unless links look unique, best to provide underlines for easy identification */
a:visited { color: #cccccc; text-decoration: underline; }
a:hover, a:active, a:focus { /* will give a keyboard navigator same hover experience as person using a mouse.*/
	color: #eeeeee; text-decoration: none; }
a img { /* removes the default blue border */
	border: 0; }