/**
 * 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
 **/



: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  */
  --light-sea-green:	     #00a6a6;   /* 100      0      0     35    */
  --dark-cyan:		     #009595;   /* 100      0      0     41.6  */

  --tangerine:		     #f78400;	/*   0     46.6  100      3.14 */
  --cinnabar-red:	     #ef3b2c;	/*   0     75.3   81.6    6.27 */
  --picton-blue:	     #6baed6;	/*  50.0   18.7    0     16.1  */
  --carnelian-red:	     #a50f15;	/*   0     90.9   87.3   35.3  */
  --cobalt-blue:	     #0a429c;	/*  93.6   57.7    0     38.8  */

/*--dark-grey-2:	     #222;*/    /*   0      0      0     86.7  */

/*--white-color:	     var(--grey98); */
  --light-sea-green-85:	     rgba(0, 160, 160, 0.85);	/* --light-sea-green, opacity 0.85 */
  --light-sea-green-90:	     rgba(0, 160, 160, 0.9);	/* --light-sea-green, opacity 0.9 */
  --light-sea-green-95:	     rgba(0, 160, 160, 0.95);	/* --light-sea-green, opacity 0.95 */
  --cyprus-green-95:         rgba(0, 64, 66, 0.95);     /* --cyprus-green, opacity 0.95 */
  --persian-green-95:        rgba(3, 150, 158, 0.95);   /* --persian-green, opacity 0.95 */
  --light-orange-95:         rgba(245, 185, 84, 0.95);  /* --light-orange, opacity 0.95 */
  --dark-orange-95:          rgba(227, 145, 61, 0.95);  /* --dark-orange, opacity 0.95 */
  --tangerine-85:	     rgba(247, 132, 0, 0.85);	/* --tangerine, opacity 0.85 */
  --tangerine-90:	     rgba(247, 132, 0, 0.9);	/* --tangerine, opacity 0.9 */
  --tangerine-95:	     rgba(247, 132, 0, 0.95);	/* --tangerine, opacity 0.95 */
  --picton-blue-85:	     rgba(107, 174, 214, 0.85);	/* --picton-blue, opacity 0.85 */
  --picton-blue-90:	     rgba(107, 174, 214, 0.9);	/* --picton-blue, opacity 0.9 */
  --picton-blue-95:	     rgba(107, 174, 214, 0.95);	/* --picton-blue, opacity 0.95 */
  --carnelian-red-90:	     rgba(165, 15, 21, 0.9);	/* --carnelian-red, opacity 0.9 */

/* Brand colours for FMRI */
  --aquamarine-90:           rgba(115, 236, 216, 0.9);  /* --aquamarine, opacity 0.9 */
  --sea-serpent-90:          rgba(94, 201, 214, 0.9);   /* --sea-serpent, opacity 0.9 */
  --maya-blue-90:            rgba(109, 196, 247, 0.9);  /* --maya-blue, opacity 0.9 */
  --celestial-blue-90:       rgba(78, 155, 194, 0.9);   /* --celestial-blue, opacity 0.9 */
  --teal-blue-90:        rgba(47, 114, 140, 0.9);    /* --teal-blue, opacity 0.9 */


/*--hero-txtpanel:	     var(--tangerine-85); */
  --nav-hv:		     var(--cobalt-blue);		/* default is --brilliant-cornflower */
  --nav-bkg:		     var(--teal-blue-90);
  --nav-bkg-hv:		     var(--celestial-blue-90);
  --nav2-bkg:		     var(--picton-blue);
  --navp-bkg:		     var(--dark-cyan);
  --hm-cta2-bkg:	     var(--light-cyan);
  --hm-cta3-bkg:	     var(--mid-blue-green);
  --hm-cta-bkg-hv:	     var(--tangerine);
/*--hm-cta-hv-txt:	     var(--light-cyan); */		/* default is --white-color */
  --hl-txt-bkg:		     var(--tangerine-90);
  --hl-txt-bkg-hv:	     var(--tangerine-95);
/* --foot-bkg:		     var(--cobalt-blue); */		/* default is --dark-azure-2 */
  --mhighlt-arrow-bkg:	     var(--light-cyan);
  --mhighlt-publ-bkg:	     var(--mid-blue-green);
  --mactn-blkgrid-bkg-hv:    var(--teal-blue-90);		/* default is --brilliant-cornflower */
  --mactn-blkgrid-bkg:	     var(--celestial-blue-90);
  --pgr-lnk-bkg-hgl:	     var(--mid-blue-green);
  --ssb-menu-bkg:	     var(--light-sea-green);
  --ssb-menu-lnk:	     var(--white-color);
/*--ssb-menu-lnk-hv:	     var(--mid-blue-green); */		/* default is --vivid-yellow */
}



.m-logo {
  --logo-w: 241px; }

.m-logo img {
  width: var(--logo-w);
  height: 85px; }
  @media (max-width: 767px) {
    .m-logo img {
      width: calc(60 / 85 * var(--logo-w));
      height: 60px; } }
  @media (max-width: 500px) {
    .m-logo img {
      width: calc(52 / 85 * var(--logo-w));
      height: 52px; } }

/* 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 */
/* --------------- */
/* original dimensions
.m-landing-hero {
  width: 100%;
  position: relative;
  padding-bottom: 60px;
  padding-top: calc(100vh - 272px);
  padding-top: 450px;
  min-height: 100vh;
  min-height: 790px;
  margin-top: -184px;
}

.m-landing-hero .title-content {
  position: relative;
  margin: -45px 0 10px;
  color: white;
  color: var(--white-color);
  float: left;
  width: calc(50% - 38px);
  max-width: 500px;
}*/

.m-landing-hero {
  width: 100%;
  position: relative;
  padding-bottom: 60px;
  padding-top: calc(100vh - 272px);
  padding-top: 250px; /*top of the hero*/
  min-height: 100vh;
  min-height: 190px;
  margin-top: -184px;
}
/*
.m-landing-hero .title-content {
  position: relative;
  margin: -5px 0 10px; /*top of the title text/
  color: white;
  color: var(--white-color);
  float: left;
  width: calc(50% - 38px);
  max-width: 500px;
}
*/
.m-logo {
  background-color: var(--white-color); }

.m-mega-nav > ul a {
  font-family: 'Swiss_721 W01 Bold';
  font-family: var(--bold-font);
  font-weight: normal;
  background: rgba(0, 9, 38, 0.7);
  background: rgba(19, 50, 77, 0.9);
  background-color: var(--sea-serpent-90);
  color: white;
  color: var(--white-color);
  padding: 10px 12px 7px;
  display: inline-block;
  font-size: 18px;
  font-size: var(--nav-FS);
  transition: all .2s;
}


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

.cc-by {
  color: rgba(250,250,250,0.75);
  font-size: 12.5px;
  line-height: 0px;
  position: sticky;
  bottom: 0;
  transform-origin: bottom right;
  transform: rotate(-90deg) translate(calc(100% + 5px), calc(var(--gap) - 9px));
}


#hero .image {
  background-image: url('../images/home-hero.jpg'); }

.m-landing-hero .text-content {
  background: var(--teal-blue-90);
}

}