/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300;400;500;600;700&display=swap');

/*variables*/


/*reset and base styles*/

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



body{
  margin-bottom: 0px;
  font-family: 'Open Sans', sans-serif;
  color: #262261;
  font-size: 0.9rem;
  line-height: 1.9rem;
  overflow-x: hidden;


}


h1 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Signika', sans-serif;
    line-height: 3.2rem;
    font-weight: 900;
    font-size: 2.4rem;
}

h2 {
    margin-top: 1.7rem;
    margin-bottom: 1.5rem;
    font-family: 'Signika', sans-serif;
    line-height: 3.2rem;
    font-weight: 700;
    font-size: 2.2rem;
}

h3 {
    margin-top: 1.7rem;
    margin-bottom: 1.5rem;
    font-family: 'Signika', sans-serif;
    line-height: 2.8rem;
    font-weight: 700;
    font-size: 2.0rem;
}

h4 {
    margin-top: 1.7rem;
    margin-bottom: 1.5rem;
    font-family: 'Signika', sans-serif;
    line-height: 2.4rem;
    font-weight: 700;
    font-size: 1.4rem;
}

h5 {
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    font-family: 'Signika', sans-serif;
    line-height: 1.8rem;
    font-weight: 700;
    font-size: 1.0rem;
}

h6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Signika', sans-serif;
    line-height: 1.6rem;
    font-weight: 700;
    font-size: 0.9rem;
}

p {
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
    color: #262261;
    /*mobile*/
    font-size: 0.9rem;
    line-height: 1.4rem;

}


ul{
  list-style: none;
}

a{
  text-decoration: none;
}


.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}


/*Pages stlyes*/

.pagecontent{
  background-color: #efefef;


}


#pagecontents{
  grid-column: 4/11;
  grid-row: 2;
  background-color: #FFF;
  margin-top: 50px;
  margin-bottom: 40px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;

}

#pagecontents p{
  font-size: 0.9rem;
  line-height: 1.5rem;
}

#pagecontents h1{
font-weight: 600;
font-size: 2.2rem;
}



/*end of pages styles*/


/*Logo section styles*/

.logo{


}

.logo img{
  max-width: 100%;
  align-self: center;


}

.logo a:nth-child(1){
  grid-column: 1/13;
  grid-row:2;
  padding-left: 1.5rem;
  text-decoration: none;
  /*display: none;*/


}

.logo a:nth-child(2){
  grid-column: 5/10;
  padding: 0.5rem;
  grid-row:1;

}

.logo a:nth-child(3){
  grid-column: 1/13;
  grid-row:3;
  /*display: none;*/

}

.logo a{
  font-size: 0.8rem;
  text-align: center;


}

.logo a:link {
  color: #262261;
}/*End of Logo section styles*//*Button section styles*/
.button {	display: inline-block;	padding: 10px 20px;	margin: 10px;	font-size: 16px;	color: #fff;	background-color: #007bff;	text-decoration: none;	border: none;	border-radius: 5px;	cursor: pointer;}.button:hover {	background-color: #0056b3;}
/*End of Button section styles*/

/*Top Gallery Styles*/
#top-gallery a img{
  max-width: 100%;

}


#top-gallery a:nth-child(1){
  grid-column: 1/13;
  grid-row:1;
}

#top-gallery a:nth-child(2){
  display: none;

}

#top-gallery a:nth-child(3){
  display: none;
}

#top-gallery a:nth-child(4){
  display: none;
}

/*End of Top Gallery section styles*/

/*Welcome section*/
.welcome .grid{
    /*display: grid;
  grid-template-columns: repeat(8, 1fr);*/

}


.welcome #welcome-text{
  grid-column: 1/13;
  grid-row: 1;
  background-color:#9ECCE4;


}

.welcome #welcome-text h1{
  color: #FFF;
  align-content: center;
  padding-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-shadow: 2px 2px 5px #486370;
  text-align: center;

}


#events{
  grid-column: 1/13;
  grid-row: 2;

}


#events h4{
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;


}


#events table{
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;

}

#events table th{
  text-align: left;
  font-family: 'Signika', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #262261;

}

#events table tr{
  color: #555;
  height: 1.8rem;
}

#events table td{
  font-size: 0.9rem;
  font-weight: 400;
}


#events table tr:nth-child(odd){
  background-color: #F1F4F5;
  text-align: left;


}


