body {
	background-color: lightgrey;
	color: #33334d;
	font-family: cambria; 
}
 .mediumblue {
	border-top:3px solid #666699;
}
h1	{
	font-size: 4vmax;
	text-align: center;
}
h2 {
	font-size:max(120%,1.5vmax);
	
	text-align: center;
}

h3 {
	font-size: 2vmax;
}

h4 {
	font-size: 150%;
	font-weight:bold;
}

h5 {
	font-size:max(100%,1.2vmax);
	text-decoration: underline;
}

p {
	font-size: 120%;
}
img {
	width: 40vmax;
}

	
.menu-list {
	font-size: 120%;
}
.navy {
	color:#33334d;
}

.lgrey {
	color: lightgrey;
}

/* div to style like 'p' */
.regular {
	font-size:  120%;
	font-family: cambria;
}

.center {
	text-align:center
}
/*Home button styling*/
.home {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	font-size:1vmax;
	text-align: center;

}

.home-btn {
	grid-column-start: 4;
    background-color: white;
	border: 0.25vmax solid gray;
	font-size: 1vmax;
	border-radius: 0.5vmax;
	transition-duration: 0.4s;
	
	word-wrap: break-word;
}
.home-btn:hover {
		background-color: gray;
}


/* grid style section - which page is this on? Needs to go into the page */

.grid-menu {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap:5px;
}
.grid-item {
	background-color:#f0f0f0;
	text-align:center;
	font-size: 20px;
}

/* update buttons*/

button.btn-change {
	background-color: white;
	border: 0.25vmax solid gray;
	font-size: 1vmax;
	border-radius: 0.5vmax;
	transition-duration: 0.4s;
	word-wrap: break-word;
}

button.btn-change:hover {
	background-color: gray;
}

/* Hover code */
.hover {
	background-color:lightgrey;
	transition-duration: 0.4s;
}

.hover:hover {
	background-color:white;
	
}
/* Privacy notice button styling*/
.close {
  height: 2vmax;
  background-color: #777;
  border: none;
  color: white;
  border-radius: 2px;
  cursor: pointer;
}
 #cookie-notice {
  position: fixed;
  font-size: 1vmax;
  bottom: 1vmax;
  left: 10%;
  right: 10%;
  width: 80%;
  padding: 0.2vmax 0.5vmax;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
 }
 
 .hidden {
    display: none;
    visibility: hidden;
}
 
 .cookie {
	font-size:1vmax;
}

/* timer style*/

 .timer {
	font-size: 5vmax;
	font-family: cambria;
	text-align: center;
}
 
/* Centre video */
video{
    max-width: 100%; 
	height: auto;
	display:block;
	margin:auto;
}

/* Notes class */
.notes {
	font-size:120%;
}


/*IWB class */
.iwb {
	font-size:1.8vmax;
}
.iwb_large {
	font-size:2.5vmax;
}
/*responsive image*/

.responsive_xsmall {
	width: 70%;
	max-width:150px;
	 height: auto;
   }
   
.responsive_small {
 width: 100%;
 max-width:200px;
  height: auto;
}


.responsive_medium {
 width: 150%;
 max-width:400px;
  height: auto;
}

.responsive_large {
 width: 200%;
 max-width:800px;
  height: auto;
}

.responsive_xlarge {
	width:90%;
	object-fit: contain;
   }




/*lightbox code*/
a.lightbox img{
	width:40vmax
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
 
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position:absolute;
top: 0;
left:0;
right:0;
height:auto;
width:auto;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
  
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
  overflow:scroll;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0;
}

/* Unicode font for symbols */
.symbol {
	font-family: 'Lucida Sans Unicode';
	user-select: none;
	cursor: pointer;
  }