/***Universal***/


    /*Modal IMG*/

    #myImg {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }

    #myImg:hover {opacity: 0.7;}

    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top:10vw;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: black;
      background-color: rgba(0,0,0,0.8);
    }

    .modal-content {
      margin: auto;
      display: block;
      max-width: 100%;
      animation-name: zoom;
      animation-duration; 0.5s;
    }

    @keyframes zoom {
      from {transform:scale(0)}
      to {transform:scale(1)}
    }

    .close {
      position: absolute;
      top: 5vw;
      right: 10vw;
      color: red;
      font-size: 5em;
      transition: 0.3s;
    }

    .close:hover,
    .close:focus {
      color: #bbb;
      cursor: pointer;
    }

    @media only screen and (mx-width: 700px){
      .modal-content {
        width: 100%;
      }
    }


    /*Site Links*/

    .shaded {
      background-color: rgba(0,0,0,0.03);
    }

    .sitemap {
      display: flex;
      flex-flow: row wrap;
      font-family: "Cabin", sans-serif;
      justify-content: space-evenly;
    }

        .pagelink {
	      flex: 1;
	      padding: 2vw;
        }


    /*Flex Boxes*/

    .flexbox {
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: center;
	  align-items: center;
    }

        .flexitem1 {
	      flex: 1 2 30%;
	      padding: 3vw;
        }

        .flexitem2 {
	      flex: 1 0 30%;
          padding: 3vw;
        }

    .flexbox2 {
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: center;
	  align-items: center;
    }
	
	    .flexitem3 {
			flex: 1 1 20%;
			padding-right: 3vw;
			padding-left: 3vw;
		}
		
		.flexitem4 {
			flex: 1 2 20%;
			padding-right: 3vw;
			padding-left: 3vw;
		}
		
		.flexitem5 {
			flex: 3 0 60%;
			padding-right: 6vw;
			padding-left: 6vw;
		}
		
		.flexitem6 {
			flex: 3 0 60%;
			padding-right: 6vw;
			padding-left: 6vw;
		}

    .flexbox3 {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-around;
          align-items: flex-end;
    }

        .flexitem7 {
	      flex: 4 0 20vw;
	      padding: 3vw;
        }

@media (max-width: 600px) {
.flexbox3 {
flex-direction: column;
}
}



    /*Images*/
  
        .imgt {
          opacity: 0.5;
        }


    /*Links*/

        a:link {
          color: #84e0c9;
        }

        a:visited {
          color: #70bfab;
        }

        a:hover {
          color: #96ffe4;
        }

        a:active {
          color: #9bebd8;
        }
  
  
    /*Headings*/

        h1 {
          font-family: "Alegreya", serif;
          font-weight: 900;
          font-size: 3em;
          letter-spacing: 0.03em;
          color: #333333;
        }

        h2 {
          font-family: "Alegreya Sans", sans-serif;
	      font-weight: 200;
	      font-size: 2.5em;
	      letter-spacing: 0.03em;
          color: #333333;
        }

        h3 {
	      font-family: "Alegreya Sans", sans-serif;
	      font-weight: 900;
	      font-size: 2em;
	      letter-spacing: 0.03em;
          color: #333333;
        }

        h4 {
	      font-family: "Alegreya Sans", sans-serif;
          font-weight: 500;
	      font-size: 1.5em;
	      letter-spacing: 0.03em;
          color: #333333;
        }

        h5 {
          font-family: "Cabin Sketch", sans-serif;
	      font-weight: 500;
	      font-size: 1.5em;
	      letter-spacing: 0.03em;
          color: #333333;
        }

        h6 {
	      font-family: "Cabin", sans-serif;
	      font-weight: 500;
	      font-size: 1.5em;
          letter-spacing: 0.03em;
          color: #333333;
        }


    /*Paragraphs*/

        p {
          font-family: "Cabin", sans-serif;
	      font-size: 1em;
          color: #333333;
        }
 
        span {
  	      font-family: "Cabin", sans-serif;
	      font-weight: 500;
	      font-size: 1em;
	      letter-spacing: 0.03em;
	      line-height: 1.6;
	      color: #333333;
        }

            span x {
	          font-family: "Cabin Sketch", sans-serif;
	          font-weight: 500;
	          font-size: 1.1em;
	          letter-spacing: 0.03em;
            }

            span y {
	          font-family: "Alegreya Sans", sans-serif;
	          font-weight: 900;
	          font-size: 1.25em;
	          letter-spacing: 0.03em;
            }

            span z {
	          font-family: "Cabin", sans-serif;
	          font-weight: 500;
	          font-size: 0.5em;
	          letter-spacing: 0.03em;
            }
	
  
  
    /*Colour Text*/

        .m {
	      font-family: "Cabin", sans-serif;
	      font-size: 1.5em;
	      font-style: bold;
          color: #c480d4;
        }

        .y {
          font-family: "Cabin", sans-serif;
	      font-size: 1.5em;
	      font-style: bold;
          color: #d4c27d;
        }

       .c {
          font-family: "Cabin", sans-serif;
	      font-size: 1.5em;
	      font-style: bold;
          color: #7fd7c1;
        }
  