#welcome-detail{
  grid-column: 1/13;
  grid-row: 3;
  display: none;

}


/*End of Welcome section styles*/

/* Mid Gallery section */
#mid-gallery a img{
  max-width: 100%;
  margin-top: 0.5rem;

}


#mid-gallery a:nth-child(1){
  grid-column: 1/13;
  grid-row:1;
}

#mid-gallery a:nth-child(2){
  display: none;
}

#mid-gallery a:nth-child(3){
  display: none;
}


/*Cards styles*/

#frontpage-cards {
    background-color: #efefef;
    margin-top: 30px;

  }


#frontpage-cards .cards-container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;


  }


.card-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;

}

  #frontpage-cards .column{
    display: flex;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    margin: auto;


  }

#frontpage-cards .frontpage-card{
    display: block;
    margin-top: 20px;
    background-color: #FFF;
    padding-bottom: 10px;
    width: 100%;
    box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

#frontpage-cards .frontpage-card img{
  width: 100%;
  height: 208px;
  object-fit: cover;

}

#frontpage-cards .frontpage-card .title{
  margin-left: 20px;
  margin-right: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  color: #E090C5;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.7rem;

}

#frontpage-cards .frontpage-card .card-content{
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  color: #555;
  text-align: center;


}
/*Cards styles*/

/* Online section */

.online {
  /*background-color: #CED9DF;*/
  background-color: #C5E090;
  /*padding-bottom: 0.7rem;*/
  padding-top: 0.5rem;
  padding-bottom: 0.7rem;
}

.online #online-text{

  /*font-size: 1.2rem;
  font-weight: 600;*/
  text-align: center;
  grid-column: 1/13;
  grid-row: 1/2;


}

.online #online-icons-fb{
  grid-column: 5/7;
  grid-row: 2/3;
  padding-top: 0.7rem;

}

.online #online-icons-inst{
  grid-column:7/9;
  grid-row: 2/3;
  padding-top: 0.7rem;

}

/* End of online section */


/* Safeguard section */

.safeguard {
  /*background-color: #A1A6A9;*/
  background-color: #5A7B8C;
  padding-bottom: 0.7rem;
  grid-gap: 0.8rem;


}

.safeguard #coe_sml{
  background-image: url(images/coe-removebg-preview.png);
  background-size: contain;
  background-repeat: no-repeat;
  grid-column: 1;
  display: none;
}

#safe-stmt{
  grid-column: 1/13;

}

#safe-stmt p{
  text-align: left;
  padding-left: 1rem;
  color: #fff;
  font-weight: 500;


}


#safe-minister{
  grid-column: 1/13;
  grid-row: 2/3

}


#safe-minister p{
  text-align: center;
  padding-left: 1rem;
  color: #fff;

}

#safe-minister span{
  font-weight: 900;
  
}

#safe-address{
  grid-column: 1/13;
  grid-row: 3/4;

}

#safe-address p{
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: bold;
  color: #fff;
}


/* Contact Form styles*/

.error {
	color:#ff0000;
}

.success {
	color: #ff9966;
	text-align: center;
	font-weight: bold;
	font-size: 14;
}


/*body {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:300;
	font-size: 15px;
	line-height:30px;
	color:#777;
	background:#0CF;
}*/

.contact_container {
	max-width:1000px;
	width:100%;
	margin:0 auto;
	position:relative;

}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"], #contact input[type="date"]
{ font:600 12px/16px "Open Sans", Helvetica, Arial, sans-serif;

}


.contact_container #contact {
	background:#F9F9F9;
	padding:25px;
	margin:50px 0;

}

#contact h3 {
	color: #F96;
	display: block;
	font-size: 30px;
	font-weight: 400;
}

