/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */


/**
 * ===================================
 * Add local styles to this stylesheet
 * ===================================
 *
 * (they may be applied to this theme without affecting other sub-themes)
 **/


/**
 * NOC Responsive theme uses Bootstrap v3.4.1
 * 
 * see https://getbootstrap.com/docs/3.4
 **/


/* Modified NOC theme 2023  */
/* ======================== */

:root {
  --hero-gap: 55px;
  --logo-offset: 39px;
  --logo-sq-sz: 126px;
  --footer-pad-top: 100px;
}

@media (max-width: 1150px) {
  :root {
    --footer-pad-top: 60px; } }
@media (max-width: 767px) {
  :root {
    --footer-pad-top: 40px; } }


/* HEADER AREA */

/* Add margin to top of hero area to accommodate logo offset */
.l-site-wrapper {
  padding-top: var(--hero-gap); }

/* Remove previous background and padding around logo */
.m-logo {
  background: none;
  padding: 0; }

/* Make new NOC logo same size and shift upwards (design by Giant Agency) */
.m-logo img {
  margin-top: min(var(--logo-offset), -1*var(--logo-offset));
  height: var(--logo-sq-sz);
  width: var(--logo-sq-sz); }

/* Menu styles */
.m-secondary-navigation {
  top: min(var(--hero-gap), -1*var(--hero-gap)); }


/* FOOTER AREA */

/* Override bottom margin, ensure enough space for new logo at small screen width */
@media (max-width: 500px) {
  #main {
    margin-bottom: 80px; } }

/* Make footer NOC logo same size as logo in hero area */
.m-site-footer .logo img {
  margin: 0;
  height: var(--logo-sq-sz);
  width: var(--logo-sq-sz); }

.m-site-footer .logo a#noc-logo {
  position: absolute;
  top: min(var(--logo-offset), -1*(var(--logo-offset)));
  z-index: 100; }

/* Needs extra padding sometimes?!! Some authenticated users to have this style set */
body[style^="padding-top: 6"] .m-site-footer .logo a#noc-logo,
body[style^="padding-top: 8"] .m-site-footer .logo a#noc-logo,
body[style^="padding-top: 10"] .m-site-footer .logo a#noc-logo {
  top: min(var(--footer-pad-top) + var(--logo-offset), -1*(var(--footer-pad-top) + var(--logo-offset))); }

.m-site-footer {
  display: grid; /* Needed for background colour fill to reach bottom of page (on GSNOCS and careers.noc.ac.uk/vacancies.html) */
  overflow: visible; }

/* Add top margin to logo text */
.m-site-footer .logo p:first-of-type {
  margin-top: calc(100px - var(--footer-pad-top)); }

.m-site-footer .logo a:hover,
.m-site-footer .social-networks li a:hover {
  opacity: 1.0; } /* don't fade on hover... was 0.7 */

.m-site-footer .email-signup h2 img {
  margin-left: 0; }

/* Small print */
.m-site-footer .secondary-footer .legal p {
  opacity: 1.0; }

.m-site-footer .secondary-footer .legal .navigation li a {
  opacity: 0.6; }



/* Modify local colours in NOC theme 2023 */