.imagetext {
	position: relative;
	text-align: center;
	color: #333333;
	font-family: "Cabin", sans-serif;
	font-weight: 500;
	font-size: 1em;
	line-height: 100%;
}

.imgcenter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.heading {
	position: absolute;
	top: 2vw;
	left: 5vw;
	
}

.top-left {
	position: absolute;
	top: 10vw;
	left: 30vw;
}

.top-right {
	position: absolute;
	top: 10%;
	right: 75%;
}

.bottom-left {
	position: absolute;
	bottom: 10%;
	left: 10%;
}

.bottom-right {
	position: absolute;
	bottom:75%;
	right: 50%;
	
}


/*
***PORTRAIT***
*****XS*****
*/

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

        /*BG*/

            body {
	          margin: 0;
	          background-image: url('images/bokehbg.jpg');
	          background-repeat: no-repeat;
	          background-attachment: fixed;
              background-size: cover;
            }  
	
	
/***Portait Universal (1/2)***/

header {
	margin: 0;
	padding: 1%;
	height: 100vh;
	max-height: 7vw;
	background-color: #fbfaf8;
	top: 0;
	left: 0;
    max-width: 100%;
}

body {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.navbar {
	background-color: #fbfaf8;
	position: relative;
	z-index: 999;
	font-family: "Alegreya Sans SC", sans-serif;
	font-size: 3em;
	font-weight: 800;
	padding: 0;
	max-width: 100%;
}

.navbar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #fbfaf8;
	overflow: visible;
}

.navbar li {
	display: block;
	overflow: visible;
}

.navbar li a {
	color: #333333;
	display: block;
	text-decoration: none;
	overflow: visible;
}

.navbar ul ul {
	position: relative;
	background-color: white;
	width: 100%;
	height: 100%;
	display: none;
	overflow: visible;
}

.navbar ul ul li {
	position: relative;
	background-color: #fbfaf8;
	display: block;
}

.navbar li:hover ul {
	display: block;
}

.navbar ul ul li a:hover {
	background-color: #eadb9c;
}

ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #fbfaf8;
  max-width: 100%;
}


li {
  width: 16.66%;
  float: left;
}

 li a {
 display: block;
 color: #333333;
 padding: 0;
 text-align: center;
 text-decoration: none;
 font-size: 2vw;
}

 li a:hover {
 background-color: #eadb9c;
}

.box1 {
	float: left;
	width: 50%;
}

.box2 {
	float: left;
	width: 50%;
}

.box {
  margin: auto;
  width: 70%;
  padding: 10%;
  background-color: #fbfaf8;
}

.container {
  position: relative;
  text-align: center;
  color: #333333;
  padding: 3vw;
}

.centered {
	padding-left: 10%;
	padding-right: 10%;
	position: relative;
}
	
.container {
  margin: auto;
  width: 50%;
  max-height: 15vw;
  padding: 5vw;
  background-color: #fbfaf8;
  overflow: hidden;
}

.container img {
	max-height: 100%;
	object-fit: contain;
}
	*/

.centertext {
	text-align: center;
}

.righttext {
	text-align: right;
	color: #fbfaf8;
}

.lefttext {
	text-align: left;
	color: #fbfaf8;
}

.leftalign {
	
	text-align: left;
}

.news {
	margin-bottom: 10%;
	padding-top: 2.5%;
	background-color: rgba(255,255,255,0.75);
	padding-bottom: 2.5%;
	padding-left: 5%;
	padding-right: 5%;
}

.banner {
	padding-top: 2.5%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 5%;
}

.bannertext {
	text-align: center;
	color: #333333;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.containerb {
	position: relative;
	color: white;
}

.containeri {
	position: relative;
	color: white;
	opacity: 0.5;
	max-height: 45vw;
	overflow: hidden;
}

.topleft {
	position: absolute;
	top: 8vw;
	left: 16vw;
	text-align: left;
}

.centerh {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.bottomright {
	position: absolute;
	bottom: 10%;
	right: 20%;
	text-align: right;
}

details {
	font-family: "Alegreya Sans", serif;
	font-size: 1em;
	letter-spacing: 0.03em;
    color: #333333;
	cursor: pointer;
}

details > summary {
	padding: 2vw;
	text-decoration: underline;
	font-family: "Alegreya Sans", sans-serif;
	font-weight: 500;
	font-size: 1.5em;
	letter-spacing: 0.03em;
    color: #333333;
}

details > p {
	cursor: default;
}

details > table {
	cursor: default;
}

footer {
	padding: 5%;
	margin: 5%;
	background-color: rgba(255,255,255,0.75);
	font-family: "Alegreya", serif;
	font-size: 0.8em;
	letter-spacing: 0.03em;
	max-width: 100%;
}

table {
	border-style: none;
}

th, td {
	padding: 5px;
}



	}

	
