/*  ==========================================================================
  Main styles for TalkTalk Group
  Author: Alchemy Digital
  ========================================================================== */

@import url("https://use.typekit.net/rkq0akh.css");

/*
//      Fonts via Typekit.
//      font-weights-available: 300, 400, 500, 600;
*/

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

body{
  font-family: "omnes-pro", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
  margin: 0;
  padding: 0;
  color: #394347;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  padding-top: 4em;
}

.wrapper{ overflow: hidden; }

@media only screen and (min-width: 1000px){
  body{ padding-top: 4.5em; }
}

@media only screen and (min-width: 1800px){
  body{ background: #394347; background:url(img/stripe.png) repeat center top; }
  .wrapper{ width: 1800px; margin:0 auto; background: #fff; }
}

/*  ==========================================================================
  Base typography
  ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .25em;
  line-height: 1.2;
  font-weight: 600;
}

h1, .h1 { margin: 0 0 .2em; font-weight: 300; }
h2, .h2 { font-weight: 300; }


.fontsize--massive{ font-size: 38px; line-height: 1.1; }
h1, .fontsize--huge{ font-size: 32px; line-height: 1.1; }
h2, .fontsize--large{ font-size: 26px; line-height: 1.1; }
h3, .fontsize--med{ font-size: 20px; line-height: 1.3; font-weight: 500; }
body, h4, .fontsize--reg{ font-size: 16px; }
h5, .fontsize--sml{ font-size: 14px; }
h6, .fontsize--tiny{ font-size: 12px; }

strong, b,
.font--bold,
.font--semi,
.font--semibold{ font-weight: 600; }
.font--med{ font-weight: 500; }
.font--reg{ font-weight: 400; }
.font--light{ font-weight: 300; }

.case--lower{ text-transform: lowercase; }
.case--upper{ text-transform: uppercase; }

.text-align--center{ text-align: center; }
.text-align--left{ text-align: left; }
.text-align--right{ text-align: right; }

.deviceheading{ margin: 0; position: relative; }
.deviceheading:after{
  content: ' ';
  display: block;
  width: 1.25em;
  border-bottom: solid 1px rgba(28,78,157,.33);
  margin: .33em 0;
}

@media only screen and (min-width:550px){
  .fontsize--massive{ font-size: 44px; }
  h1, .fontsize--huge{ font-size: 36px; }
  h2, .fontsize--large{ font-size: 32px; }
  h3, .fontsize--med{ font-size: 22px; }
  body, h4, .fontsize--reg{ font-size: 16px; }
  h5, .fontsize--sml{ font-size: 14px; }
  h6, .fontsize--tiny{ font-size: 12px; }
}

@media only screen and (min-width:700px){
  .fontsize--massive{ font-size: 54px; }
  h1, .fontsize--huge{ font-size: 44px; }
  h2, .fontsize--large{ font-size: 36px; }
  h3, .fontsize--med{ font-size: 24px; }
  body, h4, .fontsize--reg{ font-size: 17px; }
  h5, .fontsize--sml{ font-size: 15px; }
  h6, .fontsize--tiny{ font-size: 12px; }
}

@media only screen and (min-width:1000px){
  .fontsize--massive{ font-size: 60px; }
}

@media only screen and (min-width:1200px){
  .fontsize--massive{ font-size: 68px; }
  h1, .fontsize--huge{ font-size: 52px; }
  h2, .fontsize--large{ font-size: 40px; }
  h3, .fontsize--med{ font-size: 26px; }
  body, h4, .fontsize--reg{ font-size: 18px; }
  h5, .fontsize--sml{ font-size: 16px; }
  h6, .fontsize--tiny{ font-size: 12px; }
}

@media only screen and (min-width:1400px){
  .fontsize--massive{ font-size: 72px; }
  h1, .fontsize--huge{ font-size: 60px; }
  h2, .fontsize--large{ font-size: 45px; }
  h3, .fontsize--med{ font-size: 27px; }
  body, h4, .fontsize--reg{ font-size: 18px; }
  h5, .fontsize--sml{ font-size: 16px; }
  h6, .fontsize--tiny{ font-size: 13px; }
}

@media only screen and (min-width:1600px){
  .fontsize--massive{ font-size: 84px; }
  h1, .fontsize--huge{ font-size: 66px; }
  h2, .fontsize--large{ font-size: 48px; }
  h3, .fontsize--med{ font-size: 28px; }
  body, h4, .fontsize--reg{ font-size: 19px; }
  h5, .fontsize--sml{ font-size: 16px; }
  h6, .fontsize--tiny{ font-size: 14px; }
}


ul,
ol{ margin: 0 0 1em; padding: 0; }

p{ margin: 0 0 1em; }

.dropcap{
  display: block;
  font-size: 5em;
  font-weight: 300;
  padding: 0 .25em 0 0;
  color: #394347;
  float: left;
  line-height: .9;
  margin-top: -.07em;
}

/*  ==========================================================================
  colors
  ========================================================================== */

.color--white{ color: #fff; }
.color--black{ color: #394347; }
.color--grey{ color: #888; }
.color--white .color--grey { color: #fff; opacity: .66; }

.color--blue{ color: #394347; }
.color--green{ color: #009f65; }
.color--red{ color: #E52437; }
.color--orange{ color: #ec6908; }
.color--purple{ color: #7d3b8e; }
.color--yellow{ color: #f7f410; }
.color--cyan{ color: #87ebff; }
.color--darkgrey{ color: #394347; }

.bg--white{ background-color: #fff; }
.bg--black{ background-color: #394347; }
.bg--grey{ background-color: #888; }

.bg--blue{ background-color: #394347; }
.bg--green{ background-color: #009f65; }
.bg--red{ background-color: #E52437; }
.bg--orange{ background-color: #ec6908; }
.bg--purple{ background-color: #7d3b8e; }
.bg--yellow{ background-color: #f7f410; }
.bg--darkgrey{ background-color: #394347; }
.bg--cyan{ background-color: #87ebff; }

.opacity--100{ opacity: 1; }
.opacity--75{ opacity: .75; }
.opacity--66{ opacity: .66; }
.opacity--50{ opacity: .5; }
.opacity--33{ opacity: .33; }
.opacity--25{ opacity: .25; }


/*  ==========================================================================
  base links, buttons, interaction colors
  ========================================================================== */


a{
    color: inherit;
  text-decoration: none;
}

/* .linkline{ border-bottom: solid 1px rgba(30,78,157,.33); }
a:hover .linkline{ border-color: rgba(30,78,157,1); } */

.linkline {
  background-image: linear-gradient(90deg, rgba(247, 244, 168, 0.66) 0%, rgba(247, 244, 168, 0.66) 50%, #f7f410 50%, #f7f410 100%);
  background-size: 200% 0.25em;
  background-position: 0 bottom;
  background-repeat: repeat-x;
  -webkit-transition: background-position 150ms ease-out 0ms;
  -moz-transition: background-position 150ms ease-out 0ms;
  transition: background-position 150ms ease-out 0ms;
}
a:hover .linkline {
  background-position: -100% bottom;
  background-size: 200% 0.5em;
}

/* .linkline{ border-bottom: solid 1px rgba(135, 235, 255,.5); }
a:hover .linkline{ border-color: rgba(135, 235, 255, 1); } */



.color--white a{ color: #fff; }

a .fa{
  padding: 0 0 0 .75em;
  font-size: .88em;
  -webkit-transition: -webkit-transform 150ms ease-out 0ms, opacity 150ms ease-out 0ms;
     -moz-transition:    -moz-transform 150ms ease-out 0ms, opacity 150ms ease-out 0ms;
      transition:     transform 150ms ease-out 0ms, opacity 150ms ease-out 0ms;
}
a:hover .fa{ -webkit-transform: translate(.5em, 0); -moz-transform: translate(.5em, 0); transform: translate(.5em, 0); }
a:hover .fa--left{ -webkit-transform: translate(-.5em, 0); -moz-transform: translate(-.5em, 0); transform: translate(-.5em, 0); }
a.no-animate:hover .fa,
.no-animate:hover a .fa{ -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); }
a .fa--left{ padding: 0 .75em 0 0; }
a .fa--nopad{ padding: 0; }

/* .color--white .linkline{ border-bottom: solid 1px rgba(247,244,16,.33); }
.color--white a:hover .linkline{ border-color: rgba(247,244,16,.75);  }
*/

.color--white .linkline {  background-image: linear-gradient(90deg, rgba(57, 67, 71, 0.15) 0%, rgba(57, 67, 71, 0.15) 50%, rgba(57, 67, 71, 0.75) 50%, rgba(57, 67, 71, 0.75) 100%); }


.btn{
  background: none;
  border: solid 1px rgba(30,78,157,.15);
  border-radius: 2px;
  display: inline-block;
  margin: 0 .5em .5em 0;
  padding: 1em 1.5em;
  color: #1e4e9d;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  -webkit-transition: color 150ms ease-out 0ms;
  -moz-transition: color 150ms ease-out 0ms;
  transition: color 150ms ease-out 0ms;
}

.btn:before{
  content: ' ';
  background: #1e4e9d;
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  -webkit-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  -moz-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
}
.btn:hover{ color: #fff; box-shadow: 0 0 50px rgba(0,0,0,.25); }
.btn:hover:before{ width: 100%; }
.btn.readyforright:before{
  left: auto; right: 0;
}

.btn span{
  border: none;
  position: relative;
  z-index: 2;
}

.btn--line{
  border: solid 1px rgba(30,78,157,.15);
  color: #1e4e9d;
}

.color--white .btn--line{
  border: solid 1px rgba(255,255,255,.2);
  color: #fff;
}

.color--white .btn--line:hover{
  color: #1e4e9d;
}

.color--white .btn--line:before{ background: #fff; }

.btn .fa{ padding: 0 0 0 1em; }
.btn .fa--left{ padding: 0 1em 0 0; }
.btn .fa--nopad{ padding: 0; }

.btn .linkline{ border: none; background: none; }

.btn--blue{ background: #1d4e9d; color: #fff; }
.btn--blue:hover .linkline{color: #1d4e9d;}
.btn--blue:before{ background: #fff; }


.btn--green{
  background: #469C6A;
  border: solid 1px #469C6A;
  border-radius: 4px;
  display: inline-block;
  margin-top: 20px;
  padding: 1em 1em;
  color: #fff;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  -webkit-transition: color 150ms ease-out 0ms;
  -moz-transition: color 150ms ease-out 0ms;
  transition: color 150ms ease-out 0ms;  
}

.btn--green .linkline{
	background: none;
}

.btn--green:before{
  content: ' ';
  background: transparent;
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  -webkit-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  -moz-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
}
.btn--green:hover{ color: #394347; box-shadow: 0 0 50px rgba(0,0,0,.25); border-color: #394347; background: transparent;}
.btn--green:hover::before{ width: 100%; }
.btn--green span {
    border: none;
    position: relative;
    z-index: 2;
}


.color--white .btn--blue:before{ background: #fff; }
.color--white .btn--blue:hover{ color: #1d4e9d; }


/*  ==========================================================================
  Basic layout classes
  ========================================================================== */

.bd {
  margin: 0 7.14%;
  position: relative;
  min-height: 1px;
}

.bd:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.padding--top { padding-top: 10%; }
.padding--bottom { padding-bottom: 10%; }
.padding--top-half { padding-top: 7%; }
.padding--bottom-half { padding-bottom: 7%; }
.padding--top-em { padding-top: 1em; }
.padding--bottom-em { padding-bottom: 1em; }

.margin--top { margin-top: 10%; }
.margin--bottom { margin-bottom: 10%; }
.margin--top-half { margin-top: 7%; }
.margin--bottom-half { margin-bottom: 7%; }
.margin--top-em { margin-top: 1em; }
.margin--bottom-em { margin-bottom: 1em; }

.margin--none{ margin: 0; }

@media only screen and (min-width: 700px){
  .padding--top { padding-top: 8.5%; }
  .padding--bottom { padding-bottom: 8.5%; }
  .padding--top-half { padding-top: 5%; }
  .padding--bottom-half { padding-bottom: 5%; }
  .padding--top-em { padding-top: 1em; }
  .padding--bottom-em { padding-bottom: 1em; }

  .margin--top { margin-top: 8.5%; }
  .margin--bottom { margin-bottom: 8.5%; }
  .margin--top-half { margin-top: 5%; }
  .margin--bottom-half { margin-bottom: 5%; }
  .margin--top-em { margin-top: 1em; }
  .margin--bottom-em { margin-bottom: 1em; }
}

@media only screen and (min-width: 1000px){
  .padding--top { padding-top: 7.14%; }
  .padding--bottom { padding-bottom: 7.14%; }
  .padding--top-half { padding-top: 3.5%; }
  .padding--bottom-half { padding-bottom: 3.5%; }

  .margin--top { margin-top: 7.14%; }
  .margin--bottom { margin-bottom: 7.14%; }
  .margin--top-half { margin-top: 3.5%; }
  .margin--bottom-half { margin-bottom: 3.5%; }
  .margin--top-em { margin-top: 1em; }
  .margin--bottom-em { margin-bottom: 1em; }
}


@media only screen and (min-width: 1200px){
  .padding--top { padding-top: 5%; }
  .padding--bottom { padding-bottom: 5%; }
  .padding--top-half { padding-top: 3.5%; }
  .padding--bottom-half { padding-bottom: 3.5%; }

  .margin--top { margin-top: 5%; }
  .margin--bottom { margin-bottom: 5%; }
  .margin--top-half { margin-top: 3.5%; }
  .margin--bottom-half { margin-bottom: 3.5%; }
  .margin--top-em { margin-top: 1em; }
  .margin--bottom-em { margin-bottom: 1em; }
}


/*  ==========================================================================
  base nav
  ========================================================================== */

nav ul{ margin: 0; padding: 0; list-style: none; }

.inlinenavlist{
  margin: 0 -.75em;
}

.inlinenavlist li{
  display: inline-block;
  margin: 0;
  padding: 0;
}

.inlinenavlist a{
  display: block;
  padding: 0 .75em;
}


/*  ==========================================================================
  siteheader
  ========================================================================== */

.siteheader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
    box-shadow: 0 1px 0 rgba(57,67,71,.15);
}

.siteheaderbody{
  position: relative;
  z-index: 1;
  color: #394347;
}

.siteheaderbody:before{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-out 0ms, color 250ms ease-out 0ms;
     -moz-transition: opacity 250ms ease-out 0ms, color 250ms ease-out 0ms;
      transition: opacity 250ms ease-out 0ms, color 250ms ease-out 0ms;
}
/*
.siteheaderbody:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(57,67,71,.15);
  height: 1px;
  z-index: 1;
  -webkit-transition: background-color 250ms ease-out 0ms;
     -moz-transition: background-color 250ms ease-out 0ms;
      transition: background-color 250ms ease-out 0ms;
} */

.siteheader__bd{
  height: 4em;
}

.siteheaderlogo{
  margin: 0 0 0;
  width: 11em;
    font-size: 1em;
  position: absolute;
  top: .75em;
  left: 7.14%;
    bottom: .75em;
  z-index: 3;
  overflow: hidden;
}

.siteheaderlogo__link{
  display: block;
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  margin-left: -1px;
  background-image: url(img/sitelogo.grey.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.no-svg .siteheaderlogo__link{ background-image: url(img/sitelogo.grey.png); }

/*
// siteheaderneg
*/

.siteheadercollapse{ padding-top: 0; }
.siteheaderneg .siteheaderlogo__link{ background-image: url(img/sitelogo.nu-white.svg); }
.no-svg .siteheaderneg .siteheaderlogo__link{ background-image: url(img/sitelogo.nu-white.png); }
.siteheaderneg .siteheaderbody,
.siteheaderneg .siteheaderbody a{  color: #fff;  }
.siteheaderneg .siteheaderbody:after{ background: rgba(255,255,255,.2); }
.siteheaderneg .siteheader{ box-shadow: 0 1px 0 rgba(255,255,255,.2); }
.siteheaderneg .siteheaderbody:before{ opacity: 0; }
.siteheaderneg .sitetoolslist__item{ border-color: rgba(255,255,255,.2); }
body.siteheaderneg .sitenav li:after{ background: #fff; }



/*  ==========================================================================
  sitetools
  ========================================================================== */

.sitetools{
  position: absolute;
  right: -8.3%;
  top: 0;
  line-height: 4em;
}
.sitetools ul{ padding: 0; margin: 0; }
.sitetoolslist__item{
  display: block;
  position: absolute;
  top: 0;
  z-index: 1;
  border-left: solid 1px rgba(57,67,71,.15);
}

.sitetoolslist__item--search{ right: 0; z-index: 2; }
.sitetoolslist__item--nav{ right: 4em; }

.sitetools a{
  display: block;
  padding: 0 .88em;
}

.sitetools a:hover{ background: rgba(28,78,157,.075);}

.sitetools .sitetool__icon{ display: block; width: 4em; line-height: 4em; text-align: center; padding: 0; }
.sitetools .sitetool__icon .fa{ padding: 0; }

/*
// sitetoolsearch
*/

.sitetoolslist__item--search{
  padding-right: 4em;
}

.sitetoolsearch{
  pointer-events: none;
  position: relative;
  background: #fff;
  width: 0em;
  height: 4em;
  overflow: hidden;
  -webkit-transition: width 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
     -moz-transition: width 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
      transition: width 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
}

.open--sitetoolsearch .sitetoolsearch{
  width: 10em;
  pointer-events: auto;
}

.sitetoolsearch__form{
  display: block;
}

.sitetoolsearch__toggle{
  position: absolute;
  top: 0;
  right: 0;
 }

input[type="search"].sitetoolsearch__input{
  margin: 0;
  padding: 1.25em 1.5em 1.25em 1.5em;
  line-height: 2em;
  border: none;
  border-radius: 0;
  background: #fff;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

@media only screen and (min-width:400px){
  input.sitetoolsearch__input,
  .open--sitetoolsearch .sitetoolsearch{ width: 12.5em; }
}

@media only screen and (min-width:500px){
  input.sitetoolsearch__input,
  .open--sitetoolsearch .sitetoolsearch{ width: 15em; }
}

@media only screen and (min-width:700px){
  input.sitetoolsearch__input,
  .open--sitetoolsearch .sitetoolsearch{ width: 17.5em; }
}

@media only screen and (min-width:1000px){
  input.sitetoolsearch__input,
  .open--sitetoolsearch .sitetoolsearch{ width: 20em; }
}



/*  ==========================================================================
  announcement
  ========================================================================== */

.announcement{
  display: none;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: #394347;
  color: #fff;
  -webkit-transition: max-height 250ms ease-out 0ms;
     -moz-transition: max-height 250ms ease-out 0ms;
      transition: max-height 250ms ease-out 0ms;
  max-height: 4em;
}

.page--home .announcement{ display: block; }

.scrolled .announcement{ max-height: 0px; }

.siteheaderneg .announcement{
  background-color: #fff;
  color: #394347;
}

.announcement__bd{
  padding: 1em 0;
  position: relative;
}


.announcement__link{
  display: inline-block;
  margin: 0 1em;
}

/*  ==========================================================================
  powernav
  ========================================================================== */

.powernav{
}

.powernav__links li{
  margin-bottom: .25em;
}


.powernav__heading{ margin: 0; position: relative; z-index: 2; font-weight: 600; }
.powernav__heading a{ display: block; }

.powernav__heading:after{
  content: ' ';
  display: block;
  width: 1.25em;
  border-bottom: solid 1px rgba(255,255,255,.2);
  margin: .66em 0 .66em;
}


/*  ==========================================================================
  mobnav
  ========================================================================== */

.mobnav{
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 0;
  background: #1d4e9d;
  color: #eee;
  -webkit-transition: height 300ms ease-in-out;
     -moz-transition: height 300ms ease-in-out;
      transition: height 300ms ease-in-out;
}

.mobnav__scrollingwindow{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
}


.mobnavsection{ border-bottom: solid 1px rgba(255,255,255,.2); }
.mobnavsection:last-child{ border-bottom: none; }

.mobnav .powernav__leader{ font-size: 1em; }

.mobnav .powernav__cta{ display: none; }

.mobnav .powernav__links .powernav__heading{ display: none; }

.mobnav .powernav__heading a{
  display: block;
  position: relative;
}
.mobnav .powernav__heading a:before{
  content: '\f0a9';
  font-family: 'FontAwesome';
  position: absolute;
  top: .15em;
  font-size: .88em;
  right: 0;
}

@media only screen and (min-width: 550px){
  .mobnav .powernav__cta{ display: block; }
  .mobnav .powernav__heading a:before{ display: none; }
}

/*  ==========================================================================
  sitenav
  ========================================================================== */

.sitenav{
  display: none;
  position: absolute;
  top: 50%;
  left: 17%;
  right: 6em;
  margin-top: -.75em;
  margin-right: -8.3%;
  padding-left: .75em;
  bottom: 0;
}
.sitenavlist{ padding: 0; margin: 0 -.88em; height: 100%; }
.sitenav li{ display: inline-block; margin: 0; padding: 0; height: 100%; position: relative; }

.sitenavlist--primary{ float: left; }
.sitenavlist--secondary{ float: right; }

.sitenav a{
  display: block;
  padding: 0 .88em;
  height: 100%;
}

.sitenav li:after{
  content: ' ';
  display: block;
  background: #394347;
  position: absolute;
  bottom: 0;
  left: .88em;
  right: .88em;
  height: 0;
  -webkit-transition: height 150ms ease-out 0ms;
     -moz-transition: height 150ms ease-out 0ms;
      transition: height 150ms ease-out 0ms;
}


.sitenav li[data-sitenavsection="about"]:after,
.sitenav li.blue:after{ background: #1d4e9d; }

.sitenav li[data-sitenavsection="investors"]:after,
.sitenav li.green:after{ background: #33a575; }

.sitenav li[data-sitenavsection="media"]:after,
.sitenav li.red:after{ background: #E52437; }



.sitenav li.over:after,
.sitenav li:hover:after{
  height: 4px;
}

@media only screen and (min-width: 1000px){
  .sitenav{ display: block; right: 6.5em; }

  .sitetoolslist__item--nav{ display: none; }
  .mobnav{ display: none; }
  .powernav__links li{ margin-bottom: .33em; }
  .siteheader__bd{ height: 4.5em; }
  .siteheaderlogo{ width: 12em; left: 1.5em; }
  .sitetools .sitetool__icon{ width: 4.5em; line-height: 4.5em; }
  .sitetoolslist__item--search{ padding-right: 4.5em; }
  .sitetoolsearch{ height: 4.5em; }
  input.sitetoolsearch__input{ line-height: 4.5em; }
  .siteheaderbody:after{ left: 21.5%; margin-left: .75em; }
}

@media only screen and (min-width: 1200px){
  .sitenav{ left: 25%; }
  .siteheaderbody:after{ left: 28.5%; margin-left: .75em; }
  .siteheaderlogo{ width: 13em; }
}

@media only screen and (min-width:1400px){
  .siteheaderlogo{ width: 13.5em; }
}

@media only screen and (min-width: 1800px){
  .siteheader{ width: 1800px; left: 50%; margin-left: -900px; }
  .siteheaderbody{ max-width: 1800px; margin-left: auto; margin-right: auto; }
}


/*  ==========================================================================
  sitenavdropdown
  ========================================================================== */

.sitenavdropdown{
  position: absolute;
  top: 100%;
  left: 4em;
  right: 4em;
  margin: 0;
  text-align: left;
  overflow: hidden;
  z-index: 2;
  line-height: 1.2;
  background: #394347;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(1000px) rotateX(-15deg);
     -moz-transform: perspective(1000px) rotateX(-15deg);
      transform: perspective(1000px) rotateX(-15deg);
  -webkit-transition: background-color 150ms ease-out 0ms, opacity 150ms ease-out 0ms, -webkit-transform 150ms ease-out 0ms, height 0ms linear 200ms;
     -moz-transition: background-color 150ms ease-out 0ms, opacity 150ms ease-out 0ms,    -moz-transform 150ms ease-out 0ms, height 0ms linear 200ms;
      transition: background-color 150ms ease-out 0ms, opacity 150ms ease-out 0ms,    transform 150ms ease-out 0ms, height 0ms linear 200ms;
}


.sitenavopen .sitenavdropdown{
  opacity: 1;
  box-shadow: 0 0 50px rgba(0,0,0,.33);
  -webkit-transform: perspective(1000px) rotateX(-0deg);
     -moz-transform: perspective(1000px) rotateX(-0deg);
      transform: perspective(1000px) rotateX(-0deg);
  -webkit-transition: background-color 150ms ease-out 0ms, opacity 150ms ease-out 10ms, -webkit-transform 150ms ease-out 10ms, height 0ms linear 0ms;
     -moz-transition: background-color 150ms ease-out 0ms, opacity 150ms ease-out 10ms,    -moz-transform 150ms ease-out 10ms, height 0ms linear 0ms;
      transition: background-color 150ms ease-out 0ms, opacity 150ms ease-out 10ms,      transform 150ms ease-out 10ms, height 0ms linear 0ms;
}

.sitenavdropdown[data-itemtarget="about"]{ background: #1e4e9d; }
.sitenavdropdown[data-itemtarget="about"] .btn:hover{ color: #1e4e9d; }
.sitenavdropdown[data-itemtarget="investors"]{ background: #009f65; }
.sitenavdropdown[data-itemtarget="investors"] .btn:hover{ color: #009f65; }
.sitenavdropdown[data-itemtarget="media"]{ background: #e62639; }
.sitenavdropdown[data-itemtarget="media"] .btn:hover{ color: #e62639; }

/*
// sitenavsection
*/

.sitenavsection{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-left: 8.3%;
  padding-right: 8.3%;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 150ms ease-out 0ms;
     -moz-transition: opacity 150ms ease-out 0ms;
      transition: opacity 150ms ease-out 0ms;
  z-index: 1;
}

.sitenavsection--active{
  -webkit-transition: opacity 150ms ease-out 100ms;
     -moz-transition: opacity 150ms ease-out 100ms;
      transition: opacity 150ms ease-out 100ms;
  opacity: 1;
  z-index: 20;
}

.sitenavsection__links{
  margin-bottom: -2em;
}
.sitenavsectionchildlink{
  margin-bottom: 2em;
}


.sitenavsection__description{ margin-bottom: 1.5em; }
.sitenavsectionchildlink__heading{ margin-bottom: .5em; }

.sitenavsection .powernav__intro{ padding-right: 10%; }

.sitenavsection .powernav__links:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  background: rgba(0,0,0,.15);
  z-index: 1;
  border-left: solid 1px rgba(255,255,255,.1);
}

.sitenavsection .powernav__links ul{
  position: relative;
  z-index: 2;
}
.sitenavsection .powernav__links li{
  opacity: 0;
  -webkit-transform: translate(1em, 0em);
     -moz-transform: translate(1em, 0em);
        transform: translate(1em, 0em);
  -webkit-transition: opacity 200ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms;
     -moz-transition: opacity 200ms ease-out 0ms,    -moz-transform 300ms ease-out 0ms;
      transition: opacity 200ms ease-out 0ms,     transform 300ms ease-out 0ms;
  margin-bottom: .5em;
}

.sitenavsection--active .powernav__links li{
  opacity: 1;
  -webkit-transform: translate(0em, 0em);
     -moz-transform: translate(0em, 0em);
        transform: translate(0em, 0em);
}

.sitenavsection--active .powernav__links li{ -webkit-transition-delay: 75ms; -moz-transition-delay: 75ms; transition-delay: 75ms; }
.sitenavsection--active .powernav__links li:nth-child(2){ -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; }
.sitenavsection--active .powernav__links li:nth-child(3){ -webkit-transition-delay: 225ms; -moz-transition-delay: 225ms; transition-delay: 225ms; }
.sitenavsection--active .powernav__links li:nth-child(4){ -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; }
.sitenavsection--active .powernav__links li:nth-child(5){ -webkit-transition-delay: 375ms; -moz-transition-delay: 375ms; transition-delay: 375ms; }
.sitenavsection--active .powernav__links li:nth-child(6){ -webkit-transition-delay: 450ms; -moz-transition-delay: 450ms; transition-delay: 450ms; }
.sitenavsection--active .powernav__links li:nth-child(7){ -webkit-transition-delay: 525ms; -moz-transition-delay: 525ms; transition-delay: 525ms; }
.sitenavsection--active .powernav__links li:nth-child(8){ -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; transition-delay: 600ms; }
.sitenavsection--active .powernav__links li:nth-child(9){ -webkit-transition-delay: 675ms; -moz-transition-delay: 675ms; transition-delay: 675ms; }

.sitenavsection .powernav__heading{ display: none; }
.sitenavsection .powernav__links .powernav__heading{
  display: block;
  font-size: 1em;
}

.sitenavdropdown .linkline{ background: none; }

.sitenavsection .powernav__links li a:after{
  font-family: 'FontAwesome';
  content: '\f0a9';
  display: inline-block;
  padding: 0 0 0 .66em;
  font-size: .88em;
  opacity: 0;
  -webkit-transform: translate(-.33em,0);
     -moz-transform: translate(-.33em,0);
      transform: translate(-.33em,0);
  -webkit-transition: opacity 150ms ease-out 0ms, -webkit-transform 150ms ease-out 0ms;
     -moz-transition: opacity 150ms ease-out 0ms,    -moz-transform 150ms ease-out 0ms;
      transition: opacity 150ms ease-out 0ms,     transform 150ms ease-out 0ms;
}

.sitenavsection .powernav__links li a:hover:after{
  opacity: 1;
  -webkit-transform: translate(0,0);
     -moz-transform: translate(0,0);
      transform: translate(0,0);
}

/*
.sitenavsection--investors .powernav__links:after{ width: 50%; }
.sitenavsection--investors .powernav__links{ padding-left: 7.14%; }
.sitenavsection--investors .powernav__links ul{ overflow: hidden; }
.sitenavsection--investors .powernav__links li{ width: 50%; float: left; }
*/

@media only screen and (min-width: 1000px){
  .sitenavdropdown{ right: 4.5em; }
}

@media only screen and (min-width: 1200px){
  .sitenavdropdown{ left: 29.4%; margin-left: -7.14%; }
  .sitenavsection{ padding: 7.14% 10%; }
}


/*  ==========================================================================
  sitefooter
  ========================================================================== */

.sitefooter{
}

.sitefooter .linkline{
    background-image: linear-gradient(90deg, rgba(247, 244, 168, 0) 0%, rgba(247, 244, 168, 0) 50%, #f7f410 50%, #f7f410 100%);
}

.sitefooter__bd{

}

/*
// footermap
*/

.footermap{
  position: relative;
  border-top: solid 1px rgba(57,67,71,.15);
  border-bottom: solid 1px rgba(57,67,71,.15);
}

.footermap .linkline{ border-color: #fff; }

.footermap:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  border-left: solid 1px rgba(57,67,71,.15);
}

.footermapsection{
  padding: 1.5em 0;
  text-align: left;
  border-top: solid 1px rgba(57,67,71,.15);
}

.footermap .gd-u:nth-child(1) .footermapsection,
.footermap .gd-u:nth-child(2) .footermapsection{ border-top: none; }

.footermapsection__heading{ margin: 0; }
.footermapsection__heading:after{
  content: ' ';
  display: block;
  width: 1.25em;
  border-bottom: solid 1px rgba(57,67,71,.15);
  margin: .66em 0 .66em;
}

.footermapsection__list li{
  margin-bottom: .3em;
}

@media only screen and (min-width:1000px){
  .footermapsection{ border-top: none; }
  .footermap .gd-u:before{
    content: ' ';
    display: none;
    width: 1px;
    background: rgba(57,67,71,.15);
    position: absolute;
    top: 0;
    height: 100%;
    left: 50%;
    position: absolute;
  }

  .footermap .gd-u:nth-child(1):before{ display: block; left: 25%;  margin-left: -.75em; }
  .footermap .gd-u:nth-child(3):before{ display: block; left: 75%;  margin-left: .75em; }

}

/*
// legallinks
*/

.footerlinks{
  padding: 1.5em 0;
}

.footerlinks__list{ display: inline; }
.footerlinks__list li{ display: inline-block; padding: 0 1em .33em 0 }
.footerlinks .linkline{ border-color: #fff; }

@media only screen and (min-width:700px){
  .footerlinks__list{ display: block; }
}


/*  ==========================================================================
  pagenav
  ========================================================================== */

.pagenav{
  position: relative;
}

.pagenav--top:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(57,67,71,.15);
  height: 1px;
  z-index: 1;
}

.pagenav__bd{

}

.pagenav--top{
  display: none;
}

.pagenavcontent{
  margin: 0 -4.5em 0 .75em;
  margin-left: 9%;
  padding-left: .75em;
}

.pagenavlist{
  padding: 1.33em 0;
}

/* postnav */

.postnavlist{ padding: 0; margin: 0 0 0 -1.33em; }
.postnavlist li{
  padding: 1.33em 1.33em 1.33em 1.33em;
  border-left: solid 1px rgba(57,67,71,.15);
}
.postnavlist li:first-child{ border-left: none; }
.postnavlist a{ padding: 0; display: inline-block; }
.postnavlist .fa--left{ padding-right: .75em; }

.postnavlist__sep{
  display: inline-block;
  margin: 0 .33em 0 0;
}

@media only screen and (min-width:700px){
  .pagenav--top{ display: block; }
}

@media only screen and (min-width:800px){
  .pagenavcontent{ margin-left: 17%; }
}

@media only screen and (min-width:1000px){

  .pagenav--top:after{ left: 21.5%; margin-left: .75em; }
}

@media only screen and (min-width: 1200px){
  .pagenav--top:after{ left: 28.5%; margin-left: .75em; }
  .pagenavcontent{ margin-left: 25%; }
}


/*  ==========================================================================
  pageheader
  ========================================================================== */


.pageheader{
  margin-bottom: 15%;
  position: relative;
  z-index: 10;
}

.siteheadercollapse .pageheader__bd{
  margin-top: 4em;
}

.pageheader__bd{
  padding-top: 15%;
}

.main--contactblue .pageheader__bd{ padding-bottom: 15%; }

.pageheadercontent{
}

.pageheader__heading{
  max-width: 15em;
}

.pageheader__leader{
  max-width: 35em;
  font-weight: 300;
}

.pageheader__date{ margin-bottom: .33em; }
.pageheader__date strong{ margin-left: .33em; display: inline-block; }

.pageheader__img{ margin-bottom: -5%; }

.pageheader__cta a{
    display: inline-block;
    vertical-align: middle;
    margin: 0 1.33em .5em 0;
}

/* pageheader cover */

.pageheader--cover{
  height: 100vh;
  text-align: center;
  position: relative;
  color: #fff;
  background: #394347;
  overflow: hidden;
  -webkit-transition: background-color 1500ms ease-out 0ms;
     -moz-transition: background-color 1500ms ease-out 0ms;
      transition: background-color 1500ms ease-out 0ms;
}

.pageheader--cover:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}


.pageheader--cover .pageheader__bd{ padding-top: 0; }

.pageheader--cover .pageheader__bd{
  margin: 0;
  width: 85.72%;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  z-index: 2;
  position: relative;
}

.siteheadercollapse .pageheader .pagenav--top{
  position: absolute;
  top: 4em;
  left: 0;
  right: 0;
  text-align: left;
  z-index: 2;
}

.pageheader--cover .coverimg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out 0ms;
     -moz-transition: opacity 1000ms ease-out 0ms;
      transition: opacity 1000ms ease-out 0ms;
  -webkit-transform: scale(1.1,1.1);
     -moz-transform: scale(1.1,1.1);
      transform: scale(1.1,1.1);
}

.pageheader--cover .coverimg:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .25;
}

.pageheaderimg--loaded .pageheader--cover{ background-color: #000; }
.pageheaderimg--loaded .pageheader--cover .coverimg{
    -webkit-transition: -webkit-transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
     -moz-transition:    -moz-transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
      transition:     transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
  -webkit-transform: scale(1,1);
     -moz-transform: scale(1,1);
      transform: scale(1,1);
  opacity: 1;
}


.pageheader.color--white .color--blue,
.color--white .pageheader .color--blue{ color: #fff; }
.pageheader.color--white .pagenav--top:after,
.color--white .pageheader .pagenav--top:after{ background: rgba(255,255,255,.2); }
.pageheader.color--white .pagenav--top li,
.color--white .pageheader .pagenav--top li{ border-color: rgba(255,255,255,.2); }


@media only screen and (min-width:550px){
  .pageheadercontent{ margin-right: -12%; }
  .pageheader{
    margin-bottom: 14%;
  }

  .pageheader__bd{ padding-top: 14%; }
    .main--contactblue .pageheader__bd{ padding-bottom: 14%; }
}

@media only screen and (min-width:800px){
  .pageheadercontent{ margin-right: -28.8%; }
}

@media only screen and (min-width:1000px){
  .pageheader{ margin-bottom: 12%; }
  .pageheader__bd{ padding-top: 12%; }
    .main--contactblue .pageheader__bd{ padding-bottom: 12%; }

  .siteheadercollapse .pageheader .pagenav--top{ top: 4.5em; }
  .siteheadercollapse .pageheader__bd{ margin-top: 4.5em; }
}

@media only screen and (min-width:1200px){
  .pageheader{ margin-bottom: 10%; }
  .pageheader__bd{ padding-top: 10%; }
    .main--contactblue .pageheader__bd{ padding-bottom: 10%; }
  .pageheadercontent{ margin-right: -53.5%; }
  .pageheader__backcta{ position: absolute; top: 1.5em; left: 0; }
}

@media only screen and (min-width:1400px){
  .pageheader{ margin-bottom: 8.3%; }
  .pageheader__bd{ padding-top: 8.3%; }
    .main--contactblue .pageheader__bd{ padding-bottom: 8.3%; }
}


/*  ==========================================================================
    contactpage update
    ========================================================================== */


.main--contactblue{ background: #1d4e9d; color: #fff; }
.main--contactblue .pagenav{ color: #fff; }


/*  ==========================================================================
    share icons
    ========================================================================== */


.shareicons{
  margin-top: 1.5em;
}

.color--white .sharelink{ border-color: rgba(255,255,255,.2); }


.shareicons .btn{ margin: 0; }

.shareiconslist{
}

.shareiconslist li{ margin: 0.5em .25em 0 0; display: inline-block; vertical-align: top;}

.sharelink{
  display: block;
  border: solid 1px rgba(57,67,71,.15);
  margin: 0;
  border-radius: 3em;
  position: relative;
  overflow: hidden;
  -webkit-transition: color 150ms ease-out 0ms;
     -moz-transition: color 150ms ease-out 0ms;
      transition: color 150ms ease-out 0ms;
}

.sharelink:after { content: ""; height: 0; visibility: hidden; clear: both; display: block; }

.sharelink:before{
  content: ' ';
  background: #394347;
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  -webkit-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
     -moz-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
      transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
}
.sharelink:hover{ color: #fff; box-shadow: 0 0 50px rgba(0,0,0,.25); }
.sharelink:hover:before{ width: 100%; }

.sharelink--facebook:before{ background: #3b5998; }
.sharelink--twitter:before{ background: #00aced; }
.sharelink--linkedin:before{ background: #007bb6; }

.color--white .sharelink--facebook:before,
.color--white .sharelink--twitter:before,
.color--white .sharelink--linkedin:before{ background: #fff; }
.color--white .sharelink--facebook:hover{ color: #3b5998; }
.color--white .sharelink--twitter:hover{ color: #00aced; }
.color--white .sharelink--linkedin:hover{ color: #007bb6; }

.sharelink__icon{
  text-align: center;
  display: block;
  float: left;
  padding: 1em;
  border: none;
  width: 1.5em;
  z-index: 2;
  position: relative;
}

.sharelink__icon .fa{ display: inline-block; padding: 0; }
 a:hover .sharelink__icon .fa{ display: inline-block; padding: 0; }

.sharelink__text{
  overflow: hidden;
  display: block;
  float: left;
  text-align: right;
  width: 0;
  -webkit-transition: width .15s ease-in-out 0s;
     -moz-transition: width .15s ease-in-out 0s;
          transition: width .15s ease-in-out 0s;
  text-align: left;
  padding: 1em 0;
  z-index: 2;
  position: relative;
}

.sharelink:hover .sharelink__text{
  width: 4.5em;
}


@media only screen and (min-width: 700px){

}

/*  ==========================================================================
  content
  ========================================================================== */


.content{
  margin: 0 auto;
  box-sizing: border-box;
}

@media only screen and (min-width:550px){
  .content{ width: 83.4%; padding: 0 .5em;  }
}

@media only screen and (min-width:700px){
  .content{ padding: 0 0.625em; }
}

@media only screen and (min-width:800px){
  .content{ width: 66.6%; }
}

@media only screen and (min-width:1000px){
  .content{ width: 66%; padding: 0 0.75em; }
}

@media only screen and (min-width:1200px){
  .content{ width: 50%; }
}

@media only screen and (min-width:1400px){

}



/*  ==========================================================================
  hero__bd
  ========================================================================== */

.hero{
  height: 100vh;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.hero__bd{
  margin: 0;
  width: 85.66%;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 3;
}

.hero__heading{ max-width: 14em; margin: 0; }
.hero__heading strong{ color: #394347; }

.hero__cta{
  margin-top: 1em;
}

/*
// hero--img
*/

.hero--img{
  background: #394347;
  -webkit-transition: background-color 1500ms ease-out 0ms;
     -moz-transition: background-color 1500ms ease-out 0ms;
      transition: background-color 1500ms ease-out 0ms;
}

.hero.color--white .hero__heading strong{ color: #fff; }
.hero__img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out 0ms;
     -moz-transition: opacity 1000ms ease-out 0ms;
      transition: opacity 1000ms ease-out 0ms;
  -webkit-transform: scale(1.1,1.1);
     -moz-transform: scale(1.1,1.1);
      transform: scale(1.1,1.1);
}

.hero__img:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .15;
}

.heroimg--loaded .hero--img{ background-color: #000; }
.heroimg--loaded .hero__img{
    -webkit-transition: -webkit-transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
     -moz-transition:    -moz-transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
      transition:     transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
  -webkit-transform: scale(1,1);
     -moz-transform: scale(1,1);
      transform: scale(1,1);
  opacity: 1;
}


/*
// hero--video
*/
.hero--video {
  background: #394347;
}

.hero--video .hero__img{ display: none; }

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transition: opacity 2000ms ease-out 0ms;
     -moz-transition: opacity 2000ms ease-out 0ms;
      transition: opacity 2000ms ease-out 0ms;
}

.hero__video:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .25;
  z-index: 2;
}

.hero__video iframe,
.hero__video object,
.hero__video embed {
    width: 100vw;
    height: 56.25vw;
    /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    min-width: 177.77vh;
    /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  z-index: 1;

}

.page--home .herocontent{
  margin-top: 3em;
}

@media only screen and (min-width:550px){
  .herocontent{ margin-right: -12%; }
  .page--home .herocontent{
    margin-top: 0;
  }
}

@media only screen and (min-width:800px){
  .herocontent{ margin-right: -28.8%; }
}

@media only screen and (min-width:1200px){
  .herocontent{ margin-right: -45%; }
}


/*  ==========================================================================
  posts
  ========================================================================== */

.posts{
}

.posts .gd-g{
  margin-left: 0;
  margin-right: 0;
}


.post{
  padding: 1em;
  position: relative;
  cursor: pointer;
}

.post .linkline{
    background-image: linear-gradient(90deg, rgba(247, 244, 168, 0) 0%, rgba(247, 244, 168, 0) 50%, #f7f410 50%, #f7f410 100%);
}
.post:hover .post__heading .linkline{
    background-position: -100% bottom;
    background-size: 200% 0.5em;
}


.post__desc{ margin: 1em 0 0; }
.post__img{
  margin: 0 0 1em;
  overflow: hidden;
}

.post__img img{
  -webkit-transition: -webkit-transform 250ms ease-out 0ms;
     -moz-transition:    -moz-transform 250ms ease-out 0ms;
      transition:     transform 250ms ease-out 0ms;
  display: block;
}

.post:hover .post__img img{
  -webkit-transform: scale(1.1,1.1);
     -moz-transform: scale(1.1,1.1);
      transform: scale(1.1,1.1);
}

.post__date{ margin-bottom: .33em; color: #888; }
.post__heading{ font-weight: 500; line-height: 1.3; }

.post__cats{ margin-top: .33em; }

.post__catsicon{ padding: 0 .5em 0 0; display: inline-block; color: #a9a9a9; }
.post__cats a{ display: inline-block; color: #888; }
.post:hover .post__cats a:hover{ color: #333; }

/*
// postgrid
*/

.postgrid{
  position: relative;
  overflow: hidden;
}

.postgrid .gd-g{ margin-left: -1em; margin-right: -1em; margin-bottom: -1em; position: relative; z-index: 2; }

.postgrid__line{
  display: none;
  width: 1px;
  background: rgba(57,67,71,.15);
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  z-index: 1;
}

.postgrid__line--1{ display: block; }

.postgrid .post:nth-child(2n+1):after{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  border-top: solid 1px rgba(57,67,71,.15);
}

.postgrid .post:nth-child(1):after{ display: none; }

.postgrid .post:nth-child(1),
.postgrid .post:nth-child(2){ padding-top: 0; }

.post--hidden{ width: 0px; overflow: hidden; padding: 0!important; }

/*
// featuredfirst
*/

.post--featurefirst{
  position: relative;
}

.post--featurefirst:before{
  content: ' ';
  display: block;
  background: #fff;
  position: absolute;
  top: 0;
  right: 2px;
  bottom: 0;
  left: 0;
}

.post--featurefirst .post__inner{ position: relative; z-index: 2; }

.post--featurefirst .post__header{
  padding: 1em 1em 0 0;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 50%;
}

.post--featurefirst .post__img{ margin-bottom: 0; padding: 120% 0 0; background-color: #394347; background-size: cover; background-position: center;  }
.post--featurefirst .post__img img{ display: none; }


/*
// posts--inline
*/


.posts--inline{
  border: solid 1px rgba(57,67,71,.15);
  position: relative;
  background: #fff;
}

.posts--inline:before{
  content: ' ';
  display: block;
  width: 0;
  left: 50%;
  height: 100%;
  top: 0;
  position: absolute;
  border-left: solid 1px rgba(57,67,71,.15);
}

.posts--inline .post{ width: 50%; }

.imgfeatureposts--count-1 .post{ width: 100%; }
.imgfeatureposts--count-1 .posts--inline:before{ display: none; }


@media only screen and (min-width: 550px){
  .postgrid .gd-g{ margin-left: -1.5em; margin-right: -1.5em; margin-bottom: -1.5em; }
  .post{ padding: 1.5em; }
  .post__desc{ margin: 1.5em 0 0; }
  .post__img{ margin: 0 0 1.5em; }

  .post--featurefirst .post__header{ padding: 1.5em 1.5em 0 0; }
}

@media only screen and (min-width: 800px){
  .post{ padding: 1.5em; }
  .post__desc{ margin: 1.5em 0 0; }
  .post__img{ margin: 0 0 1.5em; }

  .postgrid__line--1{ display: block; left: 33.3%; margin-left: -.5em; }
  .postgrid__line--2{ display: block; left: 66.6%; margin-left: .5em; }

  .postgrid .post:nth-child(1),
  .postgrid .post:nth-child(2),
  .postgrid .post:nth-child(3){ padding-top: 0; }

  .postgrid .post:nth-child(2n+1):after{ display: none; }

  .postgrid .post:nth-child(3n+1):after{
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    border-top: solid 1px rgba(57,67,71,.15);
  }

  .postgrid .post:nth-child(1):after{ display: none; }

}

@media only screen and (min-width: 1000px){
  .postgrid .gd-g{ margin-left: -1.75em; margin-right: -1.75em; margin-bottom: -1.75em; }
  .post{ padding: 1.75em; }
  .post__desc{ margin: 1.75em 0 0; }
  .post__img{ margin: 0 0 1.75em; }
  .post__desc{ font-size: 1em; }

  .post--featurefirst .post__header{  padding: 1.75em 1.75em 0 0; }
}

@media only screen and (min-width: 1200px){
  .postgrid__line--1{ display: block; left: 25%; margin-left: -0.875em; }
  .postgrid__line--2{ display: block; left: 50%; margin-left: 0; }
  .postgrid__line--3{ display: block; left: 75%; margin-left: 0.875em; }

  .postgrid .post:nth-child(1),
  .postgrid .post:nth-child(2),
  .postgrid .post:nth-child(3),
  .postgrid .post:nth-child(4){ padding-top: 0; }

  .postgrid .post:nth-child(3n+1):after{ display: none; }

  .postgrid .post:nth-child(4n+1):after{
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    border-top: solid 1px rgba(57,67,71,.15);
  }

  .postgrid .post:nth-child(1):after{ display: none; }

   .postgrid--featurefirst .postgrid__line--1{ display: none; }
  .post--featurefirst{ float: left; }



}

/*  ==========================================================================
  pager
  ========================================================================== */

.pager{
  text-align: center;
}

.pager__bd{
  position: relative;
}

.pager__bd:before{
  content: ' ';
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  border-top: solid 1px rgba(57,67,71,.15);
}

.pagerbtnwrapper{
  display: inline-block;
  background: #fff;
  padding: 0 1em;
  z-index: 2;
  position: relative;
}

.pager .btn{ background: #fff;  margin: 0; }

.loadingdot{
  display: inline-block;
  padding: 0 .15em;
  -webkit-animation: loadingkey 1s linear infinite;
     -moz-animation: loadingkey 1s linear infinite;
      animation: loadingkey 1s linear infinite;
}
.loadingdot:nth-child(2){ -webkit-animation-delay: 250ms; -moz-animation-delay: 250ms;  animation-delay: 250ms;  }
.loadingdot:nth-child(3){ -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms;  animation-delay: 500ms;  }


@media only screen and (min-width: 550px){
  .pagerbtnwrapper{ padding: 0 1.5em; }
}

@media only screen and (min-width: 1000px){
  .pagerbtnwrapper{ padding: 0 1.75em; }
}

-webkit-@keyframes loadingkey {
  0%   { opacity: 1; }
    33%  { opacity: 0; }
  66%  { opacity: 0; }
}

-moz-@keyframes loadingkey {
  0%   { opacity: 1; }
    33%  { opacity: 0; }
  66%  { opacity: 0; }
}

@keyframes loadingkey {
  0%   { opacity: 0; }
    33%  { opacity: 1; }
  66%  { opacity: 0; }
}




/*  ==========================================================================
  flex
  ========================================================================== */

.flex{

}

.flex__heading{
  margin: 0 0 .33em;
}

.flex--fullwidth + .flex--fullwidth,
.flexbg + .flexbg{ margin-top: -10%; }


@media only screen and (min-width: 700px){
  .flex--fullwidth + .flex--fullwidth,
  .flexbg + .flexbg{ margin-top: -8.5%; }
}

@media only screen and (min-width: 1000px){
  .flex--fullwidth + .flex--fullwidth,
  .flexbg + .flexbg{ margin-top: -7.14%; }
}

@media only screen and (min-width: 1200px){
  .flex--fullwidth + .flex--fullwidth,
  .flexbg + .flexbg{ margin-top: -5%; }
}


/*  ==========================================================================
  flexline
  ========================================================================== */

.flexline__line{
    border-top: solid 1px rgba(57,67,71,.15);
    height: 0;
}


/*  ==========================================================================
  flex--paralist
  ========================================================================== */

.paralist__heading{
  margin: 0 0 .5em;
}

.paralistlist--left{ display: none; }
.paralistlist{ margin-bottom: -2em; }
.paralistitem{ margin-bottom: 2em; }

@media only screen and (min-width: 1000px){
  .paralist--left .paralistlist--right{ display: none; }
  .paralist--left .paralistlist--left{ display: inline-block; }
  .paralist--right .paralistlist--left{ display: none; }
  .paralistcontentwrapper{ padding-bottom: 0; }
}

@media only screen and (min-width: 1200px){
  .paralistcontent{ padding: 0 7.14%; }
}

@media only screen and (min-width: 1400px){
  .paralistcontent{ padding: 0 14.3%; }
}

@media only screen and (min-width: 1600px){
  .paralistcontent{ padding: 0 20%; }
}


/*  ==========================================================================
  flex Iconlist
  ========================================================================== */

.iconlist{
  margin-bottom: -2em;
}

.gd-g .iconlistitem{
  text-align: center;
}

.iconlistitem{
  text-align: center;
  margin-bottom: 2em;
}

.iconlistitem__img{
  width: 3.5em;
  display: block;
  margin: 0 auto 1em;
}

.iconlistitem__heading{
  margin: 0 0 .5em;
}

@media only screen and (min-width:700px){
  .iconlist{ margin-bottom: -2.5em; }
  .iconlistitem{ margin-bottom: 2.5em; }
}

@media only screen and (min-width:1000px){
  .iconlist{ margin-bottom: -3em; }
  .iconlistitem{ margin-bottom: 3em; }
}

/*  ==========================================================================
  flex results
  ========================================================================== */

.flexresults{
  background: #f5f5f6;
}

.flexresults__cta .btn{ margin: 0; background: #FFF; }

.flexresults__cta .flexresults__primary,
.flexresults__cta .flexresults__secondary{ margin: 0 .75em .75em; display: inline-block; vertical-align: middle; }

.flexresults__table__header{
  background: #394347;
  color: #FFF;
  padding: 1.5em;
}

.flexresults__table__header p, .flexresults__table__header h3{
  margin: 0;
}

.flexresults__table ul{
  list-style: none;
}

.flexresults__table ul li{
  padding: 1em 1.5em;
  display: block;
  background: #FFF;
  border-bottom: 1px solid #f5f5f6;
}

.flexresults__table ul li:last-child{
  border-bottom: none;
}

.flexresults__table ul li:hover{
  background: rgba(255,255,255,0.5);
}

.flexresults__content{
  text-align: center;
}


@media only screen and (min-width: 550px){
  .flexresults__content{
    text-align: left;
  }
  .flexresults__cta .flexresults__primary,
  .flexresults__cta .flexresults__secondary{ margin: 0; margin-right: .75em; }
}

@media only screen and (min-width: 1000px){
  .flexresults__right{
    padding-top: 0;
  }
}

@media only screen and (min-width: 1200px){
  .flexresults__content{ padding: 0 7.14%; }
  .flexresults__table{ margin: 0 7.14%; }
}

@media only screen and (min-width: 1400px){
  .flexresults__content{ padding: 0 14.3%; }
  .flexresults__table{ margin: 0 14.3%; }
}



/*  ==========================================================================
  flex--imgfeature
  ========================================================================== */

.imgfeature{
}

.imgfeaturecontent__heading{
  margin: 0 0 .5em;
}

.imgfeature__contentcontainer{ position: relative; z-index: 2; }

.imgfeature__imgcontainer{ position: relative; z-index: 1; }
.imgfeature__imgcontainer--last{ display: none; }

.imgfeature__img{
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 66.6% 0 0;
}

.imgfeature--withposts .imgfeaturecontent{  }

.imgfeature--withposts .gd-u{ vertical-align: top; }

.imgfeatureposts{
  position: relative;
}

.imgfeatureposts--count-1{ margin-right: 50%; }

.imgfeatureposts:before{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  width: 3em;
  bottom: 0;
  left: -2em;
  background: url(img/shadow.png) no-repeat center top;
  background-size: contain;
}

.imgfeature--right .imgfeatureposts:before{
  left: auto;
  right: -2em;
}

@media only screen and (min-width: 550px){
  .imgfeatureposts:before{
    left: -3em;
  }
  .imgfeature--right .imgfeatureposts:before{
    right: -3em;
  }
}

@media only screen and (min-width: 1000px){
  .imgfeature__imgcontainer{ margin-bottom: 0; }

  .imgfeature__img{ padding: 100% 0 0; }
  .imgfeature--right .imgfeature__imgcontainer--first{ display: none; }
  .imgfeature--right .imgfeature__imgcontainer--last{ display: inline-block; }

  .imgfeature--withposts .imgfeaturecontent{ padding: 14% 7.14%; }

  .imgfeature .imgfeatureposts{ margin: 0; }
    .imgfeature .imgfeatureposts > .gd-g{ margin-left: 0; margin-right: 0; }
    .imgfeatureposts:before{
    left: -1em;
  }
  .imgfeature--right .imgfeatureposts:before{
    right: -1em;
  }

  /* .imgfeature--left .imgfeatureposts{ margin-right: -16%;  -webkit-transform: translate(-18.6%, 0);  -moz-transform: translate(-18.6%, 0);  transform: translate(-18.6%, 0); }
  .imgfeature--right .imgfeatureposts{ margin-left: -16%;  -webkit-transform: translate(18.6%, 0);  -moz-transform: translate(18.6%, 0);  transform: translate(18.6%, 0); } */
  .imgfeature--right .imgfeatureposts--count-1{ margin-left: 40%;  margin-right: 0;  padding-left: 3.5em; }
  .imgfeature--left .imgfeatureposts--count-1{ margin-right: 40%; margin-left: 0; padding-right: 3.5em;  }

}

@media only screen and (min-width: 1200px){

  .imgfeaturecontent{ padding: 0 14.3%; }
  .imgfeature--withposts .imgfeaturecontent{ padding: 14.3%; }

  .imgfeature .imgfeatureposts{ margin: 0;  }
  .imgfeature--right .imgfeatureposts--count-1{ margin-left: 40%;  margin-right: 0;  padding-left: 3.5em; }
  .imgfeature--left .imgfeatureposts--count-1{ margin-right: 40%; margin-left: 0; padding-right: 3.5em;  }
}

@media only screen and (min-width: 1400px){
  .imgfeaturecontent{ padding: 0 14.3%; }
  .imgfeature--withposts .imgfeaturecontent{ padding: 10% 14.3%; }
}

@media only screen and (min-width: 1600px){
  .imgfeaturecontent{ padding: 0 20%; }
  .imgfeature--withposts .imgfeaturecontent{ padding: 14.3% 20%; }
}


/*  ==========================================================================
  contentcols
  ========================================================================== */

.contentcols__inner{
  margin-bottom: -7%;
  text-align: center;
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;
    text-rendering: optimizespeed;
    margin-left: -.75em; margin-right: -.75em;
}

.opera-only :-o-prefocus,
.contentcols__inner{
    word-spacing: -0.43em;
}

.contentcol {
  text-align: left;
  display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
    box-sizing: border-box;
    padding-left: .75em; padding-right: .75em;
}

.contentcols--4 .contentcol{ width: 50%; }

@media only screen and (min-width:550px){
  .contentcols__inner{ margin-right: -1em; margin-left: -1em; }
    .contentcol{ padding-right: 1em; padding-left: 1em; }
  .contentcols--3 .contentcol{ width: 50%; }
  .contentcols--2 .contentcol{ width: 83.4%; }
}

@media only screen and (min-width:700px){
  .contentcols__inner{ margin-right: -1.25em; margin-left: -1.25em; margin-bottom: -5%; }
    .contentcol{ padding-right: 1.25em; padding-left: 1.25em; }
  .contentcols--2 .contentcol{ width: 50%; }

  .contentcols--4 .contentcols__inner{ padding: 0 7.14%; }
}

@media only screen and (min-width:1000px){
  .contentcols__inner{ margin-right: -1.5em; margin-left: -1.5em; }
    .contentcol{ padding-right: 1.5em; padding-left: 1.5em; }
  .contentcols--3 .contentcol{ width: 33.3%; }
  .contentcols__inner{ margin-bottom: -3.5%; }

  .contentcols--2 .contentcols__inner{ padding: 0; }

  .contentcols--4 .contentcols__inner{ padding: 0; }
  .contentcols--4 .contentcol{ width: 25%; }
}

@media only screen and (min-width:1400px){
  .contentcols--2 .contentcols__inner{ padding: 0 10%; }
}


/*  ==========================================================================
  lineheading
  ========================================================================== */

.lineheader{
  color: #394347;
}

.lineheader--attach{
  margin-bottom: -5%;
}

.lineheading{
  position: relative;
  text-align: center;
}

.lineheading:after{
  content: ' ';
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  border-top: solid 1px rgba(57,67,71,.15);
}

.lineheading__heading{
  background: #fff;
  padding: 0 1em;
  display: inline-block;
  margin: 0;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
  max-width: 75%;
}


@media only screen and (min-width: 550px){
  .lineheading__heading{ padding: 0 1.5em; }
}

@media only screen and (min-width: 1000px){
  .lineheading__heading{ padding: 0 1.75em; }
  .lineheader--attach{
    margin-bottom: -4%;
  }
}

@media only screen and (min-width: 1200px){
  .lineheader--attach{
    margin-bottom: -3%;
  }
}

/*  ==========================================================================
  flex statistic cols
  ========================================================================== */

.statisticcols .contentcol{
  text-align: center;
}

.statisticcols .contentcol:nth-child(1){
  color: #009f65;
}

.statisticcols .contentcol:nth-child(2){
  color: #009f65;
}

.statisticcols .contentcol:nth-child(3){
  color: #009f65;
}

.statisticcols .contentcol:nth-child(4){
  color: #009f65;
}

/*  ==========================================================================
  flex cta
  ========================================================================== */

.flexcta{
  text-align: center;
  position: relative;
}

.flexcta__bd{
  position: relative;
  z-index: 2;
}

.flexcta__leader{
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

.flexcta__cta .btn{ margin: 0; }

.flexcta__cta .flexcta__primary,
.flexcta__cta .flexcta__secondary{ margin: 0 .75em .75em; display: inline-block; vertical-align: middle; }

/* flexquote--img */

.flexcta--withimg{
  color: #fff;
  background: #000;
  overflow: hidden;
  padding: 20% 0;
}

.flexcta__img{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  -webkit-transition: -webkit-transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
     -moz-transition:    -moz-transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
      transition:     transform 2000ms ease-out 0ms, opacity 2000ms ease-out 0ms;
  -webkit-transform: scale(1.1,1.1);
     -moz-transform: scale(1.1,1.1);
      transform: scale(1.1,1.1);
}

.flexcta__img.effect--ready{
  opacity: .75;
  -webkit-transform: scale(1,1);
     -moz-transform: scale(1,1);
      transform: scale(1,1);
}

@media only screen and (min-width: 700px){
  .flexcta--withimg{ padding: 17.5% 0; }
}

@media only screen and (min-width: 1000px){
  .flexcta--withimg{ padding: 15% 0; }
}

@media only screen and (min-width: 1200px){
  .flexcta--withimg{ padding: 12.5% 0; }
}


/*  ==========================================================================
  flex chairman
  ========================================================================== */

.flex--chairman .profile{
  max-width: 10em;
}

@media only screen and (min-width: 450px){
  .flex--chairman .profile{
    max-width: none;
    text-align: center;
    float: right;
    padding-left: 2em;
  }

  .flex--chairman .profilepic{
    width: 100%;
    min-width: 10em;
  }
}


/*  ==========================================================================
  flex charts
  ========================================================================== */


.flex__legend {
  text-align: left;
  margin-bottom: -.75em;
}

.bg--dark-grey .flex__legend {
  color: #f2f2f2;
}

.flex__legend .legend__item {
  display: block;
  margin: 0 0em 1em 0;
  padding-left: 2.5em;
  padding-right: 1em;
  box-sizing: border-box;
  position: relative;
  line-height: 1.2;
}

.flex__legend .legend__item span {
  width: 1.5em;
  height: 1.5em;
  border-radius: 1.5em;
  display: inline-block;
  border: solid 3px #fff;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
  margin: -.15em 0 0;
  position: absolute;
  top: -3px;
  left: -3px;
}

.flex__legend .legend__item strong {
  display: inline-block;
  padding: 0 .5em 0 0;
  display: none;
}
.graphleader { margin-bottom: -1em; }

@media only screen and (min-width: 480px){
  .legend__item{ width: 50%; float: left; }
}

@media only screen and (min-width: 700px){
  .graphintro--left{ padding-bottom: 0; }
}



/*  ==========================================================================
  charts
  ========================================================================== */

.chart {
  padding: 100% 0 0;
  position: relative;
  margin-bottom: 1.5em;
}

.flexgraph--withbg{
  background: #f2f2f2;
}

.chart-yaxis-adjust {
   margin-left: -30px;
}

.chart__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.chart__data { display: none; }

.chart--pie{
    position: relative;
}

@media only screen and (min-width:1000px){
    .chart__title{
        font-size: 130%;
    }
}
@media only screen and (min-width:1200px){
    .chart__title{
        font-size: 150%;
    }
}

/*  ==========================================================================
  chart--line
  ========================================================================== */

.linewrapper{
  border: solid 1px rgba(57,67,71,.15);
  padding: 2em;
  background: #fff;
}

@media only screen and (max-width: 699px) {
  .flexgraph--line .flex__legend .legend__item {
    display: inline-block;
  }
}

.chart--line {
  padding: 56.6% 0 0;
  margin: 0 0 2.5em;
}

.flexgraph .graphintro--right{ display: none; }

.linewrapper .flex__legend{  padding-top: 2em; border-top: solid 1px rgba(57,67,71,.15); }

@media only screen and (min-width:700px){
    .flexgraph--left .graphintro--left{ display: none; }
    .flexgraph--left .graphintro--right{ display: inline-block; }
  .linewrapper .legend__item{ width: 33.3%; }
}

@media only screen and (min-width:1200px){
    .linewrapper .legend__item{ width: 25%; }
}


/*  ==========================================================================
  Quote
  ========================================================================== */


.quote{
}

.quote__blockquote{
  margin: 0 ;
  position: relative;
  padding: 10% 10% 20%;
  font-weight: 300;
  overflow: hidden;
}

.quote__blockquote:after{
  content: ' ';
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: -1px;
  background: url(img/blockquote.png) no-repeat center bottom;
  background-size: 100% auto;
  padding: 10% 0 0;
}

.quotecitewraper{ margin: -5% 0 0;  line-height: 1.3; position: relative; }

.quotecite__name,
.quotecite__role{ display: inline-block; margin: 0 .66em 0 0; }

.quotecite__role{ color: #888; }

.quotecite{ position: relative; padding: 0 0 0 1em; display: block; width: 57%; float: left; box-sizing: border-box; }
.quotecite:before{
  content: '�';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 600;
}

.quoteimg{
  float: left;
  margin: -12.5% 5% 0 0;
  width: 25%;
}

.quoteimg__img{
  padding: 100% 0 0;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: solid 3px #fff;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
       -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
}

@media only screen and (min-width: 550px){
  .quote__blockquote{
    padding: 12.5% 12.5% 25%;
    margin-left: -12.5%;
    margin-right: -12.5%;
  }

  .quoteimg{ margin-top: -13.33%; width: 25%;  }

}

@media only screen and (min-width: 700px){
  .quoteimg{ margin-top: -13.33%; width: 22.5%;  }
}

@media only screen and (min-width: 800px){
  .quote__blockquote{
    padding: 12.5% 15% 25%;
    margin-left: -15%;
    margin-right: -15%;
  }
}

@media only screen and (min-width: 1000px){

  .quote__blockquote{
    padding: 15% 18% 30%;
    margin-left: -18%;
    margin-right: -18%;
  }

  .quoteimg{ width: 20%;  }
  .quotecitewraper{ margin: -7% 0 0; }
  .quoteimg{ margin-top: -11%; }
}



/*  ==========================================================================
  flex--images
  ========================================================================== */

.fleximgs .gd-g{
  margin-bottom: -2em;
}

.galleryitem{ margin-bottom: 2em; }


.galleryitem__img{
  width: 100%;
  display: block;
}


.galleryitem__caption{
  margin-top: 1em;
  color: #888;
  line-height: 1.3;
}

.galleryitem__caption:after{
  content: ' ';
  display: block;
  width: 1.5em;
  border-bottom: solid 1px #ddd;
  margin: 1em 0 0;
}

/*  ==========================================================================
  flex image with text col
  ========================================================================== */

.imgwithtext__imgcontainer, .imgwithtext__contentcontainer{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media only screen and (min-width: 800px){
  .imgwithtext__imgcontainer, .imgwithtext__contentcontainer{
    display: inline-block;
  }
}

/*  ==========================================================================
  profile
  ========================================================================== */

.profileheader{
  margin: 0 0 1em;
}

.profilepic{
  margin: 0 0 1.25em;
}

.profilepic__img{
  border-radius: 50%;
  background: #000;
  padding: 100% 0 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 5px #fff;
    -webkit-box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.25);
       -moz-box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.25);
}

.profile__name{
  margin: 0 0 .15em;
}

/* director profile */

.directorprofile{
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

/* manager profile */

.managerprofile{
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}


/* author profile */

.authorprofile--top{ margin-bottom: -7%; display: none; position: relative; z-index: 11; }

.authorprofile--top .gd-u{ position: relative; }

.authorprofile--top .profile{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  box-sizing: border-box;
  padding-right: 2em;
}

.main--article--withcover .authorprofile--top .profile{
  margin-top: -17%;
}

.authorprofile__bd{
  position: relative;
}

.authorprofile--bottom .authorprofile__bd{
  padding: 7.14%;
  background: #f6f6f6;
}

.authorprofile--bottom .profilepic{ width: 100%; margin-bottom: 0; }
.authorprofile--bottom .profileheader{ margin-bottom: 0; }
.authorprofile--bottom .profile__desc{ display: none; }

@media only screen and (min-width: 420px){
  .profilepic{ width: 75%; }
}

@media only screen and (min-width: 550px){
  .profilepic{ width: 66.6%; }
  .authorprofile--bottom .profileheader{ margin-bottom: 1em; }
  .authorprofile--bottom .profile__desc{ display: block; }
}

@media only screen and (min-width: 700px){
  .authorprofile--bottom .authorprofile__bd{
    padding: 5% 7.14%;
  }
}

@media only screen and (min-width: 1000px){
}

@media only screen and (min-width: 1200px){
  .authorprofile--top{ display: block; }
}

/*  ==========================================================================
  profile popup
  ========================================================================== */

.profilepopup{
  width: 90%;
  max-width: 1200px !important;
  padding: 0 !important;
  height: 70vh;
  overflow: scroll;
}

.profilepopup__intro{
  padding: 15% 7% 5% 7%;
}

.profilepopup__pic{
  padding: 0;
}

.profilepopup__pic__img{
  background: #000;
  width: 100%;
  padding: 80% 0 0 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profilepopup__description{
  margin-top: 3em;
}

.profilepopup__social{
  margin-top: 2em;
  list-style: none;
}

.profilepopup__social li{
  margin: 0.5em 0;
}

.profilepopup__social a:focus {outline:0;}

.profilepopup .post__inner{
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}

.profilepopup .post{
  width: 100%;
  border-top: solid 1px rgba(57,67,71,.15);
}
.profilepopup .post:nth-child(1){
  border-top: none;
}
.profilepopup .posts--inline{
  border: none;
}
.profilepopup .posts--inline:before{
  display: none;
}

/* Fancy box overrides */

.fancybox-is-open .fancybox-bg{
  opacity: 0.5 !important;
}

.fancybox-bg{
  background: #163891 !important;
}

@media only screen and (min-width: 400px){
  .profilepopup .post{
    width: 50%;
  }
  .profilepopup .post:nth-child(2){
    border-top: none;
  }
  .profilepopup .posts--inline{
    border: none;
  }
  .profilepopup .posts--inline:before{
    display: block;
  }
}

@media only screen and (min-width: 550px){
  .profilepopup__pic__img{
    padding: 60% 0 0 0;
  }
  .profilepopup__description{
    margin-top: 5em;
  }
}

@media only screen and (min-width: 700px){
  .profilepopup{
    overflow: hidden;
  }
  .profilepopup__pic{ height: 70vh; }
  .profilepopup__pic__img{ padding: 0; height: 70vh; }
  .profilepopup__details{
    height: 70vh;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .profilepopup .post{
    width: 100%;
    border-top: solid 1px rgba(57,67,71,.15);
  }
  .profilepopup .post:nth-child(1){
    border-top: none;
  }
  .profilepopup .posts--inline{
    border: none;
  }
  .profilepopup .posts--inline:before{
    display: none;
  }
}

@media only screen and (min-width: 900px){
  .profilepopup .post{
    width: 50%;
  }
  .profilepopup .post:nth-child(2){
    border-top: none;
  }
  .profilepopup .posts--inline{
    border: none;
  }
  .profilepopup .posts--inline:before{
    display: block;
  }
}

/*  ==========================================================================
  contact page
  ========================================================================== */

.contactform{
  background: #f5f5f6;
}

.contactform__title{
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(57,67,71,0.2);
}

.contactform__form{
  margin-top: 2em;
  margin-left: -0.5em;
  margin-right: -0.5em;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #FFF;
  border-radius: 30px;
  border: 1px solid rgba(57,67,71,0.2);
  padding: 1em 2em;
  resize: none;
}

input[type="text"].error, input[type="email"].error, input[type="password"].error, input[type="number"].error, input[type="search"].error, textarea.error{
  border: 1px solid #E52437;
}

button:focus{
  outline: none;
}

.contactform__form button{
  cursor: pointer;
  float: right;
}

::-webkit-input-placeholder {
  color: #00519e;
  opacity: 0.3;
  font-weight: 600;
}
::-moz-placeholder {
  color: #00519e;
  opacity: 0.3;
  font-weight: 600;
}
::-ms-input-placeholder {
  color: #00519e;
  opacity: 0.3;
  font-weight: 600;
}
::placeholder {
  color: #00519e;
  opacity: 0.3;
  font-weight: 600;
}

.error::-webkit-input-placeholder {
  color: #E52437;
}
.error::-moz-placeholder {
  color: #E52437;
}
.error::-ms-input-placeholder {
  color: #E52437;
}
.error::placeholder {
  color: #E52437;
}

input[type="submit"]{
  float: right;
  padding: 1em 3em
}

input[type="submit"]:focus{
  outline: none;
}

.errormessage{
  color: #FFF;
  padding: 1em 2em;
  background: #E52437;
  border-radius: 30px;
  margin-top: 0.5em;
  width: auto;
  position: relative;
  display: none;
}

.contactform__field--textarea .errormessage{
  margin-top: 0;
}

.errormessage::before{
  content: "";
  width: 15px;
  height: 15px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/framework/form_error_point.png");
  position: absolute;
  top: -15px;
  z-index: 10;
}

#successmessage{
  display: none;
}

.successmessage{
  color: #FFF;
  padding: 1em 2em;
  background: #009f65;
  border-radius: 30px;
  margin-top: 0.5em;
  width: auto;
  position: relative;
}

.successmessage .fa{
  margin-right: 0.5em;
}

.contactform__field{
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-bottom: 2em;
  vertical-align: top;
}

.contactform__field--half{
  box-sizing: border-box;
}

.contactenquiries__tel a, .contactenquiries__email a{
  display: block;
}

.contactenquiries__address h4{
  max-width: 90px;
  position: absolute;
  line-height: 1.3;
}

.contactenquiries__address p{
  margin-left: 90px;
  line-height: 1.3;
}

.contactenquiries .profilepic{
  max-width: 7em;
}

.contactenquiries .profile{
  margin-top: 0.5em;
  padding-top: 1.5em;
  border-top: 1px solid #d1dae8;
}



@media only screen and (min-width: 550px){

  .contactform__field--half{
    width: 50%;
    display: inline-block;
  }

  .contactenquiries__tel a, .contactenquiries__email a{
    display: inline-block;
  }

  .contactenquiries .profile{
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    padding-left: 1.5em;
    border-left: 1px solid #d1dae8;
  }

}

@media only screen and (min-width: 800px){

  .contactform__bd, .contactenquiries__bd{
    margin: 0 11%;
  }

  .contactform__field--half{
    width: 100%;
    display: block;
  }

  .contactenquiries .profile{
    padding-left: 0;
    border-left: none;
    margin-top: 0.5em;
    padding-top: 1.5em;
    border-top: 1px solid #d1dae8;
  }

}

@media only screen and (min-width: 900px){

  .contactenquiries__tel a, .contactenquiries__email a{
    display: block;
  }

}

@media only screen and (min-width: 1000px){

  .contactform__field--half{
    width: 50%;
    display: inline-block;
  }

}

@media only screen and (min-width: 1400px){

  .contactenquiries__bd{
    margin: 0 20%;
  }

}

/*  ==========================================================================
  investors page
  ========================================================================== */

.main--investors .pageheader__leader{
  margin: 0 auto;
}

.investorsheader{
    background: #008756;
    position: relative;
    margin-bottom: -1.2em;
}

.investorsheadergraph{
    background: #008756;
    padding: 0% 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.investorsheadergraph .chart--investors{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 0; }
.investorsheadergraph canvas{ width: 100% !important; height: 100% !important; }

.flexresults.flexresults--investorsubheader{
  background: #009f65;
  position: relative;
}

.flexresults--investorsubheader .flexresults__table__header{
  background: #FFF;
  color: #008756;
}

.flexresults--investorsubheader ul li{
  background: #008756;
  color: #FFF;
  border-color: #009f65;
}

.flexresults--investorsubheader .flexresults__table ul li:hover{
  background: #123264;
}

.flexresults__table ul li span{
  float: right;
}

.flexresults__time{
  float: right;
}

.flexresults__table .flexresults__table__gbx{
  float: right;
  margin-top: -1.6em;
}

@media only screen and (min-width: 350px){
  .investorsheader{
      margin-bottom: -1em
  }
}

@media only screen and (min-width: 550px){
  .investorsheader{
      margin-bottom: -0.7em
  }
}

@media only screen and (min-width: 800px){
  .investorsheader{
      margin-bottom: -0.6em
  }
}

@media only screen and (min-width: 1000px){
  .investorsheader{
      margin-bottom: -0.5em
  }
}

@media only screen and (min-width: 1200px){
  .investorsheader{
      margin-bottom: -0.4em
  }
}

/*  ==========================================================================
  History Page
  ========================================================================== */

.historytimeline{
  position: relative;
}

.historytimeline:before{
  content: ' ';
  display: block;
  width: 0;
  left: 50%;
  height: 100%;
  top: 2em;
  position: absolute;
  border-left: solid 1px rgba(57,67,71,.15);
}

/* History Item */

.historytimeline .history:last-child{
  position: relative;
}

.historytimeline .history:last-child::after{
  content: ' ';
  display: block;
  width: 100%;
  left: 0;
  margin-left: -3px;
  background: #FFF;
  height: 8%;
  bottom: -8%;
  position: absolute;
  z-index: 1;
}

.history .history__datewrap{
  text-align: center;
  position: relative;
  z-index: 2;
}

.history--right .history__contentcontainer::before{
  left: auto;
  right: 0;
}

.history .history__date{
  position: relative;
  background: #FFF;
}

.history .history__date h2{
  text-align: center;
}

.history .history__contentcontainer{
  text-align: center;
  position: relative;
}

.history__content{
  border: solid 1px rgba(57,67,71,.15);
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  position: relative;
  background: #FFF;
}

.history--withpost .history__content{
  padding-bottom: 4em;
  margin-bottom: -5em;
}

.history__content:before{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  width: 3em;
  bottom: 0;
  left: -1.6em;
  background: url(img/shadow.png) no-repeat center top;
  background-size: contain;
  z-index: -1;
}

.history--right .history__content:before{
  left: auto;
  right: -1.6em;
}

.historycontent__imgs--2 .historycontent__img{
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
}

.historycontent__imgs--2 .historycontent__img{
  padding-right: 1em;
}

.history__post{
  position: relative;
  margin-left: 50%;
}

.history--right .history__post{
  margin-left: 0;
  margin-right: 50%;
}

.history__post:before{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  width: 3em;
  bottom: 0;
  left: -2em;
  background: url(img/shadow.png) no-repeat center top;
  background-size: contain;
}

.history--right .history__post:before{
  left: auto;
  right: -2em;
}

.history__post .posts--inline .post{
  width: 100%;
}

.history__post .posts--inline:before{
  display: none;
}

.history--right .history__datewrap--last{ display: none; }



@media only screen and (min-width: 550px){
  .history__post:before{
    left: -3em;
  }
  .history--right .history__post:before{
    right: -3em;
  }
}
@media only screen and (min-width: 1000px){

  .history  .history__date h2{
    text-align: right;
  }
  .history__datewrap--last .history__date h2{
    text-align: left;
  }

  .history--right .history__datewrap--first{ display: none; }
  .history--right .history__datewrap--last{ display: inline-block; }

  .history__datewrap::before, .history__contentcontainer::before{
    content: '';
    display: block;
    width: 15%;
    right: 0;
    height: 0;
    top: 2em;
    position: absolute;
    border-top: solid 1px rgba(57,67,71,.15);
  }

  .history--right .history__datewrap--last::before{
    left: 0;
    right: auto;
  }

  .history__datewrap::after{
    content: '';
    display: block;
    right: 0;
    top: 2em;
    transform: translate(7px, -7px);
    position: absolute;
    width: 14px;
    height: 14px;
    background: #133468;
    border-radius: 50%;
    z-index: 20;
  }

  .history--right .history__datewrap--last::after{
    left: 0;
    right: auto;
    transform: translate(-7px, -7px);
  }

  .history__contentcontainer::before{
    right: auto;
    left: 0;
  }

  .historytimeline .history:last-child::after{
    content: ' ';
    display: block;
    width: 0;
    left: 50%;
    margin-left: -3px;
    height: 100%;
    top: 2em;
    position: absolute;
    border-left: solid 6px #FFF;
    z-index: 1;
  }


}

/*  ==========================================================================
  Asset / Media Library
  ========================================================================== */

.assettags__list{
  list-style: none;
}

.assettags__list li{
  display: inline-block;
  margin-right: 1em;
}

.assettags__list li a .linkline{ border-color: #fff; }

.assettags__list li a:hover{
  color: #394347;
}

.assettags__list li a:hover .linkline{ border-color: #394347; }

.assetsearch .gd-u{
  display: block;
  float: right;
}

/* Asset search */

.assetsearch__form{
  position: relative;
}

.assetsearch__searchsubmit {
  z-index: 10;
  position: absolute;
  margin: 0;
  right: 0;
  top: 0;
}

input.assetsearch__searchinput{
  background: #ebecec;
  border: none;
  padding-right: 10em;
}

input.assetsearch__searchinput::-webkit-input-placeholder {
  color: #333333;
  opacity: 1;
  font-weight: 400;
}
input.assetsearch__searchinput::-moz-placeholder {
  color: #333333;
  opacity: 1;
  font-weight: 400;
}
input.assetsearch__searchinput::-ms-input-placeholder {
  color: #333333;
  opacity: 1;
  font-weight: 400;
}
input.assetsearch__searchinput::placeholder {
  color: #333333;
  opacity: 1;
  font-weight: 400;
}

/* Asset item */

.asset{
  position: relative;
  margin-bottom: 2em;
}

.asset__content{
  margin-left: 2em;
  position: relative;
}

.asset__content::before{
  content: '\f059';
  font-family: 'FontAwesome';
  position: absolute;
  top: -0.15em;
  left: -2em;
}

.asset--folder .asset__content::before{
  content: '\f07c';
  color: #6bccf9;
}

.asset--pdf .asset__content::before{
  content: '\f1c1';
  color: #E52437;
}

.asset--image .asset__content::before{
  content: '\f03e';
  color: #33a575;
}

.asset--video .asset__content::before{
  content: '\f03d';
  color: #7d3b8e;
}

.asset__password, .asset__type{
  display: inline-block;
}

.asset__password{
  margin-right: 1em;
}

.asset__password .fa{
  margin-right: 0.4em;
}


@media only screen and (min-width: 550px){

  input.assetsearch__searchinput{
    padding-right: 14em;
  }

  .assetsearch__searchsubmit {
    padding-left: 3em;
    padding-right: 3em;
  }

}

@media only screen and (min-width: 700px){

  .assettags{
    float: left;
    margin-top: 0;
  }

  .assettags__list li{
    display: block;
    margin-right: 0;
  }

}


/*  ==========================================================================
  Homepage
  ========================================================================== */

/* Latest articles */

.latestarticles .post{
  padding: 0;
  padding-bottom: 1.75em;
}

.latestarticles .post--featurefirst{
  padding-bottom: 0;
}

.latestarticles .post--featurefirst .post__img{
  padding: 120% 0 0 0;
}

.latestarticles .post{
  width: 100%;
}

.latestarticles .latestarticles__list .post__inner{
  padding-bottom: 1.5em;
  border-bottom: solid 1px rgba(57,67,71,.15);
}

.latestarticles .latestarticles__list .post__img, .latestarticles .latestarticles__list .post__desc{
  display: none;
}

.latestarticles .latestarticles__list{
  padding-top: 4em;
}

@media only screen and (min-width: 550px){
  .latestarticles .post--featurefirst .post__img{
    padding: 70% 0 0 0;
  }
}

@media only screen and (min-width: 800px){
  .latestarticles .latestarticles__list{
    padding-top: 0;
  }
  .latestarticles .post--featurefirst .post__img{
    padding: 140% 0 0 0;
  }
}

@media only screen and (min-width: 900px){
  .latestarticles .post--featurefirst .post__img{
    padding: 120% 0 0 0;
  }
}

@media only screen and (min-width: 1000px){
  .latestarticles .post--featurefirst .post__img{
    padding:  90% 0 0 0;
  }
}

@media only screen and (min-width: 1300px){
  .latestarticles .post--featurefirst .post__img{
    padding:  70% 0 0 0;
  }
}






/*  ==========================================================================
  tagcloud
  ========================================================================== */

.tagcloud{
    text-align: center;
}

.tag-nav{
    max-width: 50em;
    margin: 0 auto;
}

.tagcloud__list li{
    margin: 0 .5em .25em;
    display: inline-block;

}









/*  ==========================================================================
  jobs
  ========================================================================== */

.pageheader--cover.color--white .btn{
    border-color: rgba(255,255,255,.2);
}

.job-feed__list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.job-feed__item{
    padding-bottom: 1.5em;
    padding-top: 1.5em;
    border-bottom: solid 1px rgba(57,67,71,.15);
    position: relative;
    overflow: hidden;
}

.job-feed__title{
    font-size: 1.33em;
    font-weight: 600;
    margin: 0 0 .5em;
}
.job-feed__action a{
    font-size: .75em;
}

.job-feed__content{
    margin-bottom: 1em;
}

.job-feed__location,
.job-feed__date{
    display: inline-block;
    margin-right: 1em;
}

.job-feed__content .job-feed__icon{
    width: 1em;
    margin: 0 .5em 0 0;
}

@media only screen and (min-width: 700px){
    .job-feed__item{
        padding: 2em 15em 2em 0;
    }

    .job-feed__action{
        position: absolute;
        top: 2em;
        right: 0;
    }

    .job-feed__action a{
        margin: 0 0 0 .25em
    }

    .job-feed__content{ margin-bottom: 0; }
}

@media only screen and (min-width: 1000px){
    .job-feed__title{ font-size: 1.5em; }
    .job-feed__item{ padding: 2.5em 15em 2.5em 0; }
    .job-feed__action{ top: 2.5em; }
}

@media only screen and (min-width: 1200px){
    .job-feed__title{ width: 66.6%; float: left; }
    .job-feed__micro{ width: 33.3%; float: left; }
    .job-feed__micro .job-feed__location,
    .job-feed__micro .job-feed__date{ display: block; }
}


.main--contactblue .pageheader__heading.fontsize--massive.color--blue {
    color: #fff;
}



/*  ==========================================================================
  jobs
  ========================================================================== */

.post--first .post__header{
    padding: 10%;
    background: #f6f6f6;
}

/* ===========================================================================
  login pages
  ========================================================================== */
/*
.login_header_content{
  color: #394347;
  background-color: #fff;
  padding-left: 190px;
  padding-top: 125px;
  max-width: 21em;
}

.login_page_content{
  color: #394347;
  background-color: #fff;
  padding-left: 190px;
  max-width: 24em;
  margin-bottom: 0px;
}



.login_right_side{
  /* Rectangle 50 */
/*  position: absolute;
  width: 50vw;
  height: 120%;
  right: 0px;
  top: 0px;
  /* Highlight */
/*  background: #FAF7CB;
}

.right_side_content{
  position: absolute;
  left: 10%;
  top: 16%;
}

.right_side_text{
  position: absolute;
  left: 10%;
  top: 23%;
  max-width: 16em;
}

.right_side_button{
  position: absolute;
  left: 10%;
  top: 37%;
  max-width: 15em;
}
*/

.mt-0{margin-top: 0 !important;}
.pt-10{padding-top:100px;}

.login-page .sitefooter.margin--top{margin-top: 1%;}

.login-wrap{display: flex;}

.login-left-side{padding-left: 179px;}

.login_right_side{
  background: #FAF7CB;
  padding-left: 125px;
}

.login_right_side .right_side_content{max-width: 310px;}


.above--button{
  padding-top: 20px;
  margin-bottom: 5px;
}

.email_text_input{
  border-radius: 4px !important;
  border-width: 1px !important;
  max-width: 16em;
  padding-left: 0px;
  border-color: #394347 !important;
  padding-bottom: 20px;
}

::placeholder{
  position: absolute;
  height: 24px;
  left: 22px;
  right: 45px;
  top: calc(50% - 24px/2);
  font-size: 16px;
  line-height: 150%;
  /* identical to box height, or 24px */
  display: flex;
  align-items: center;
  color: #394347;
  opacity: 0.5;
}

.login_page_forgotten{
  color: #394347;
  background-color: #fff;
  padding-left: 0px;
  max-width: 24em;
  padding-bottom: 20px;
  padding-top: 20px;
}


.login_btn{
  background: none;
  border: solid 1px #888;
  border-radius: 4px;
  display: inline-block;
  margin-top: 20px;
  padding: 1em 1em;
  color: #394347;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  -webkit-transition: color 150ms ease-out 0ms;
  -moz-transition: color 150ms ease-out 0ms;
  transition: color 150ms ease-out 0ms;
}

.login_btn:before{
  content: ' ';
  background: #394347;
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  -webkit-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  -moz-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
}
.login_btn:hover, .login_btn_blk:hover{ color: #fff; box-shadow: 0 0 50px rgba(0,0,0,.25); border-color: #394347; }
.login_btn:hover:before, .login_btn_blk:hover:before{ width: 100%; }
.login_btn.readyforright:before{
  left: auto; right: 0;
}

.login_btn span, .login_btn_blk span{
  border: none;
  position: relative;
  z-index: 2;
}

.login_btn--line{
  border: solid 1px rgba(30,78,157,.15);
  color: #394347;
}

.color--white .login_btn--line{
  border: solid 1px rgba(255,255,255,.2);
  color: #fff;
}

.color--white .login_btn--line:hover{
  color: #1e4e9d;
}

.color--white .login_btn--line:before{ background: #fff; }

.login_btn .fa, .login_btn_blk .fa{ padding: 0 0 0 1em; }
.login_btn .fa--left, .login_btn_blk .fa--left{ padding: 0 1em 0 0; }
.login_btn .fa--nopad, .login_btn_blk .fa--nopad{ padding: 0; }

.login_btn .linkline, .login_btn_blk .linkline{ border: none; background: none; }

.login_btn--blue{ background: #394347; color: #fff; }
.login_btn--blue:hover .linkline{color: #394347;}
.login_btn--blue:before{ background: #fff; }

.color--white .login_btn--blue:before{ background: #fff; }
.color--white .login_btn--blue:hover{ color: #394347; }

@media only screen and (max-width: 767px){
  .login-wrap{display: inline-block;}
  .login-left-side{padding-left: 20px;padding-bottom: 2rem;}
  .login_right_side{padding-left: 20px;padding-bottom: 2rem;}
  .email_text_input{max-width:100%;padding-left: 10px;padding-right: 10px;}
  .pt-10{padding-top: 75px !important;}
  .password_requirements{max-width: 80vw !important;}
  .sign_out_button{top: 0 !important;}
}

.password_requirements{
  padding-left: 1.5rem;
  max-width: 20vw;
}

.below--button{
  padding-top: 3rem;
}

/* page 4 */

.sign_out_button{
  position: absolute;
  right: 5rem;
  top: 2rem;
  margin: 0;
}

.sign_out_button {
    position: absolute;
    right: 5rem;
    top: 2rem;
    margin: 0;
}

/* assets-library*/
.docu_content_wrapper {
    display: flex;
    /*width: 80.5vw;*/
    margin: 100px 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(57,67,71,.15);
}

.doc-year-item{
  border-top: 1px solid rgba(57,67,71,.15);
}

.doc-year-item:first-child{
  border-top: none;
}

.doc-item{
  display: flex;
  
}

.year-block{
  flex: 1;
  padding-top:40px;
}

.year_bond {
    font-weight: bolder;
}

.docu_content {
    display: flex;
    flex-direction: column;
    flex: 3.5;
    gap: 2rem;
    padding: 40px 5em 40px 0;
    border-bottom: 1px solid rgba(57,67,71,.15);
}

.docu_content p,
.docu_content h4 {margin: 0}

.docu_item {
    display: flex;
    gap: 1rem;
    
}

.docu_item_content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.docu_item_title {
    display: flex;
    gap: 1rem;
}

.docu_item_text {
    max-width: 50rem;
}

.docu_item_date {
    font-weight: lighter;
}

.docu_separator {
    border: none;
    height: 1px;
    margin: 0;
    flex-shrink: 0;
    background-color: rgba(57,67,71,.15);
}
.logout-wrap {
    text-align: right;
}
.login-sec .loginError p{
  margin-top: 10px;
    color: red;
}
.template-pur footer.margin--top {
    margin-top: 14px;
}
.login-sec .effect--ready.login-left-side {
    padding-bottom: 11%;
}
.login-sec .effect--ready.login_right_side {
    padding-bottom: 5%;
}
.login_btn_blk{
  background: #394347;
  border: solid 1px #888;
  border-radius: 4px;
  display: inline-block;
  margin-top: 20px;
  padding: 1em 1em;
  color: #FFFFFF;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  -webkit-transition: color 150ms ease-out 0ms;
  -moz-transition: color 150ms ease-out 0ms;
  transition: color 150ms ease-out 0ms;
}

.login_btn_blk:before{
  content: ' ';
  background: #2A4E98;
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  -webkit-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  -moz-transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
}
#meter_wrapper{
   border: 1px solid #F6F6F6;
   background: #F6F6F6;
   margin-top: 6px;
   width: 100%;
   height: 6px;
   border-radius:3px;
}
 #meter{
   height: 6px;
   border-radius:3px;
}
#pass_type{
   font-family: 'omnes-pro';
   font-weight: 600;
   font-size: 12px;
   margin-top: 6px;
   float: right;
   color: #394347;
}
.password_requirements ol li {
    font-size: 12px;
}