/**
 * 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 */
  --vivid-cerulean:	     #00b5ff;	/* 100    29.02    0      0    */
  --light-bluish-grey:	     #c4c5dc;	/*  10.9  10.5     0     13.7  */
  --cornflower-blue:	     #368ecd;	/*  73.66  30.73   0     19.61 */
  --greyish-blue:	     #8b8cb9;	/*  24.9  24.3     0     27.5  */
  --greyish-blue-2:	     #7a7bae;	/*  29.9  29.3     0     31.8  */
  --greyish-blue-3:	     #6969a3;	/*  35.6  35.6     0     36.1  */
  --greyish-blue-4:	     #5e5e9b;	/*  39.4  39.4     0     39.2  */
  --black-col:		     #020202;	/*   0      0      0     99.2  */
/*--dark-grey-2:	     #222;*/	/*   0      0      0     86.7  */

/*--white-color:	     var(--grey98);*/
  --greyish-blue-4-90:	     rgba(84, 94, 155, 0.9);	/* --greyish-blue-4, opacity 0.9 */
  --greyish-blue-4-95:	     rgba(84, 94, 155, 0.95);	/* --greyish-blue-4, opacity 0.95 */


  --nav-bkg:		     var(--greyish-blue-4-90);
  --nav-bkg-hv:		     var(--greyish-blue-3);
  --nav2-bkg:		     var(--greyish-blue-4);
  --navp-bkg:		     var(--greyish-blue-3);
  --hm-cta2-bkg:	     var(--light-bluish-grey);
  --hm-cta3-bkg:	     var(--greyish-blue);
  --hm-cta-bkg-hv:	     var(--greyish-blue-4);
/*--hm-cta-hv-txt:	     var(--light-bluish-grey); */	/* default is --white-color */
  --hl-txt-bkg:		     var(--greyish-blue-4-90);
  --hl-txt-bkg-hv:	     var(--greyish-blue-4-95);
  --foot-lnk:		     var(--light-cornflower-grey-4);
  --foot-txt:		     var(--white-color);
  --foot-bkg:		     var(--greyish-blue-4);
  --mhighlt-arrow-bkg:	     var(--light-bluish-grey);
  --mhighlt-publ-bkg:	     var(--greyish-blue);
  --mactn-blkgrid-bkg-hv:    var(--greyish-blue-3);
  --mactn-blkgrid-bkg:	     var(--greyish-blue-4-90);
  --pgr-lnk-bkg-hgl:         var(--greyish-blue);
  --ssb-menu-bkg:	     var(--greyish-blue-4);
  --ssb-menu-lnk:	     var(--white-color);
/*--ssb-menu-lnk-hv:	     var(--greyish-blue); */		/* default is --vivid-yellow */
}


  --hero-txtpanel:	     var(--dark-cornflower-95);
  --nav-hv:		     var(--light-cornflower);		/* default is --brilliant-cornflower */
    
  --nav-bkg:		     var(--light-blue-90);
  --nav-bkg-hv:		     var(--flood-blue-90);
  --nav2-bkg:		     var(--light-blue-90);
  --navp-bkg:		     var(--light-blue-90);
  --hm-cta2-bkg:	     var(--light-cyan);
  --hm-cta3-bkg:	     var(--mid-blue-green);
  --hm-cta-bkg-hv:	     var(--light-blue);
/*--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-blue); */		/* default is --dark-azure-2 */
  --mhighlt-arrow-bkg:	     var(--light-cyan);
  --mhighlt-publ-bkg:	     var(--mid-blue-green);
  --mactn-blkgrid-bkg-hv:    var(--flood-blue);	/* default is --brilliant-cornflower */
  --mactn-blkgrid-bkg:	     var(--nav-bkg);
  --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 */
  --acdn-hd-bkg:	     var(--light-blue);
 --acdn-hd-bkg-alt:	     var(--light-blue);
  --acdn-hd-bkg-hv:          var(--sea-blue);
  --acdn-hd-bkg-open:	     var(--light-blue);
  --acdn-hd-txt-open:	     var(--white);
 --acdn-hd-bkg-alt-hv:       var(--sea-blue);
    
}




.m-logo {
  --logo-w: 285px;
/*  background-color: var(--grey95-90);*/
}
.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 */
/* --------------- */

m-mega-nav > ul a {
    font-family: var(--bold-font);
    font-weight: normal;
    background-color: var(--nav-bkg);
    display: inline-block;
    font-size: var(--nav-FS);
    transition: all .2s;
}

.m-mega-nav > ul a {
    color: var(--nav-txt);
}


#hero .image {
  background-image: url('../images/page_bg.jpg'); background-position: 0% 50%; }

/*.content a {text-decoration: underline;}*/

/*.site-navigation li ul li a {color: #fff; background-color: var(--nav-bkg);}*/


.m-link-list {
    border: 4px solid #53DBA2;
    padding: 40px;
}
.m-cta-content {
    background: var(--green);
    /* color: white; */
    color: var(--white-color);
    padding: 30px;
    line-height: 1.6;
    font-size: var(--sm-font-size);
}


.bibcite-reference-table th {
    font-family: var(--bold-font);
    font-weight: normal;
    background-color: var(--nav-bkg);
    width: 13%;
    color: white;
    text-align: center;
}

.bibcite-reference-table tr {

    border: 1px solid black;
}


