@charset "UTF-8";

/* ######################################## */
/*               GLOBAL                     */
/* ######################################## */


/*----------------------------------------------------------
# General Style                                              
------------------------------------------------------------*/

body {
  margin: 0;
  font-family: 'Roboto', Verdana, Helvetica, sans-serif;
  font-size: 0.55rem;   /* starting size for the smallest viewports*/
  /* 0.55rem is same as 10.5px or 6.5pt if browser font is 16px*/
  /* most other site text sizes are relative to the body font size*/ 
	color: #2e2e2e;
	text-align: left;
	background-color:  black;
  background-attachment: fixed;
	background-image: url(images/background.jpg);
	background-size: cover;
	background-repeat: no-repeat;
  background-position: left top;
  overflow-y: scroll;
  position: relative;
  min-height: calc(100vh - 8em);
  min-width: 360px;
}

p {
  margin-top: 0;
	margin-bottom: 1em;
}

a {
  color: #00bdff;
  text-decoration: none;
}

a:hover {
  color: #70dbff;
  text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #ff88ff;
}

.strap-line {
  padding-top: 80px;
  padding-bottom: 38px;
}

/*container used in header, strap line and footer*/
.container {
  padding-left: 0;
  padding-right: 2em;
  margin-left: 3%;
  margin-right: 3%;
}

.strap {
  font-size: 115%;
	font-weight: normal;
  color: #0090ff;
  padding-left: 50px;
  padding-top: 0px;
  padding-bottom: 0.2em;
  margin-bottom: 0;
}

.noscript-warning {
  font-size: 135%;
  font-weight: normal;  
  color: #f00000;    
  text-align:center;
}

sup {
  vertical-align: super;
  font-size: 70%;
  color: red;
  font-weight: bold;
}

.note-number {
  color: red;
  font-weight: bold;
}


/*----------------------------------------------------------
# General - Header                                           
------------------------------------------------------------*/

#header {
  background: #1c1c1c;
/*  height: 50px; */
  min-width: 300px;
  padding: 2px 0;
  z-index: 1;
}

#header .logo h1 {
  font-family: 'Signika Negative', 'Roboto', Verdana, Helvetica, sans-serif;
  font-size: 299%;
  margin: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 0;
  padding-right: 0;
  line-height: 1;
  font-weight: 400;
}

#header .logo h1 a {
  color: #0090ff;
  text-decoration: none;
}

#header .logo h1 a .capital {
  color:#5fbefc;
}

#header .logo h1 a:hover .capital {
  color:#5fc9fc;
}	

#header .logo h1 a:hover {
  color: #5fc9fc;
  text-decoration: none;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
  width: 32px; 
  height: 32px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}


/*-------------------------------------------------------------
# General - Navigation Menu                                    
--------------------------------------------------------------

/* Desktop Navigation */

.nav-menu, .nav-menu * {
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  list-style: none;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #0090ff;
  padding-top: 40px;
  padding-left: 5em;
  transition: 0.3s;
  font-size: 110%;
  font-weight: 500;
  text-decoration: none;
}


.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% - 0px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 20px 30px;
  background: #1c1c1c;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 150px;
  position: relative;
}

.nav-menu ul li.current > a {
    color:#b090f0;			 
}

.nav-menu a:hover, .nav-menu li:hover > a {
  color: #5fc9fc;	 					 
}


.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}


/* To keep logo on the left and navbar on right hand side */
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}


/*-----------------------------------------------
#            Mobile Navigation                    
-------------------------------------------------*/

.mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  left: -260px;
  width: 260px;
  padding-top: 18px;
  background: #1c1c1c;
  transition: 0.4s;
}

.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav a {
  display: block;
  position: relative;
  color: #0090ff;
  padding: 10px 20px;
  font-weight: 500;
  font-size: 0.88rem;
  text-decoration: none;
}

.mobile-nav .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 10px;
  position: absolute;
  right: 15px;
}

.mobile-nav .active.drop-down > a:after {
  content: "\eaa0";
}

.mobile-nav .drop-down > a {
  padding-right: 35px;
}

.mobile-nav .drop-down ul {
  display: none;
  overflow: hidden;
}

.mobile-nav .drop-down li {
  padding-left: 20px;
}

.mobile-nav ul li.current > a {
  color: #b090f0 
}

.mobile-nav a:hover, .mobile-nav li:hover > a {
  color: #5fc9fc;
}


.mobile-nav-toggle {
  position: fixed;
  right: 10px;
  top: 15px;
  z-index: 2;
  border: 0;
  background: none;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
}

