body {background-color: #08134B;}

container-fluid {
    width: 96%;
    margin: auto;
    background: #08134B;
    padding: 8px;
}

/* stabdard fonts - font and colour is common to all */
h1, h2, h3, h4, h5, h6, p {color: white; font-family: 'Montserrat', sans-serif;}
/* weight common to most but not p */
h1, h2, h3, h4, h5, h6 {font-weight: 600;}
p  {font-weight: 300;}

/* standard font weights on all screen sizes */
.fw3 {font-weight: 300} .fw4 {font-weight: 400} .fw6 {font-weight: 600}
.fw7 {font-weight: 700}  .fw9 {font-weight: 900}
/* DESIGNED FOR MOBILE FIRST */

/* default sizes for portrait phones */
@media only screen and (max-width: 575px) {
    h1 {font-size: 28pt;}
    h2 {font-size: 24pt;}
    h3 {font-size: 22pt;}
    h4 {font-size: 20pt;}
    h5 {font-size: 18pt;}
    h6 {font-size: 16pt;}
    p  {font-size: 12pt;}
    li {font-size: 12pt;}
    /* font definitions used throughout */
    .fs14 {font-size: 10pt;}
    .fs16 {font-size: 12pt;} .fs18 {font-size: 14pt;} .fs20 {font-size: 16pt;}
    .fs24 {font-size: 18pt;} .fs28 {font-size: 20pt;} .fs32 {font-size: 22pt;}
    /* social media icons etc */
    .sm-icons {height: 20px; margin-right: 20px;}
    /* specific items */
    .image-title {font-size: 18pt;}
    .image-highlight {font-size: 24pt;}
    .image-text {font-size: 11pt;}
    .venue-slider {height: 120px;}
    /* containers */
    .container-CL {float: left; text-align: center;}
    .container-CR {float: left; text-align: center;}
}

/* sizes for sm screens */
@media only screen and (min-width: 576px) {
    h1 {font-size: 32pt;}
    h2 {font-size: 28pt;}
    h3 {font-size: 24pt;}
    h4 {font-size: 20pt;}
    h5 {font-size: 18pt;}
    h6 {font-size: 16pt;}
    p  {font-size: 12pt;}
    li {font-size: 12pt;}
    /* font definitions used throughout */
    .fs14 {font-size: 10pt;}
    .fs16 {font-size: 12pt;} .fs18 {font-size: 16pt;} .fs20 {font-size: 18pt;}
    .fs24 {font-size: 20pt;} .fs28 {font-size: 22pt;} .fs32 {font-size: 24pt;}
    /* social media icons etc */
    .sm-icons {height: 24px; margin-right: 24px;}
    /* specific items */
    .image-title {font-size: 16pt;}
    .image-highlight {font-size: 24pt;}
    .image-text {font-size: 11pt;}
    .venue-slider {height: 120px;}
    /* containers */
    .container-CL {float: left; text-align: left;}
    .container-CR {float: left; text-align: right;}
}

/* sizes for md screens */
@media only screen and (min-width: 768px) {
    h1 {font-size: 44pt;}
    h2 {font-size: 32pt;}
    h3 {font-size: 28pt;}
    h4 {font-size: 24pt;}
    h5 {font-size: 20pt;}
    h6 {font-size: 18pt;}
    p  {font-size: 12pt;}
    li {font-size: 12pt;}
    /* font definitions used throughout */
    .fs14 {font-size: 12pt;}
    .fs16 {font-size: 12pt;} .fs18 {font-size: 16pt;} .fs20 {font-size: 18pt;}
    .fs24 {font-size: 20pt;} .fs28 {font-size: 24pt;} .fs32 {font-size: 26pt;}
    /* social media icons etc */
    .sm-icons {height: 28px; margin-right: 28px;}
    /* specific items */
    .image-title {font-size: 16pt;}
    .image-highlight {font-size: 24pt;}
    .image-text {font-size: 11pt;}
    .venue-slider {height: 120px;}
}

/* sizes for lg screens */
@media only screen and (min-width: 992px) {
    /* h1 {font-size: 60pt;}
    h2 {font-size: 40pt;}
    h3 {font-size: 32pt;}
    h4 {font-size: 28pt;}
    h5 {font-size: 24pt;}
    h6 {font-size: 20pt;}
    p  {font-size: 14pt;}
    li {font-size: 14pt;}
    .fs14 {font-size: 12pt;}
    .fs16 {font-size: 12pt;} .fs18 {font-size: 16pt;} .fs20 {font-size: 18pt;}
    .fs24 {font-size: 22pt;} .fs28 {font-size: 26pt;} .fs32 {font-size: 28pt;}*/
    .sm-icons {height: 32px; margin-right: 32px;}
    .image-title {font-size: 18pt;}
    .image-highlight {font-size: 26pt;}
    .image-text {font-size: 11pt;}
    .venue-slider {height: 120px;}
}

/* sizes for xl screens */
@media only screen and (min-width: 1200px) {
    /* h1 {font-size: 72pt;}
    h2 {font-size: 44pt;}
    h3 {font-size: 36pt;}
    h4 {font-size: 30pt;}
    h5 {font-size: 26pt;}
    h6 {font-size: 22pt;}
    p  {font-size: 16pt;}
    li {font-size: 16pt;}
    .fs14 {font-size: 14pt;} .mnu {font-size: 18px;}
    .fs16 {font-size: 16pt;} .fs18 {font-size: 18pt;} .fs20 {font-size: 20pt;}
    .fs24 {font-size: 24pt;} .fs28 {font-size: 26pt;} .fs32 {font-size: 30pt;}
    .sm-icons {height: 36px; margin-right: 36px;}*/
    .image-title {font-size: 20pt;}
    .image-highlight {font-size: 28pt;}
    .image-text {font-size: 11pt;}
    .venue-slider {height: 120px;}
    .tmi {font-size: 16px; font-weight: 600;}
}

/* sizes for xxl screens - my own additional breakpoint */
@media only screen and (min-width: 1500px) {
    /* h1 {font-size: 85pt;}
    h2 {font-size: 48pt;}
    h3 {font-size: 40pt;}
    h4 {font-size: 32pt;}
    h5 {font-size: 28pt;}
    h6 {font-size: 24pt;}
    p  {font-size: 16pt;}
    li {font-size: 16pt;}
    .fs14 {font-size: 14pt;}
    .fs16 {font-size: 16pt;} .fs18 {font-size: 18pt;} .fs20 {font-size: 20pt;}
    .fs24 {font-size: 24pt;} .fs28 {font-size: 28pt;} .fs32 {font-size: 32pt;}
    .sm-icons {height: 40px; margin-right: 40px;}*/
    .image-title {font-size: 22pt;}
    .image-highlight {font-size: 30pt;}
    .image-text {font-size: 11pt;}
    .venue-slider {height: 120px;}
}

/* home page panel management */
.image-panel { position: relative; text-align: center;
    color: white; }
.image-panel img {
  width: 100%; height: auto; object-fit: cover;
}
.image-title { color: white; font-weight: 800; padding: 2px 8px;
    font-family: 'Montserrat', sans-serif; }
.image-text { color: white; font-weight: 600; padding: 2px 8px;
    font-family: 'Montserrat', sans-serif; display: none; }
/* formats specifically for page banners */
.centered { position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); }
.centered-coloured {position: absolute; top: 50%; left: 50%; padding: 8px;
    transform: translate(-50%, -50%); background:  rgba(8, 19, 75, 0.65); min-width: 75%; max-height: 85% }