:root {

/*					     C      M      Y      K    */
/*--grey98:		#fafafa;*/	/*   0      0      0      1.96 */
  --light-cyan:		#ccecec;	/*  13.6    0      0      7.45 */
  --mid-blue-green:	#80cece;	/*  37.9    0      0     19.2  */
  --algae-green:	#6BE0B0;	/* 100      0      0     35    */
  --dark-cyan:		#009595;	/* 100      0      0     41.6  */
/*--dark-grey-2:	#222;*/		/*   0      0      0     86.7  */
  --sea-blue:		#247094;	/*  75.7   24.3    0     42.0  */
  --bright-mint:	#75F0A1;	/*   1.3    0     32.9    5.9  */
  --cobalt-blue:	#0a429c;	/*  93.6   57.7    0     38.8  */
  --black:		#010101;
  --white:		#fdfdfd;
  --very-light-gold:	#ffface;
  --yellow:		#ffe50a;
  --dark-blue:		#0563C1;

/*--white-color:		var(--grey98); */
  --sea-blue-85:		rgba(36, 112, 148, 0.85);	/* --sea-blue, opacity 0.85 */
  --sea-blue-90:		rgba(36, 112, 148, 0.9);	/* --sea-blue, opacity 0.9 */
  --sea-blue-95:		rgba(36, 112, 148, 0.95);	/* --sea-blue, opacity 0.95 */

  --innovation-yellow:		var(--yellow);
  --innovation-yellow-85:	rgba(255, 229, 10, 0.85);	/* --innovation-yellow, opacity 0.85 */
  --innovation-yellow-90:	rgba(255, 229, 10, 0.9);	/* --innovation-yellow, opacity 0.9 */
  --innovation-yellow-95:	rgba(255, 229, 10, 0.95);	/* --innovation-yellow, opacity 0.95 */


  --hero-txtpanel:		var(--innovation-yellow-90);
  --hero-bkg:			var(--white);
  --nav-hv:			var(--cobalt-blue);		/* default is --brilliant-cornflower */
  --nav-bkg:			var(--innovation-yellow-90);
  --nav-bkg-hv:			var(--innovation-yellow);
  --nav2-bkg:			var(--innovation-yellow);
  --navp-bkg:			var(--innovation-yellow-85);
  --hm-cta2-bkg:		var(--white);
  --hm-cta3-bkg:		var(--algae-green);
  --hm-cta-bkg-hv:		var(--algae-green);
/*--hm-cta-hv-txt:		var(--light-cyan); */		/* default is --white-color */
  --hl-txt-bkg:			var(--innovation-yellow-90);
  --hl-txt-bkg-hv:		var(--innovation-yellow-95);
  --foot-bkg:			var(--very-light-gold);		/* default is --dark-azure-2 */
  --foot-txt:			var(--black);
  --foot-lnk-hv:		var(--cobalt-blue);
  --foot-lgl-txt:		var(--black);
  --foot-lgl-txt-hv:		var(--cobalt-blue);
  --mhighlt-arrow-bkg:		var(--light-cyan);
  --mhighlt-publ-bkg:		var(--innovation-yellow);
  --mactn-blkgrid-bkg-hv:	var(--algae-green);		/* default is --brilliant-cornflower */
  --mactn-blkgrid-bkg:		var(--innovation-yellow);
  --pgr-lnk-bkg-hgl:		var(--algae-green);
  --ssb-menu-bkg:		var(--algae-green);
  --ssb-menu-lnk:		var(--white-color);
  --acdn-hd-bkg:		var(--innovation-yellow);
  --acdn-hd-bkg-hv:             var(--innovation-yellow-85);
  --acdn-hd-txt-open:		var(--black);
  --acdn-hd-bkg-open: 		var(--very-light-gold);	
  --lnk:			var(--dark-blue);
/*--ssb-menu-lnk-hv:		var(--mid-blue-green); */	/* default is --vivid-yellow */
}

.m-logo{
 background: none;
}



.m-action-list ul a:hover {
  background: var(--algae-green);
}
.m-cta-content{
 background: var(--innovation-yellow-90);
}
.m-link-list {
  border: 4px solid var(--algae-green); 
}

.m-link-list h2{
  color: var(--algae-green);
}

.m-fixed-bar .back-to-top button {
  background: url(../img/icon-back-to-top-dark.svg); }

/* Addition smaller size to fit on screen */
/*
  @media (max-width: 375px) {
    .m-logo img {
      width: calc(48 / 85 * var(--logo-w));
      height: 48px; } }
*/



/* Other CSS below */
/* --------------- */

/*#hero .image {
  background-: url('/files/images/innovations_hero_1.png'); }*/





#hero .image.loaded {
  background-image: url('../img/BATHYMETRY-Pattern.png');
  background-position: 50% 50%;
  background-size: cover; 
  background-color: var(--foot-bkg);

}


.m-mega-nav > ul a {
  font-family: var(--bold-font);
  font-weight: normal;
  color: black;
  padding: 10px 12px 7px;
  display: inline-block;
  font-size: var(--nav-FS);
  transition: all .2s;
}

.m-mega-nav > ul li.is-hovered a {
 text-decoration: underline;
}


.m-secondary-navigation .menu.nav li a {
   font-family: var(--bold-font);
  font-weight: normal;
  color: black;
  padding: 10px 12px 7px;
  display: inline-block;
  font-size: var(--nav-FS);
  transition: all .2s;
}


.m-secondary-navigation .menu.nav li a:hover{
 text-decoration: underline;
}

.m-index-hero .image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
background: none;
  opacity: 0.22;
}

.m-index-hero .title-content h1 {
  text-shadow: 1px 1px 8px #022548;
}



.m-site-footer a {
  color: #0563C1;
}


/* FOOTER AREA */

/* Horizontal line colour */
.m-site-footer .primary-footer + .secondary-footer {
  border-top: 2px solid rgba(2, 2, 2, 0.08); }