.mobile-nav-toggle i {
  color: #0090ff;
}

.mobile-nav-overlay {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: #404040aa;
  overflow: hidden;
  display: none;
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active .mobile-nav {
  left: 0;
}

.mobile-nav-active .mobile-nav-toggle i {
  color: #00ffff;
}

/* To make nav menu disappear */
.d-none {
  display: none !important;
}

/* controls whether mobile menu button is displayed */
@media (min-width: 1024px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }

}


/*--------------------------------------------------------------
# General Footer Components
--------------------------------------------------------------*/

.footer-text {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.copyright {
  padding-top: 0.5em;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	letter-spacing: 0.1em;
  text-align: center;
  color: #aaaaaa;
}
.copyright .logo {
  font-family: 'Signika Negative','Roboto', Arial, Helvetica, sans-serif;
  font-size: 120%;
  letter-spacing: 0;
  color: #0090ff;
}
.copyright .logocap {
  font-family: 'Signika Negative','Roboto', Arial, Helvetica, sans-serif;
  font-size: 120%;
  color: #5fbefc;  /*pale blue */
  letter-spacing: 0;
}

.credits {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: #fff;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 75%;
	font-style: italic;
  text-align: center;
}
.credits a {
  color: #00bdff;
}
.credits a:hover {
  color: #70dbff;
}

.credits p {
  margin-top:0;
  margin-bottom:0;
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

.back-to-top {
  position: fixed;
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  right: 1.5em;
  bottom: 1em;
  background: #0090ff80;
  color: #fff;
  z-index: 1;
}

.back-to-top i {
  font-size: 15px;
  position: absolute;
  top: 2px;
  left: 2px;
}

.back-to-top:hover {
  color: #fff;
  background: #00f0ff80;
}


/*#############################################################*/
/*            RESPONSE TO VIEWPORT SIZING                      */
/*#############################################################*/


@media (min-width: 392px) {
  body {
    font-size: 0.6rem;
  }
}

@media (min-width: 426px) {
  body {
    font-size: 0.65rem;
  }
}

@media (min-width: 458px) {
  body {
    font-size: 0.7rem;
  }
}

@media (min-width: 508px) {
  body {
    font-size: 0.75rem;
  }

}

@media (min-width: 540px) {
  body {
    font-size: 0.8rem;
  }
}

@media (min-width: 564px) {
  body {
    font-size: 0.8375rem;
  }
}


/* ############################################################*/
/*             MAIN PAGE CONTENT                                      */
/*#############################################################*/


.main-astro {
  margin-top: 6em;
	margin-left: 2%;
  margin-right: 2%; 
  padding-bottom: 2em;
}

.how-to-view {
  color: #fcfcb0;
  font-size: 125%;
  margin-left: 1%;
  padding-top: 12px;
}

#footer-astro {
  background: #1c1c1c;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3.5em;
}
 
.section-heading {
  color: #7000ff;
  font-size: 125%;
  font-weight: bold;
  margin-left: 1%;
  padding-top: 0;
}

#Gallery {
  display: block;
}

.grid-gallery {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
  row-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  padding-top: 0;
  padding-bottom: 20px;
}

.container-gallery-image {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  background:  black;
}

.gallery-image {
  width: 100%;
  height: auto;
  opacity: 0.7;
}

.gallery-image:hover {
  opacity: 1;
}

.gallery-image-title {
  font-size: 105%;
	font-weight: normal;
  color: #fff;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Gallery padding cell */
.pad1 {
  display: block;
}

/*
.container-astro h2 {
  font-size: 120%;
  font-weight: bold;
  color:  black;
  padding-top: 0.5em; 
	padding-right: 0;
	padding-bottom: 0.5em;
  padding-left: 0;
  letter-spacing: .05em;
  text-align: left; 
}*/



/*---------------------------------------------------------------
#                           Image Viewer
---------------------------------------------------------------*/



/* The viewer (background) */
.viewer {
  display: none;
  position: absolute;
  z-index: 3;
  padding-top: 0;
  left: 0;
  top: -6em;
  width: 100%;
  height: 100%;
  background-color: black;
}

.grid-viewer {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  row-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  margin-left: 3%;
  margin-right: 2%;
  margin-bottom:1%;
  background-color: black;
}

/* Image section */
.viewer-content {
  position: relative;
  top: 0;
  margin-top: 0;
  margin-right: 1%;
  padding-top: 0;
  padding-left: 0;
}


/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: -10px;
  right: 1%;
  z-index: 4;
  font-size: 260%;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Each image container - hidden by default */
.container-mainimage-A,
.container-mainimage-B,
.container-mainimage-C,
.container-mainimage-D,
.container-mainimage-E {
  display: none;
  text-align: center;
  margin-top: 1.5em;
  margin-left: 1%;
  margin-right: 1%;
}

/* Image class for each viewer image */
.mainimage-A,
.mainimage-B,
.mainimage-C,
.mainimage-D,
.mainimage-E {
  max-width: 100%;
  max-height: calc(100vh - 1.5em - 30px);
  cursor: initial; 
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 33vw; /* compromise position for different aspect rations - stays in same place regardless of grid height */
 
  z-index: 4;
  width: auto;
  padding: 0;
  margin-top: -2%;
  margin-left: -2%;
  margin-right: -2%;
  color: #ffffff;
  font-weight: bold;
  font-size: 170%;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  color: #999;
}

/* Number text (1/3 etc) */
#number-ref {
  color: #fff;
  font-size: 90%;
  padding-left: 1em;
  padding-top: 3px;
  position: absolute;
  top: 0;
}