#contact h4 {
	margin:5px 0 15px;
	display:block;
	font-size:20px;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;

}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="date"] {
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#0CF;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#09C;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}
/* End of Contact Form styles*/



/*Nav styles*/
  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body{
    font-family: 'Poppins',sans-serif;
    /*overflow: hidden;*/
  }

  ul{
    list-style: none;
  }

  a{
    text-decoration: none;
  }

  nav{
    background-color: #60b4df;
    width: 100%;
    line-height: 1.3rem;

  }


  .container{ /*Container for navigation menu*/
    max-width: 100%;
    padding: 0 0.8rem;
    height: 3rem;
    margin: 0 auto;
    display: flex;
    justify-content:flex-end;
    position: relative;

  }


  .nav-btn{
    align-content: flex-end;
    padding-right: 150px;
    }

  .nav-links{
    flex: 2;
}


  .btn{
    display: inline-block;
    padding: .5rem 1.3rem;
    font-size: .8rem;
    border: 2px solid #fff;
    border-radius: 2rem;
    line-height: 1;
    margin: 0 .2rem;
    transition: .3s;
    text-transform: uppercase;
  }

  .btn.solid, .btn.transparent:hover{ /*This animates the buttons on hove, solid becomes transparent*/
    background-color: #fff;
    color: #69bde7;
  }

  .btn.transparent, .btn.solid:hover{ /*This animates the buttons on hover, transparent becomes solid*/
    background-color: transparent;
    color: #fff;
  }

  .nav-links > ul{ /*Aligns the items next to each other*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-link{
    position: relative;
  }

  .nav-link > a{
    line-height: 3rem;
    color: #fff;
    padding: 0 .8rem;
    letter-spacing: 1px;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s;
  }

  .nav-link > a > i{ /*The child selector > selects all elements that are children of a specified element*/
    margin-left: .2rem;
  }

  .nav-link:hover{
    transform: scale(1.1);
  }

  .dropdown{
    position: absolute; /*notice that the parent class "nav-link" is relative*/
    top: 100%;
    left: 0;
    width: 10rem;
    transform: translateY(10px);
    opacity: 0;
    pointer-events:none;
    transition: .5s
  }

  .dropdown ul{
    position: relative;
  }

  .dropdown-link > a{
    display: flex;
    background-color: #fff;
    color: #3498db;
    padding: .5rem 1rem;
    font-size: .9rem;
    align-items: center;
    justify-content:space-between;
    transition: .3s;
  }

  .dropdown-link:hover > a{ /*This implements the hover colour on the dropdown-link*/
    background-color:#3498db;
    color: #fff;
  }

  .dropdown-link:not(:nth-last-child(2)){
    border-bottom: 1px solid #efefef; /*Puts a solid border on every other row of dropdown-link*/
  }

  .dropdown-link i{
    transform: rotate(-90deg); /*This turns the dropdown-link to point down*/
  }

  .arrow{ /*This is the arrow below the name of each menu with a droplist*/
    position: absolute;
    width: 11px;
    height: 11px;
    top: -5.5px;
    left: 32px;
    background-color: #fff;
    transform: rotate(45deg);
    cursor:  pointer;
    transition: .3s;
    z-index: -1;
  }

  .dropdown-link:first-child:hover ~ .arrow{ /*The general sibling selector (~) selects all elements that are siblings of a specified element.*/
    background-color: #3498db;
  }

  .dropdown-link{
    position: relative; /*This is a parent class so must be set to relative, child class absolute*/
  }

  .dropdown.second{ /*Styles the sub-menu*/
    top: 0;
    left: 100%;
    padding-left: .8rem;
    cursor: pointer;
    transform: translateX(10px);
    }

  .dropdown.second.arrow{
    top: 10px;
    left: -5.5px;
  }

  .nav-link:hover > .dropdown, /*This cause the menu droplists to show on hover*/
  .dropdown-link:hover > .dropdown{
    transform: translate(0,0);
    opacity: 1;
    pointer-events:auto;
  }

  .hamburger-menu-container{
    flex: 1;
    display: none;
    align-items: center;
    justify-content: flex-end;
  }

  .hamburger-menu{ /*Styles the size and shape of the hamburger menu*/
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hamburger-menu  div{ /*Creates the midding line in te hamburger menu*/
    width:1.6rem;
    height: 3px;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    z-index: 1001;
    transition: .5s;
  }

  .hamburger-menu  div:before,
  .hamburger-menu  div:after{
      content: '';
      position: absolute;
      width: inherit;
      height: inherit;
      background-color: #fff;
      border-radius: 3px;
      transition: .5s;
  }

  .hamburger-menu div:before{
    transform: translateY(-7px);
  }

  .hamburger-menu div:after{
    transform: translateY(7px);
  }

  #check{
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    z-index: 90000;
    cursor: pointer;
    opacity: 0;
    display: none;
  }

  #check:checked ~ .hamburger-menu-container .hamburger-menu div{
    background-color: transparent;
  }

  #check:checked ~ .hamburger-menu-container .hamburger-menu div:before{
    transform: translateY(0) rotate(-45deg);
  }

  #check:checked ~ .hamburger-menu-container .hamburger-menu div:after{
    transform: translateY(0) rotate(45deg);
  }

  @keyframes animation {
    from{
      opacity: 0;
      transform: translateY(15px);
    }
    to{
      opacity: 1;
      transform: translateY(0px);
    }
  }