.banner-text {text-transform: uppercase; text-shadow: 3px 3px 7px #000;}

/* colours used to highlight text boxes */
.box-shadow-cyan:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #00CCF9, 0 0 15px #00CCF9, 0 0 20px #00CCF9; }
.box-shadow-pink:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #FF0096, 0 0 15px #FF0096, 0 0 20px #FF0096; }
.box-shadow-teal:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #00FF63, 0 0 15px #00FF63, 0 0 20px #00FF63; }
.box-shadow-gold:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #FFCD01, 0 0 15px #FFCD01, 0 0 20px #FFCD01; }


/* fonts for environment pages */
.envhead { color: white; font-family: 'Montserrat', sans-serif; font-size: 20pt; font-weight: 600; }
.envsubhead { color: white; font-family: 'Montserrat', sans-serif; font-size: 18pt; font-weight: 600; }
.envbold { color: white; font-family: 'Montserrat', sans-serif; font-size: 16pt; font-weight: 600; }
.envnormal {  color: white; font-family: 'Montserrat', sans-serif; font-size: 16pt; font-weight: 400; }

/* Discover More panels */
.dm-panel { color: white; }
.dm-image { color: white; }
.dm-title { color: white; }
.dm-text { color: white; }


/* colours used in different ways */
.banner-cyan {text-align: center; text-shadow: 0 0 8px #00CCF9;}
.banner-pink {text-align: center; text-shadow: 0 0 8px #FF0096;}
.banner-teal {text-align: center; text-shadow: 0 0 8px #00F6C3;}
.banner-gold {text-align: center; text-shadow: 0 0 8px #FFCD01;}

.text-outline-cyan { text-shadow: 0 0 8px #00CCF9; }
.text-outline-pink { text-shadow: 0 0 8px #FF0096; }
.text-outline-teal { text-shadow: 0 0 8px #00FF63; }
.text-outline-gold { text-shadow: 0 0 8px #FFCD01; }

.border-cyan { border-color: #00CCF9; }
.border-pink { border-color: #FF0096; }
.border-teal { border-color: #00FF63; }
.border-gold { border-color: #FFCD01; }

.button-cyan {border: 2px solid #00CCF9; background: #08134B;
              font-size: 18px; font-weight: 700; padding: 0 12px 2px 12px; color: white;}
.button-pink {border: 2px solid #FE0096; background: #08134B;
              font-size: 18px; font-weight: 700; padding: 0 12px 2px 12px; color: white;}
.button-teal {border: 2px solid #00F6C3; background: #08134B;
              font-size: 18px; font-weight: 700; padding: 0 12px 2px 12px; color: white;}
.button-gold {border: 2px solid #FFCD01; background: #08134B;
              font-size: 18px; font-weight: 700; padding: 0 12px 2px 12px; color: white;}
.button-cyan:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #00CCF9, 0 0 15px #00CCF9, 0 0 20px #00CCF9; }
.button-pink:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #FF0096, 0 0 15px #FF0096, 0 0 20px #FF0096; }
.button-teal:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #00FF63, 0 0 15px #00FF63, 0 0 20px #00FF63; }
.button-gold:hover {  box-shadow: 0 0 5px #fff, 0 0 10px #FFCD01, 0 0 15px #FFCD01, 0 0 20px #FFCD01; }
    
/* definitons for tables of opening hours */
#tenant-opening-hours {
  color: white;
  font-size: 20px;
 }
  #tenant-opening-hours h3 {
    font-size: 1.375rem;
    font-weight: 400;
  }
  #tenant-opening-hours table {
    margin-left: auto;
    margin-right: auto;
  }
  #tenant-opening-hours table tbody tr {
    border-top: 1px solid #afafaf;
  }
  #tenant-opening-hours table tbody tr:first-child {
    border-top: none;
  }
  #tenant-opening-hours table tbody td, table tbody th {
    padding: .5rem 0;
  }
  #tenant-opening-hours table tbody td:nth-child(1) {
    text-align: left;
    padding-right: 24px;
  }
  #tenant-opening-hours table tbody td:nth-child(2) {
    text-align: right;
    padding-left: 24px;
  }
  table.center {
    margin-left: auto; 
    margin-right: auto;
  }
/* format from dropdown filters */  
  .gate-selector {
     background: #08134b;
     color: white;
     width: 240px;
     font-family: 'Montserrat', sans-serif;
     font-size: 16pt;
     font-weight: 400;
     border-color: #00CCF9;
     border-radius: 4px;
     padding: 2px 8px;
  }
/* buttons for cookies code page */
  .buttonEnable {
    background-color: #b6d62e; 
    padding:8px 16px 8px 16px;
    color: black; 
  }
  .buttonEnable:hover {
    background-color: #dae270;
  }
  .buttonDisable {
    background-color: #d01377;color:white;
    padding:8px 16px 8px 16px;
    color: white; 
  }
  .buttonDisable:hover {
    background-color: #eb83b5;
    color: black;
  }
/* link formatting */
  a {
    color: #00ccff;
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 66px;
    text-decoration: none;
  }
  a:hover {
    color: #88ccff;
    font-weight: 600;
    text-decoration: none;
  }
/* bullet / numbered lists */
ul {
    width: 88%;
}
ul li {
    list-style-type: square;
    color: white;
    width: 100%;
    text-align: left;
    font-weight: 300;
    margin-left: 24px;
}
ol {
    width: 88%;
}
ol li {
    color: white;
    width: 100%;
    text-align: left;
    font-weight: 300;
    margin-left: 24px;
}

figure {
  width: 100%;
}

figure iframe {
  aspect-ratio: 16/9;
  height: 100% !important;
  width: 100% !important;
}