@charset "utf-8";

/*  nav bar   */
.nav {width:100%; background-color:#1b2c5e;/*  blue - style menu bar colour  */; text-align:center; position:relative; z-index:9999;text-transform:uppercase; height:45px; font-weight:bold}

/* hides the 'nav menu' text by default (when on a large screen)    */
.nav span {display:none;}

.nav input {position:absolute; display:none;}/*  hides check boxes  */

/*  hides the nav label, although three currently isn't a text one  */
.nav label {display:none;}

/*  nav  */
/*  style nav list  */
.nav ul {background:#1b2c5e;/* blue  style menu colour  */ margin:0; padding:0; display:inline-block; list-style:none; text-align:center; }
.nav ul li {float:left; display:block; position:relative; white-space:nowrap; max-width:250px }
.nav a {text-decoration:none; display:block; color:#FFF; line-height:45px; padding:0 20px 0 20px;}
.nav ul li ul li{float:left; display:block; position:relative; white-space:nowrap; min-width:250px }
.nav a:hover {color: #FFF;}  /*  white hover text */
.nav li:hover {background:#53A2E0;/*  light blue hover background */}

/*  drop downs   */
/*  hides drop down until hover - better than display none as screen readers can still see it */
.nav ul ul {left:-99999px; position:absolute;}
.nav ul li:hover > ul { left:0px; top:45px;/* pushes dropdown below nav bar and recalls it from off screen */}
.nav ul ul li:hover > ul { left:100% /* pushes sub sub list to right of first dropdown  */; top:auto; margin-top:-46px;
background:#2d8fda;/* lighter blue  2nd drop down colour   */}

.nav ul ul ul li:hover > ul {background:#48affd;}/* lightest blue  3rd drop down colour   */

@media only screen and (max-width:480px){
/*  mobile nav heading */
.nav span {display:block; color:#FFF; position:absolute; left:40% !important; top:5px;} 
.nav label {width:110px !important}

}

@media only screen and (max-width:920px){
	/*  collapsed nav bar  */
.nav { padding-top:45px; background:#1b2c5e;/*  mobile nav bar  colour*/position:relative; height:0; }

/*  adds expand button block - inline-block rather than block stops nav text sliding under button */
.nav label {display:inline-block; width:130px; height:35px; background:#fff; border-radius:20px; position:absolute; right:5px; top:5px; cursor:pointer;}

.nav ul label {width:55px !important;}

/*  mobile nav heading */
.nav span {display:block; color:#000; position:absolute; left:50%; top:5px; }

.nav li {display:block;}
/*  style mobile sub nav fold out */
.nav ul, .nav ul ul {margin:0; display:block; position:static; max-height:0; overflow:hidden;-webkit-transition:0.25s;
transition:0.3s}

/*   mobile nav items on seperate lines */
.nav ul li {float:none;width:100%; max-width:100% !important}

.nav ul ul li label {margin-top:0; }

/*   mobile sub nav backgriound colour */
.nav ul {background:#28418a; border:0;}
/*  text etc for mobile nav */
.nav a {display:block;  color:#FFF; line-height:45px; text-decoration:none;padding:0 0 0 10px;}
/** adds line between mobile nav items   **/
.nav ul li a {border-bottom:1px solid #000;}

/**stops mobile nav going jittery when you hover, not sure why. trying to collapse, overwrites it? **/
.nav ul ul li:hover ul {margin-top:0;}

/** adds hover effect to mobile sub list, '>' makes it affect one child only not all  **/
.nav li:hover > a {background-color:#3c61cd; text-decoration:none;}
.nav li:hover {background:#666;/*  grey hover at side background */}
/** needs max height set  **/
.nav input:checked ~ ul {max-height:9999px;}

/** subsets subnavs a little bit for clarity  **/
.nav ul ul {margin:0 0 0 15px;}

/** triangle button  **/
.nav label:after {display:block; content:""; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid #1f2c5f; background:transparent;   margin-left:15px; margin-top:8px; -webkit-transition:0.25s; transition:0.25s}

/** rotate triangle button  **/
.nav input:checked ~ label:after {margin-top:3px;-webkit-transform:rotate(180deg);transform:rotate(180deg);}