/**
 * 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  */
  --cg-blue:                 #1075a0;   /*  37.9    0      0     19.2  */
  --water:                   #c5ebed;   /*  37.9    0      0     19.2  */
  --msu-green:               #12393a;   /*  37.9    0      0     19.2  */
  --keppel:                  #34a0a4;   /*  37.9    0      0     19.2  */
  --lapis-lazuli:            #1d75a0;   /*  37.9    0      0     19.2  */
  --mission-white:           #f7fcfc;   /*  37.9    0      0     19.2  */
  --nearly-white:            #f3f6ee;   /*  37.9    0      0     19.2  */
  --flake-white:             #e4e8dc;   /*  37.9    0      0     19.2  */
  --light-sea-green:         #00a6a6;   /* 100      0      0     35    */
  --dark-cyan:               #009595;   /* 100      0      0     41.6  */
/*--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 */


/*--hero-txtpanel:           var(--light-sea-green-85); */
  --nav-hv:                  var(--lapis-lazuli);           /* default is --brilliant-cornflower */
  --nav-bkg:                 var(--water);
  --nav-bkg-hv:              var(--keppel);
  --nav2-bkg:                var(--keppel);
  --navp-bkg:                var(--dark-cyan);
  --hm-cta2-bkg:             var(--light-cyan);
  --hm-cta3-bkg:             var(--mid-blue-green);
  --hm-cta-bkg-hv:           var(--light-sea-green);
/*--hm-cta-hv-txt:           var(--light-cyan); */              /* default is --white-color */
  --hl-txt-bkg:              var(--light-sea-green-90);
  --hl-txt-bkg-hv:           var(--light-sea-green-95);
/* --foot-bkg:               var(--light-sea-green); */         /* default is --dark-azure-2 */
  --mhighlt-arrow-bkg:       var(--light-cyan);
  --mhighlt-publ-bkg:        var(--mid-blue-green);
/*--mactn-blkgrid-bkg-hv:    var(--dark-cyan); */               /* default is --brilliant-cornflower */
  --mactn-blkgrid-bkg:       var(--light-sea-green-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-mega-nav > ul a {
    background-color: var(--nav2-bkg) !important;
}


.m-logo img {
  --logo-w: 329px;
  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 */
/* --------------- */

#hero .image {
  background-image: url('../../../sites/bio-carbon/files/images/biocarbon-hero.jpg'); 
  background-position: 50% 60%;
}