/* Title of image */
.caption-text {
  text-align: center;
  background-color: black;
  color: white;
  font-weight: bold;
  font-size: 105%;
  padding-top: 2px;
  padding-bottom: 2px;
}

.side-panel {
  margin-top: 1.5em;
}

.tips {
  color: #fcfcb0;
  font-size: 103%;
  margin-left: 2%;
  text-align: center; 
}

.p-tips {
  margin-bottom: 0.5em;
}

#tip-1 {
  display: block;
}

#tip-2 {
  display: none;
}

.times {
  color: white;
  position: relative;
  top: 3px;;
  right: 0;
  font-size: 190%;
  font-weight: bold;
}

.container-description {
  color: #ccc;
  margin-top: 20px;
  margin-bottom:20px;
  margin-left: 2%;
  display: block;
}

.description-text-A,
.description-text-B,
.description-text-C,
.description-text-D,
.description-text-E {
  font-size: 100%
}

.description-text-A h2,
.description-text-B h2,
.description-text-C h2,
.description-text-D h2,
.description-text-E h2 {
  display: none;
  color: #fff;
  font-size: 105%;

}

.container-description-image {
  text-align:center;
  padding-top:10px;
  padding-bottom:10px;
}

.container-description-image2 {
  text-align: center;
  padding-top:10px;
  padding-bottom:10px;
}

