/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%;
}

body, p {
  font-size: 1.5rem; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Avenir Next LT Pro', Avenir, Verdana, sans-serif;
  color: rgb(50, 50, 50);
}

@media screen and (min-width: 100px) {
  .wy-body-for-nav {
    max-width: 1400px;
    margin: auto;
    background: #f2f2f2;
  }
}

@media screen and (min-width: 1100px) {
  .wy-nav-content-wrap {
    background: #f2f2f2;
  }

  .wy-nav-side {
    left: unset;
  }
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
  #watermark {
    transform: rotate(330deg);
    transform: -webkit-transform: rotate(330deg);
  }
}

#watermark {
  position: fixed;
  top: 25%;
  height: 50%;
  left: 25%;
  width: 50%;
  z-index: 1000;
  background: transparent;
  color: #FFFFFF80;
  font-size: 30rem;
  transform: rotate(330deg);
  -webkit-transform: rotate(330deg);
  text-shadow: 2px 2px 8px #00000060;
  text-align: -webkit-center;
  text-align: center;
}

#burst-risk-monitor {
  max-width: 1000px;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6, details > summary {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  color: #0F204B
}
h1 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem; font-family: "Broader View"; text-transform: uppercase;}
h2 { font-size: 2.5rem; font-weight: 400; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem; font-family: 'Avenir Next LT Pro', Avenir, Verdana, sans-serif;}
h3 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem; font-family: 'Avenir Next LT Pro', Avenir, Verdana, sans-serif;}
h4, details > summary { font-size: 1.5rem; font-weight: 700; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem; font-family: 'Avenir Next LT Pro', Avenir, Verdana, sans-serif;}


.tagline {
  margin-top: 20rem;
  font-family: Avenir Demi;
  font-weight: 600;
  color: #3F9C35;
  text-transform: uppercase;
}
.subtitle {
  text-transform: uppercase;
}

p {
  margin-top: 0;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* We hyperlink a lot, so make it less intrusive */
a[href] {
  color: #034575;
  text-decoration: none;
  border-bottom: 1px solid #707070;
}

a:visited {
  color: #0F204B;
  border-bottom-color: #BBB;
}

/* Use distinguishing colors when user is interacting with the link */
a[href]:focus,
a[href]:hover {
  background: #f8f8f8;
  background: rgba(75%, 75%, 75%, .25);
  border-bottom-width: 3px;
  margin-bottom: -2px;
}

a[href]:active {
  color: #C00;
  border-color: #C00;
}


/* TOC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wy-side-nav-search {
  padding-top: 1.618em;
}

.wy-side-nav-search input[type=text] {
  border-color: #0F204B;
}

.wy-side-nav-search a, .wy-side-nav-search a:focus, .wy-side-nav-search a:hover {
  border: none;
  margin-bottom: initial;
}

.wy-nav-top {
  color: #0F204B;
  background-color: #f2f2f2;
}

.wy-side-nav-search {
  color: #0F204B;
  background-color: #f2f2f2;
}

  .wy-side-nav-search > div.version {
    color: #0F204B;
  }

.icon {
  margin-top: 20px;
}

.wy-nav-side {
  color: #0F204B;
  background-color: #f2f2f2;
}

.wy-menu-vertical a {
  color: #0F204B;
  border-bottom: none;
}


.wy-menu-vertical li.toctree-l1 a, .wy-menu-vertical li.toctree-l2 a, .wy-menu-vertical li.toctree-l3 a, .wy-menu-vertical li.toctree-l4 a, .wy-menu-vertical li.on a, .wy-menu-vertical li.current > a {
  color: #0F204B;
  border: none;
}

.wy-menu-vertical li.toctree-l1.current > a, .wy-menu-vertical li.toctree-l2.current > a, .wy-menu-vertical li.toctree-l3.current > a, .wy-menu-vertical li.toctree-l4.current > a {
  /*border-bottom: solid 1px #c9c9c9;
  border-top: solid 1px #c9c9c9;
  */
  background-color: #d6d6d6;
  border: none;
}

  .wy-menu-vertical li.toctree-l1.current > a:not(:hover):not(:focus), .wy-menu-vertical li.toctree-l2.current > a:not(:hover):not(:focus), .wy-menu-vertical li.toctree-l3.current > a:not(:hover):not(:focus), .wy-menu-vertical li.toctree-l4.current > a:not(:hover):not(:focus) {
    /*border-bottom: solid 1px #c9c9c9;
  border-top: solid 1px #c9c9c9;
  */
    color: #0F204B;
    border: none;
  }








  /*
 *
 *
 * -----------------------------------------------------------------------------
 *  BRAND FONTS
 * -----------------------------------------------------------------------------
 *
 *  Avenir is the DNV GL brand font used by the My DNV GL ecology of services.
 *
 *  The Broader View font, which is part of the brand guidelines, is not
 *  provided as part of the My DNV GL Styleguide as of now.
 *
 *  To save precious bandwidth, Avenir fonts for italics are not included in
 *  the stylesheets. Using italics is not recommended, but if needed at some
 *  rare occations, faux italics (generated by the browser) will be used.
 *
 *  The following font formats are offered:
 *
 *  WOFF : The preferred format
 *  EOT  : For IE8 and lower
 *  SVG  : For iOS4 and lower
 *  TTF  : For Android
 *
 */