/*End of Nav styles*/

.responsive {
  width: 50%;
  height: auto;
}

  /*If the screen is 620px pixels or smaller*/
  @media screen and (max-width: 620px) {


    .hamburger-menu-container{
      display: flex;
    }

    #check{
      display: block;
    }

    .nav-btn{
      position: fixed;
      height: calc(100vh - 3rem);
      top: 3rem;
      left: 0;
      width: 100%;
      background-color: #69bde7;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      overflow-x: hidden;
      overflow-y: auto;
      transform: translateX(100%); /*repositions an element horizontally on the 2D plane*/
      transition: .65s;
    }

    #check:checked ~ .nav-btn{
      transform: translateX(0);
    }

  #check:checked ~ .nav-btn .nav-link,
  #check:checked ~ .nav-btn .log-sign{
    animation: animation .5s ease forwards var(--i);/*Var(--i) This is added to the html to activate the animation*/
  }


    .nav-links{
      flex: initial; /*used to set the flex property to its defauly value*/
      width: 100%;
    }

    .nav-links > ul{
      flex-direction: column;
    }

    .nav-link{
      width: 100%;
      opacity: 0;
      transform: translateY(15px);

    }

    .nav-link > a{
      line-height: 1;
      padding: 1.6rem 2rem;
    }

    .nav-link:hover > a{
      transform: scale(1);
      background-color: #50a9d6;
    }

  .dropdown, .dropdown.second{ /*This styles the second level dropdown*/
    position:initial;
    top: initial;
    left: initial;
    transform: initial;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    padding: 0;
    background-color: #3183ac;
    display: none;
  }

  .nav-link:hover > .dropdown, .dropdown-link:hover > .dropdown{
    display: block;
  }

  .nav-link:hover > a > i, .dropdown-link:hover > a > i{
    transform: rotate(360deg);
  }

  .dropdown-link > a{
    background-color: transparent;
    color: #fff;
    padding: 1.2rem 2rem;
    line-height: 1;
  }

  .dropdown.second .dropdown-link > a{
    padding: 1.2rem 2rem 1.2rem 3rem;
  }

  .dropdown.second .dropdown.second .dropdown-link > a{
    padding: 1.2rem 2rem 1.2rem 4rem;
  }

  .dropdown-link:nth-last-child(2)){
    border-bottom: none;
  }

  .arrow{
    z-index: 1;
    background-color: #69bde7;
    left: 10%;
    transform: scale(1.1) rotate(45deg);
    transition: .5s;
  }

  .nav-link:hover .arrow{
    background-color: #50a9d6;
  }

  .dropdown .dropdown .arrow{
    display: none;
  }

  .dropdown-link:hover > a{
    background-color:#3a91bd;
  }

  .dropdown-link:first-child:hover ~ .arrow{
    background-color: #50a9d6;
  }

  .nav-link > a > i{
    font-size: 1.1rem;
    transform: rotate(90deg);
    transition: .7s;
  }

  .dropdown i{
    font-size: 1rem;
    transition: .7s;
  }

    .log-sign{
      flex: initial; /*used to set the flex property to its default value*/
      width: 100%;
      padding: 1.5rem 1.9rem;
      justify-content: flex-start;
      opacity: 0;
      transform: translateY(15px);
    }




} /*End navigation media query when screen smaller than 620px*/


/*If the screen is 555px pixels or larger*/
@media screen and (min-width: 550px) {

.logo a{
  font-size: 1.0rem;
  text-align: center;

}

}