.bibcite-reference-table td, th {
    padding: 5px;
}



.m-action-list > ul li.is-hovered a {
    color: white;
    background: var(--nav-bkg-hv);
}


th {
    font-family: var(--bold-font);
    font-weight: normal;
    background-color: var(--nav-bkg);
}

.m-mega-nav > ul li.is-hovered a {
    color: white;
    background: var(--nav-bkg-hv);
}

.m-mega-nav .area .area--display-standard > ul li.is-hovered a {
    color: white;
    background: var(--nav-bkg-hv);
}

.m-cta-list.m-cta-list ul li a {
	background: var(--green);
}


.m-action-list ul a {
	background: var(--green);
}

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

.m-fixed-bar .wrap {
  height: 60px;
  padding: 6px 100px;
  position: relative;
  background-color: var(--nav-bkg);
}

.m-mega-nav > ul a {
    color: white;
}


hr {
    border-top: 3px solid #ccc;
    
}
.m-article h2 {
    color: #51b9e0;
}

[id^=accordion] .panel-heading .accordion-toggle {
    background-color: var(--sea-blue);
}


.partnerimage {
  display: block;
  width: 25%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #6ed0e6;
}

.container:hover .overlay {
  opacity: 1;
}

.imagetext {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


.center 
{
  text-align:center;
}


.description p
{
  font-size: 18px;
}

.largewhiteText {
    color: white;
    font-size: 26px;
    font-weight: 400;
	margin-top: 1px
}

.largewhiteText a:not([class]){
    color: white !important;
    font-size: 26px;
    font-weight: 400;
	margin-top: 1px
}

.largewhiteText  a:hover {
color: #838383 !important;}
  



.largeBlueText {
    color: #7ec2ef;
    font-size: 16px;
    font-weight: 700;
}

.largeDarkBlueText {
    color: #5680b9;
    font-size: 16px;
    font-weight: 700;
}
.largeText {
    font-size: 16px;
    font-weight: 500;
}

/* text colours */

.greyText {
    color: #eee;
    font-weight: 700;
}

.blueText {
    color: #7ec2ef;
    font-weight: 700;
}

.darkBlueText {
    color: #5680b9;
    font-weight: 700;
}




/* Front page lander boxes - dark blue background, sky blue links, white text */

.frontpage .landerBox .outer-outer-container {
	background-color: #101419;
	padding: 15px;
}

.frontpage .landerBox .outer-container:after {
	padding-top: 66.66%;
}			/* Override image ratio with 3:2 */

.frontpage .text h3 a,
.frontpage .text h3 a:visited,
.frontpage .text h3 a:focus,
.frontpage .text h3 a:hover {
	color: #fff;
}

.frontpage .text h3 {
	padding-top: 12.5px;
}

.frontpage .text p {
	color: #e1e1e1;
}





.bigBottomMargin {
    margin-bottom: 20px !important;
}
.extraBigBottomMargin {
    margin-bottom: 60px !important;
}
.bigTopMargin {
    margin-top: 20px !important;
}
.extraBigTopMargin {
    margin-top: 60px !important;
}

.well-blue {
    min-height: 20px;
	margin-top: 5px;
    margin-bottom: 20px;
    background-color: #031934;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}
.well-blue-light {
    min-height: 20px;
    padding: 15px;
	margin-top: 5px;
    margin-bottom: 20px;
    background-color: #116491;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
	
}
.well-image {
margin-top: 1px;
margin-bottom: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
margin-left: 7px;
margin-right: 7px;
}



.well-white {
    min-height: 20px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.well-blue-opacity {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: rgba(126, 194, 239, 0.75);
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}
.well-dkblue-opacity {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: rgba(86, 128, 185, 0.6);
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}




.innerFooter h2, .innerFooter h3 {
    border-bottom: 1px dotted #fe7c00;
    color: #5680b9;
    padding-bottom: 0.2em;
}

.jumbotron-caption, .jumbotron-caption2 {
   top: 100px;
}

.fullScreenWidth {
	overflow: hidden;
}

/* Remove padding so breadcrumbs and/or jumbtron meet the navbar */
.trans.noCrsl:not.main-container,
.trans.noBrdc:not.main-container,
.trans:not([class~="noCrsl"]):not([class~="noBrdc"]) .main-container {
	padding-top: 1; 

}
.trans.noBrdc.noCrsl{   
 margin-top: 2px;
}

/* Put in bottom margin when logged in and there's no breadcrumbs */
.logged-in .noBrdc #carouseljumbotron {
	margin-bottom: 10px;
} 
.breadcrumb-bk {
    background-color: transparent;
    margin-bottom: 10px;
}


.navbar-default .navbar-nav > li {
    background: rgba(6,38,54,0.79);
    float: left;
    margin-left: 0;
    margin-right: -4px;
}



.m-highlighted-publications ul.item-list a, .m-highlighted-publications > ul a {
  color: #222;
  background: #e2edf8;
  display: block;
  padding: 20px;
  height: 100%;
  transition: all .2s;
 padding-bottom: 50px;
 
}

 .m-highlighted-publications > ul a:hover {
  color: white;
  background: #4db3e6;
}


.m-highlighted-publications ul.item-list a:hover, 
  color: var(--white-color);
  background: var(--mhighlt-publ-bkg);
}