@font-face {
  font-family: 'Avenir Next';
  src: url("../fonts/avenir/avenir-regular-lat-ext.eot?#iefix");
  src: url("../fonts/avenir/avenir-regular-lat-ext.eot?#iefix") format("eot"), url("../fonts/avenir/avenir-regular-lat-ext.woff") format("woff"), url("../fonts/avenir/avenir-regular-lat-ext.ttf") format("truetype"), url("../fonts/avenir/avenir-regular-lat-ext.svg") format("svg");
}

@font-face {
  font-family: 'Avenir Demi';
  src: url("../fonts/avenir-demi/avenir-demi-lat-ext.eot?#iefix");
  src: url("../fonts/avenir-demi/avenir-demi-lat-ext.eot?#iefix") format("eot"), url("../fonts/avenir-demi/avenir-demi-lat-ext.woff") format("woff"), url("../fonts/avenir-demi/avenir-demi-lat-ext.ttf") format("truetype"), url("../fonts/avenir-demi/avenir-demi-lat-ext.svg") format("svg");
  font-weight: bold;
}

@font-face {
  font-family: 'Broader View';
  font-weight: bold;
  src: url("../fonts/broaderview-medium/broaderview-medium-webfont.eot?#iefix");
  src: url("../fonts/broaderview-medium/broaderview-medium-webfont.eot?#iefix") format("eot"), url("../fonts/broaderview-medium/broaderview-medium-webfont.woff") format("woff"), url("../fonts/broaderview-medium/broaderview-medium-webfont.ttf") format("truetype"), url("../fonts/broaderview-medium/broaderview-medium-webfont") format("svg");
}

/*IE object-fit object-position workaround for IE and Edge on logo*/
.logo-extended {
  background-image: url(../images/Logo-Extended-RGB.svg);
  background-size: cover;
  background-position: 100% 0%;
  width: 100%;
  height: 60px;
  margin-top: 10px;
  margin-bottom: 10px;
  float: right;
}

/* DNVGL COLOURS*/
.dnvgl-color-p1, .dnvgl-color-skyblue, .dnvgl-color-p1-hover:hover, .dnvgl-color-skyblue-hover:hover {
  color: #333333 !important;
  background-color: #99D9F0 !important;
}

.dnvgl-color-p2, .dnvgl-color-landgreen, .dnvgl-color-p2-hover:hover, .dnvgl-color-landgreen-hover:hover {
  color: #FFFFFF !important;
  background-color: #3F9C35 !important;
}

.dnvgl-color-p3, .dnvgl-color-seablue, .dnvgl-color-p3-hover:hover, .dnvgl-color-seablue-hover:hover {
  color: #FFFFFF !important;
  background-color: #003591 !important;
}

.dnvgl-color-p4, .dnvgl-color-cyan, .dnvgl-color-p4-hover:hover, .dnvgl-color-cyan-hover:hover {
  color: #FFFFFF !important;
  background-color: #009FDA !important;
}

.dnvgl-color-p5, .dnvgl-color-cyan80, .dnvgl-color-p5-hover:hover, .dnvgl-color-cyan80-hover:hover {
  color: #FFFFFF !important;
  background-color: #33B2E1 !important;
}

.dnvgl-color-p6, .dnvgl-color-cyan60, .dnvgl-color-p6-hover:hover, .dnvgl-color-cyan60-hover:hover {
  color: #FFFFFF !important;
  background-color: #66C5E9 !important;
}

.dnvgl-color-p7, .dnvgl-color-cyan20, .dnvgl-color-p7-hover:hover, .dnvgl-color-cyan20-hover:hover {
  color: #333333 !important;
  background-color: #CCECF8 !important;
}

.dnvgl-color-p8, .dnvgl-color-darkblue, .dnvgl-color-p8-hover:hover, .dnvgl-color-darkblue-hover:hover {
  color: #FFFFFF !important;
  background-color: #0F204B !important;
}

.dnvgl-color-p9, .dnvgl-color-yellow, .dnvgl-color-p9-hover:hover, .dnvgl-color-yellow-hover:hover {
  color: #333333 !important;
  background-color: #FECB00 !important;
}

.dnvgl-color-p10, .dnvgl-color-orange, .dnvgl-color-p10-hover:hover, .dnvgl-color-orange-hover:hover {
  color: #333333 !important;
  background-color: #E98300 !important;
}

.dnvgl-color-p11, .dnvgl-color-purple, .dnvgl-color-p11-hover:hover, .dnvgl-color-purple-hover:hover {
  color: #FFFFFF !important;
  background-color: #6E5091 !important;
}

.dnvgl-color-p12, .dnvgl-color-red, .dnvgl-color-p12-hover:hover, .dnvgl-color-red-hover:hover {
  color: #FFFFFF !important;
  background-color: #C4262E !important;
}

.dnvgl-color-p13, .dnvgl-color-warmgrey, .dnvgl-color-p13-hover:hover, .dnvgl-color-warmgrey-hover:hover {
  color: #FFFFFF !important;
  background-color: #988F86 !important;
}

.dnvgl-color-p14, .dnvgl-color-black, .dnvgl-color-p14-hover:hover, .dnvgl-color-black-hover:hover {
  color: #FFFFFF !important;
  background-color: #000000 !important;
}

.dnvgl-color-p15, .dnvgl-color-white, .dnvgl-color-p15-hover:hover, .dnvgl-color-white-hover:hover {
  color: #333333 !important;
  background-color: #FFFFFF !important;