.button-container {
  padding-bottom: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.button-toggle {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #606060), color-stop(1, #404040) );
  background:-moz-linear-gradient( center top, #606060 5%, #404040 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#606060', endColorstr='#404040');
  background-color:#404040;
  -webkit-border-top-left-radius:3px;
  -moz-border-radius-topleft:3px;
  border-top-left-radius:3px;
  -webkit-border-top-right-radius:3px;
  -moz-border-radius-topright:3px;
  border-top-right-radius:3px;
  -webkit-border-bottom-right-radius:3px;
  -moz-border-radius-bottomright:3px;
  border-bottom-right-radius:3px;
  -webkit-border-bottom-left-radius:3px;
  -moz-border-radius-bottomleft:3px;
  border-bottom-left-radius:3px;
  text-indent:0;
  border:1px solid #222222;
  color:#ffffff;
  font-family:Arial;
  font-size:10px;
  font-weight:bold;
  font-style:normal;
  height:auto;
  line-height:20px;
  text-decoration:none;
  text-align:center;
  text-shadow:1px 1px 0px #707070;
}

.button-toggle:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #404040), color-stop(1, #606060) );
  background:-moz-linear-gradient( center top, #404040 5%, #606060 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#606060');
  background-color:#606060;
}

.button-toggle:active {
  position:relative;
  top:1px;
  background-color:#606060;
}

#toggle-description {
  display: block;
}

.thumb-section-heading {
  color: #7000ff;
  font-size: 110%;
  font-weight: bold;
  margin-left: 10px;
  margin-top: 0px;
  margin-bottom:5px;
  padding-top: 0;
  text-align: left;
}

.grid-thumbnails {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  grid-template-rows: auto;
  row-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  margin-bottom: 5px;
  padding-top: 10px;
  margin-left:2%;
  background-color: black;
}

.container-thumbnail {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  background: #000;
}

.thumbnail-A,
.thumbnail-B,
.thumbnail-C,
.thumbnail-D,
.thumbnail-E {
  width: 100%;
  max-width: 200px;
  height: auto;
  opacity: 0.6;
}

.thumb-image-title {
  font-size: 80%;
	font-weight: normal;
  color: #fff;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.active,
.thumbnail-A:hover,
.thumbnail-B:hover,
.thumbnail-C:hover,
.thumbnail-D:hover,
.thumbnail-E:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}


/*---------------------------------------------------------------
#                Main Page Response to Viewport Sizing 
---------------------------------------------------------------*/

/* (Gallery pad breakpoints were originally 470, 920, 1370 & 1820px) but
Gallery grid sizing is not required because
where pad1 to pad4 are used, they are zero height if on a row with no images*/
/*
@media (min-width: 640px) {
  .pad1 {
    display: block;
  }
}

@media (min-width: 953px) {
  .pad2 {
    display: block;
  }
}

@media (min-width: 1265px) {
  .pad3 {
    display: block;
  }
}

@media (min-width: 1577px) {
  .pad4 {
    display: block;
  }
}*/

/* Bigger margins and maintain a minimum size for controls so easier to use on phones */
@media (max-width: 599px) {
  .container-mainimage-A,
  .container-mainimage-B,
  .container-mainimage-C,
  .container-mainimage-D,
  .container-mainimage-E {
    margin-top: 22px;
    margin-left: 2%;
    margin-right: 2%; 
  }
  .prev, .next {
    margin-left: -1.8%;
    margin-right: -1.8%;
    font-size: 1.1rem;
  }
  .close {
    top: -7px;
    right: 2.3%;
    font-size: 1.8rem;
  }
  .numbertext {
    font-size: 0.6rem;
  }
}


/* 2 columns at + 1280px+ */
@media (min-width: 1280px) {
  .grid-viewer {
    grid-template-columns: 60% 40%;
    -ms-grid-columns: 1fr 1fr;
  }
  .grid-viewer > div:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    grid-column: 1;
  }
   .grid-viewer > div:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-row: 1;
    grid-column: 2;
  }

  .prev, .next {
    top: 20vw; /*compromise position for different aspect ratios stays in same place regardless of grid height*/
  }

  .side-panel {
    margin-left: 3%;
  }

  #toggle-description {
    display: none;
    content: "Hide Description"
  }

  #description-container {
    display: block;
  }

  .description-text-A h2,
  .description-text-B h2,
  .description-text-C h2,
  .description-text-D h2,
  .description-text-E h2 {
    display: block;
  }

  .mainimage-A,
  .mainimage-B,
  .mainimage-C,
  .mainimage-D,
  .mainimage-E {
    cursor: zoom-in;
  }

  /* display tip re maximise option */
  #tip-2 {
    display: block;
  }
}



/* ############################################################*/
/*             ABOUT PAGE                                      */
/*#############################################################*/


.main-about {
  margin-top: 0;
	margin-left: 2%;
  margin-right: 2%; /*no margins for viewports up to 499px */
  padding-bottom: 10em;

}

#footer-about {
  background: #1c1c1c;
  position: absolute;
  bottom: 0;
  height: 3.5em;
  width: 100%;
}

.container-about {
  background-color: #202020b3;
  position: relative;
  top: 0;
  margin-left: 10%;
  margin-right: 10%;
  margin-top:20vh;
}

.container-about h1 {
  font-size: 125%;
  font-weight: bold;
  color: #0090ff;
  padding-top: 20px; 
	padding-right: 0;
	padding-bottom: 0;
  padding-left: 0;
  letter-spacing: .05em;
  text-align: center; 
}

.container-about h2 {
  font-size: 110%;
  font-weight: bold;
  color: #dddddd;
  padding-top: 0.5em; 
	padding-right: 0;
	padding-bottom: 0.5em;
  padding-left: 0;
  letter-spacing: .05em;
  text-align: left; 
}

.container-about-text {
  font-size: 105%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 8px;
}

.about-text {
  font-size: 100%;
  font-weight: normal;
  color: #cccccc; 
}


/*---------------------------------------------------------------
#                About Page Response to Viewport Sizing 
---------------------------------------------------------------*/

/* Margins at 1280px */ 
@media (min-width: 1280px) {
  .container-about {
    top: 50px;
    margin-left: 15%;
    margin-right: 15%;
  }
}

/* Margins at 1440px */ 
@media (min-width: 1440px) {
  .container-about {
    margin-left: 20%;
    margin-right: 20%;
  }
}
/* Margins at 1600px */ 
@media (min-width: 1600px) {
  .container-about {
    margin-left: 25%;
    margin-right: 25%;
  }
}

/* Larger text at 1920px */ 
@media (min-width: 1920px) {
  .container-about h1 {
    font-size: 150%;
  }
  .container-about h2 {
    font-size: 110%;
  }
  .about-text {
    font-size: 120%;
  }
}