/*If the screen is 620px pixels or larger*/
@media screen and (min-width: 620px) {

  h4 {
      font-size: 1.6rem;
  }

  p {
      font-size: 0.9rem;
      line-height: 1.3rem;
  }

  #pagecontents h1{
  font-weight: 600;
  font-size: 2.4rem;
  }


  #pagecontents p{
    font-size: 1.1rem;
    line-height: 2.0rem;
    font-weight:lighter;
  }


  #top-gallery a:nth-child(1){
  grid-column: 1/7;
  grid-row:1;
  }

  #top-gallery a:nth-child(2){
    grid-column: 7/13;
    grid-row:1;
    display: unset;

  }

  #welcome-detail{
    grid-column: 1/13;
    grid-row: 3;
    display: unset;

  }


  #welcome-detail p{
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.2rem;
    background-color: #fff;
  }

  #events table th{
    font-size: 1.4rem;
  }

  #events table td{
    font-size: 1.1rem;
    font-weight: 400;
  }


  #mid-gallery a:nth-child(1){
    grid-column: 1/7;
    grid-row:1;
  }

  #mid-gallery a:nth-child(2){
    grid-column: 7/13;
    grid-row:1;
    display: unset;
  }



.online #online-text{
  grid-column: 1/9;
  grid-row: 1;


}

.online #online-icons-fb {
  grid-column: 9/11;
  grid-row: 1/2;

}

.online #online-icons-inst {
  grid-column:11/13;
  grid-row: 1/2;

}

}


/*If the screen is 800px pixels or larger*/
@media screen and (min-width: 800px) {
  p {
      line-height: 1.4rem;
  }

  #pagecontents h1{
  font-weight: 600;
  font-size: 2.6rem;
  }

  #top-gallery a:nth-child(1){
  grid-column: 1/5;
  grid-row:1;
  }

  #top-gallery a:nth-child(2){
    grid-column: 5/9;
    grid-row:1;

  }

  #top-gallery a:nth-child(3){
    grid-column: 9/13;
    grid-row:1;
    display: unset;

  }


.welcome #welcome-text{
  grid-column: 1/6;
  grid-row: 1/3;


}


.welcome #welcome-text h1{
  text-align: left;
}


#events{
  grid-column: 6/13;
  grid-row: 1/3;

}


  #mid-gallery a:nth-child(1){
    grid-column: 1/5;
    grid-row:1;
  }

  #mid-gallery a:nth-child(2){
    grid-column: 5/9;

  }

  #mid-gallery a:nth-child(3){
    grid-column: 9/13;
    display: unset;

  }



  .safeguard #coe_sml{
    grid-column: 1/2;
    display: unset;

  }

  #safe-stmt{
    grid-column: 2/13;
  }

}


/*If the screen is 960px pixels or larger*/
@media screen and (min-width: 960px) {

  h4 {
      font-size: 1.8rem;
  }

  p {
      line-height: 1.6rem;
  }

  .logo a:nth-child(1){
    grid-column: 1/5;
    grid-row:1;
    padding-left: 1.5rem;
    text-decoration: none;

  }


  .logo a:nth-child(3){
    grid-column: 11/13;
    grid-row:1;

  }


  .logo a{
    font-size: 0.9rem;
}


  #pagecontents h1{
  font-weight: 600;
  font-size: 3.0rem;
  }

  /*.welcome #welcome-text h1{

    text-align: left;
  }


  #events h4{
    font-size: 1.5rem;
  }

  #events tr{
    font-size: 1.2rem;
  }*/

}

/*If the screen is 1200px pixels or larger*/
@media screen and (min-width: 1200px) {

  h1 {
      margin-top: 1.7rem;
      margin-bottom: 1.7rem;
      font-size: 2.8rem;
  }

  p {
      line-height: 2.0rem;
  }

  h4 {
      font-size: 1.8rem;
  }

  #pagecontents h1{
  font-weight: 600;
  font-size: 3.4rem;
  }

  .logo a{
    font-size: 1.1rem;}
/*  #events tr{
    font-size: 1.2rem;
    line-height: 2.5rem;
  }
  */

  .safeguard #coe_sml{
    grid-column: 1;

  }

  #safe-stmt{
    grid-column: 2/7;

  }


  #safe-minister{
    grid-column: 8/10;
    grid-row: 1;

  }


  #safe-minister p{
    text-align: left;
  }

  #safe-address{
    grid-column: 11/13;
    grid-row: 1;

  }

  #safe-address p{
    text-align: left;
  }


  #top-gallery a:nth-child(1){
    grid-column: 1/4;
    grid-row:1;
  }

  #top-gallery a:nth-child(2){
    grid-column: 4/7;
    grid-row:1;

  }

  #top-gallery a:nth-child(3){
    grid-column: 7/10;
    grid-row:1;
  }

  #top-gallery a:nth-child(4){
    grid-column: 10/13;
    grid-row:1;
    display: unset;

  }