/*
***PORTRAIT***
*****S*****
*/

    @media only screen and (min-width:600px) {


        /*BG*/

            body {
	          margin: 0;
	          background-image: url('images/bokehbg.jpg');
	          background-repeat: no-repeat;
	          background-attachment: fixed;
              background-size: cover;
            }  

	
/***Portait Universal (2/2)***/

header {
	margin: 0;
	padding: 1%;
	height: 100vh;
	max-height: 7vw;
	background-color: #fbfaf8;
	top: 0;
	left: 0;
    max-width: 100%;
}

body {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.navbar {
	background-color: #fbfaf8;
	position: relative;
	z-index: 999;
	font-family: "Alegreya Sans SC", sans-serif;
	font-size: 3em;
	font-weight: 800;
	padding: 0;
	max-width: 100%;
}

.navbar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #fbfaf8;
	overflow: visible;
}

.navbar li {
	display: block;
	overflow: visible;
}

.navbar li a {
	color: #333333;
	display: block;
	text-decoration: none;
	overflow: visible;
}

.navbar ul ul {
	position: relative;
	background-color: white;
	width: 100%;
	height: 100%;
	display: none;
	overflow: visible;
}

.navbar ul ul li {
	position: relative;
	background-color: #fbfaf8;
	display: block;
}

.navbar li:hover ul {
	display: block;
}

.navbar ul ul li a:hover {
	background-color: #eadb9c;
}

ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #fbfaf8;
  max-width: 100%;
}


li {
  width: 16.66%;
  float: left;
}

 li a {
 display: block;
 color: #333333;
 padding: 0;
 text-align: center;
 text-decoration: none;
 font-size: 2vw;
}

 li a:hover {
 background-color: #eadb9c;
}

.box1 {
	float: left;
	width: 50%;
}

.box2 {
	float: left;
	width: 50%;
}

.box {
  margin: auto;
  width: 70%;
  padding: 10%;
  background-color: #fbfaf8;
}

.container {
  position: relative;
  text-align: center;
  color: #333333;
  padding: 3vw;
}

.centered {
	padding-left: 10%;
	padding-right: 10%;
	position: relative;
}
	
.container {
  margin: auto;
  width: 50%;
  max-height: 15vw;
  padding: 5vw;
  background-color: #fbfaf8;
  overflow: hidden;
}

.container img {
	max-height: 100%;
	object-fit: contain;
}
	*/

.centertext {
	text-align: center;
}

.righttext {
	text-align: right;
	color: #fbfaf8;
}

.lefttext {
	text-align: left;
	color: #fbfaf8;
}

.leftalign {
	
	text-align: left;
}

.news {
	margin-bottom: 10%;
	padding-top: 2.5%;
	background-color: rgba(255,255,255,0.75);
	padding-bottom: 2.5%;
	padding-left: 5%;
	padding-right: 5%;
}

.banner {
	padding-top: 2.5%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 5%;
}

.bannertext {
	text-align: center;
	color: #333333;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.containerb {
	position: relative;
	color: white;
}

.containeri {
	position: relative;
	color: white;
	opacity: 0.5;
	max-height: 45vw;
	overflow: hidden;
}

.topleft {
	position: absolute;
	top: 8vw;
	left: 16vw;
	text-align: left;
}

.centerh {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.bottomright {
	position: absolute;
	bottom: 10%;
	right: 20%;
	text-align: right;
}

details {
	font-family: "Alegreya Sans", serif;
	font-size: 1em;
	letter-spacing: 0.03em;
    color: #333333;
	cursor: pointer;
}

details > summary {
	padding: 2vw;
	text-decoration: underline;
	font-family: "Alegreya Sans", sans-serif;
	font-weight: 500;
	font-size: 1.5em;
	letter-spacing: 0.03em;
    color: #333333;
}

details > p {
	cursor: default;
}

details > table {
	cursor: default;
}

footer {
	padding: 5%;
	margin: 5%;
	background-color: rgba(255,255,255,0.75);
	font-family: "Alegreya", serif;
	font-size: 0.8em;
	letter-spacing: 0.03em;
	max-width: 100%;
}

table {
	border-style: none;
}

th, td {
	padding: 5px;
}



	}



	
/*
***LANDSCAPE***
*****M*****
*/

    @media only screen and (min-width:768px) {


        /*BG*/

            body {
	          margin: 0;
	          background-image: url('images/bokehbg.jpg');
	          background-repeat: no-repeat;
	          background-attachment: fixed;
              background-size: cover;
            }  


/***Landscape Universal***/
  



	}