<style>
  html, body {
  color: #fff;
  background-color: #1c1c1c;
  background: url("assets/field4.png");
  background-size:cover;
  background-position: top;
  background-attachment: fixed;
  position: relative;
}

body {
  /*padding-top: 96px;*/
  /*Depth of navbar*/
  font-family: 'Open Sans', sans-serif;
}

footer {
  /*margin-top: 2rem;*/
  background-color: #181818;
}

/*NAVIGATION*/

.navbar {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: .75rem;
}

.nav-item.dropdown .dropdown-item {
  font-family: 'Montserrat', sans-serif;
  text-transform: capitalize;
  font-weight: normal;
  font-size: .75rem;
}

.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  text-transform: capitalize;
  font-weight: normal;
  /*font-size: .75rem;*/
}

.bg-sc-dark {
  background-color: rgba(24, 24, 24, 0.91) !important;
  z-index: 99;
}

.bg-sc-medium {
  background-color: rgba(33, 33, 33, 0.85) !important;
  z-index: 2;
}

.bg-semitransparent {
  background-color: rgba(52, 58, 64, 0.75) !important
}

.nav-container {
  max-width:1280px;
}


.sticky-top {
  transition: all 0.25s ease-in;
}

/* style for when sitcky is applied */
.stuck .sticky-top {
  background-color: rgba(24, 24, 24, 0.95) !important
  /*padding-top: 3px !important;*/
  /*padding-bottom: 3px !important;*/
}



.navbar-brand-small {
  font-size:1rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-divider {
  height:60%;
  margin-top:7px;
  margin-left:.25rem;
  margin-right:.25rem;
  width:1px;
  background-color: rgba(255, 255, 255, 0.25);
}

.banner-container {
  position: fixed;
  top: -200px;
  left: 0;
  z-index: 0;

}

.banner-header-wrapper {
  padding-top:2rem;
  padding-bottom:rem;
  display:inline-block;

}

@media (min-device-width: 532px){
  img.header-icon {
    max-width:160px;
  }
}

.banner-header-icon {
  display:inline-block;
}

.banner-header-text {
  display:inline-block;
  transform: translateY(40px);
}

img.header-icon {
  max-width:240px;
}


@media screen and (max-width: 531px) {

  img.header-icon {
    max-width:160px;
  }
  .banner-header-wrapper {
    padding-top:4rem;
    padding-bottom: 7rem;
  }

  .banner-header-text {
    transform: none;
  }
  .banner-text-top {
     text-align: center;
   }
  .banner-text {
    text-align: center;
  }
  .banner-text-bottom {
    text-align: center !important;
  }
  .banner-container {
    top: -150px;
    left: 0;
    z-index: 0;
    left: -900px;
  }
}

iframe{
  width: 1px;
  min-width: 100%;
  *width: 100%;
}

span.banner-text-top {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.9rem;
  line-height:1.9rem;
  font-weight: 600;
  display: block;
  display: block;
  /*padding-left:1rem;*/
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  /*margin-top:1rem;*/
  text-transform: uppercase;
}


span.banner-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.25rem;
  line-height:3.25rem;
  font-weight: 600;
  display: block;
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
}


span.banner-text-bottom {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.9rem;
  line-height:1.9rem;
  font-weight: 600;
  display: block;
  /*padding-right:1rem;*/
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
}


.dropdown-menu {
  z-index:9999;
}


.navbar-nav .drodown-menu {
  background-color:#181818;
}
.navbar-nav .drodown-menu .dropdown-item {
  background-color:#ffffff;
}


.navbar-nav .dropdown-menu {
  background-color: rgba(24, 24, 24, 0.95);
  border: 1px solid #ffffff82;
  /*border-bottom: 7px solid #ffffff82;*/
}

.nav-item.dropdown .dropdown-item {
  color: white;
  padding: .5rem 1.25rem;
}

.nav-item.dropdown .dropdown-item:hover {
  color: #181818;
}

@media only screen and (min-device-width: 992px) {

  .dropdown-menu:after {
    position: absolute;
    top: -7px;
    left: 24px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff82;
    border-left: 6px solid transparent;
    content: '';
  }
}

/*NAVIGATION TABS*/


.subnav-link {
  padding: 1rem 1rem;
  display: inline-block;
}

.subnav-link-sub {
  padding-left: .25rem;
  padding-right: .25rem;
  display: inline-block;
  font-weight:normal;
  /*transition: 0.3s ease-in-out;*/
}

.nav-tabs {
  background: #181818;
  font-weight: 500;
  border-bottom: 1px solid #181818;
}

.nav-tabs .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.02);
  border-color: transparent;
  font-weight:600;
}

.nav-tabs .nav-link.subnav-link-sub.active {
  color: #858585;
  font-weight:normal;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  border-color: transparent;
}

/*GENERAL*/

.hidden {
  display:none;
}
a {
  color: #ceb895;
}

a:hover {
  /*color: #9e9e9e;*/
  color: #ceb895;
  /*text-decoration: underline;*/
}

.container-dark {
  background: #212121;
  padding-top: 1rem;
  border-top:24px solid #181818;
  z-index: 1;
  position: relative;
}

.container.container-subnav {
  background: #181818;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(19,19,19,.33);
  border-bottom: 1px solid rgba(236,236,236,.11);
}

.text-icon {
  width:20px;
  height: 20px;
  margin-right: 2px;
  transform: translate(0,-2px);
}

.summary-bar-icon {
  width:20px;
  height: 20px;
  /*margin-right: 2px;*/
  transform: translate(0,-2px);
}

.guide-nav-icon {
  width:40px;
  height: 40px;
  /*margin-right: 2px;*/
  display:inline-block;
  border: 3px solid #ffffff;
  margin:1px;
  margin-bottom:2px;
  border-radius: 4px;
}

.collapse.show a:hover {
  text-decoration: none;
}

.text-icon-nav {
  width:20px;
  height: 20px;
  margin-right: 10px;
  transform: translate(0,0px);
}

.custom-counter .text-icon {
  margin-right: 5px;
}

.benchmarks-composition-icon {
  border: 0px solid transparent;
  transition: .5s;
}

.benchmarks-composition-icon:hover {
  border: 5px solid transparent;
  transition: .5s;
}

.benchmark-prof-icon {
  width:24px;
  height: 24px;

  /*margin-right: 6px;*/
  /*transform: translate(0,5px);*/
}

.benchmark-prof-icon-border {
  width:30px;
  height: 24px;

  border-left:1px solid rgba(255, 255, 255, 0.25);
  margin-left: 6px;
  padding-left:6px;
}

.benchmark-divider {
  height: 60%;
  margin-top: 7px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.25);
}



h1.fancy {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.56);
  line-height: 0.1em;
  margin: 20px 0 40px;
  font-weight:400;
  font-size:1.75rem;
  text-transform: uppercase;
}

h1.fancy span {
  background:#212121;
  padding:0 10px;
}

h2.fancy {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.56);
  line-height: 0.1em;
  font-weight:400;
  font-size:1.0rem;
  text-transform: uppercase;
}

h2.fancy span {
  background:#212121;
  padding:0 10px;
}
/*FONT STYLES*/

h3.boss-title {
  font-weight: 500;
  /*padding-top:2rem;*/
}

/*PARSED STYLES*/

.a-pProf {
  display:inline-block;
}

.a-pBoon {
  display:inline-block;
}



/*BUILD PAGES*/

.armory-title {
  line-height: 55px;
  color: #ceb895;
  margin-left:.5rem;
}

.armory-title-sub {
  /*line-height: 55px;*/
  font-size:.75rem;
  color: #6c757d;
  /*margin-left:.5rem;*/
}

.armory-title-main {
  /*line-height: 55px;*/
  color: #ceb895;
  /*margin-left:.5rem;*/
}

.armory-title-small {
  /*line-height: 55px;*/
  font-size:.75rem;
  color: #6c757d;
  /*margin-left:.5rem;*/
}

.benchmarks-composition-title {
  /*line-height: 55px;*/
  font-size:.75rem;
  color: rgba(255, 255, 255, 0.75);
  /*margin-left:.5rem;*/
}

.armory-vertical-spacer {
  width:100%;
  height:6px;
}

.traitlines-wrapper {
  display:flex;
  align-content: center;
  align-items: center;
}

.custom-counter {
  margin: 0;
  padding: 0px;
  margin-left: 0px;
  margin-top: 0px;
  list-style-type: none;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}
.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 15px;
  background-color: #181818;
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  min-width: 50px;
}

.custom-counter > h6 {
  margin-top:5px;
}

img.prof-header {
  height: 100px;
}

.gw2a--10x8O {
  margin-left: auto;
  margin-right: auto;
}

span.build-note {
  font-size: .75rem;
  line-height: 1;
}

span[data-armory-size="20"] {
  display: inline-block;
  transform: translate(0,-2px);
}

span[data-armory-size="24"] {
  display: inline-block;
  transform: translate(0,6px);
}

.boss-icon {
  height:48px;
  width:48px;
  border:1px solid #1f232c;
  margin-bottom:4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border:1px solid rgba(255, 255, 255, 0.57);
  display:inline-block;
  background-size: contain;
}

.boss-icon.none {
  border:1px solid #cb3534;
  opacity: .5;
}

.boss-icon.low {border:2px solid #cb3534;}
.boss-icon.med {border:2px solid #cb843b;}
.boss-icon.high {border:2px solid #7bcb45;}
.boss-icon.meta {border:2px solid #7bcb45;}
.boss-icon.white {border:2px solid rgba(255, 255, 255, 0.57);}


/*GUIDE STYLES*/

.badge-stat {
  color: #fff;
  background-color: #181818;
  /*min-height:32px;*/
  font-size: 48%;
  font-weight: 500;
  vertical-align: middle;
  border:1px solid #111111;
}

.badge-link {
  color: #fff;
  background-color: #473265;
  /*min-height:32px;*/
  font-size: 48%;
  font-weight: 500;
  vertical-align: middle;
  transition:0.5s;
  border:1px solid #110e1d;
}

.badge-link:hover {
  color: #fff;
  background-color: #724192;
  transition:0.5s;
}

.hightmatch-20 {
  width:1px;
  height:20px;
  display:inline-block;
}

/*CARDS*/

.card {
  background-color: #303030;
  border: 1px solid transparent;
  margin-bottom:2rem;
}

.card-header {
  padding: .25rem 1.25rem;
  margin-bottom: 0;
  /* background-color: rgba(255,255,255,.10); */
  border-bottom: 1px solid rgba(0,0,0,.125);
  font-size: 1.25rem;
  text-align: center;
}


/*BENCHMARKS*/

.bm-bar-wrapper {
  padding-left:1rem;
  padding-right:1rem;
  transition: 0.3s ease-out;
}

.bm-bar-wrapper:hover {
  padding-left:0rem;
  padding-right:0rem;
  transition: 0.1s ease-out;
}

.bm-bar-wrapper span {
  color: #fff;
}


.bm-bar-top {
  padding: .25rem 1rem;
  overflow: auto;
  font-size:1rem;
  /*line-height:2rem;*/
}

.bm-bar-avg {
  padding: .25rem 1rem;
  overflow: auto;
  font-size:.6rem;
  margin-bottom: 4px;

}

.bm-bar-icon {
  float:left;
  font-size:1.5rem;
  transform: translate(0,-5px);
}

.bm-bar-left {
  float:left;
  padding:.4rem;
}

.bm-bar-right {
  float:right;
  padding:.4rem 0;
}


.bm-bar-avg > .bm-bar-right {
  float:right;
  padding:0 0;
}

/*PROFESSION COLOURS*/

.clr-elementalist {background: #a3362e;}
.clr-container-elementalist {border-top: 24px solid #a3362e;}
.clr-elementalist-light {background: #c54838;}
.clr-elementalist-dark {background: #a3362e;}
.clr-txt-elementalist, .clr-txt-elementalist a, a.clr-txt-elementalist:hover,
.clr-txt-tempest, .clr-txt-tempest a, a.clr-txt-tempest:hover,
.clr-txt-weaver, .clr-txt-weaver a, a.clr-txt-weaver:hover {color: #c54838;}
.nav-pills-elementalist .nav-link.active, .nav-pills-elementalist .show>.nav-link {color: #fff;background-color: #a3362e;}
.nav-pills-elementalist a {color: #ffffff;}
/*.nav-pills-elementalist a {color: #c54838;}*/


.clr-warrior {background: #bc8d16;}
.clr-container-warrior {border-top: 24px solid #bc8d16;}
.clr-warrior-light {background: #d9ac3b;}
.clr-warrior-dark {background: #bc8d16;}
.clr-txt-warrior, .clr-txt-warrior a, a.clr-txt-warrior:hover,
.clr-txt-berserker, .clr-txt-berserker a, a.clr-txt-berserker:hover,
.clr-txt-spellbreaker, .clr-txt-spellbreaker a, a.clr-txt-spellbreaker:hover {color: #d9ac3b;}
.nav-pills-warrior .nav-link.active, .nav-pills-warrior .show>.nav-link {color: #fff;background-color: #bc8d16;}
.nav-pills-warrior a {color: #ffffff;}
/*.nav-pills-warrior a {color: #d9ac3b;}*/

.clr-revenant {background: #572435;}
.clr-container-revenant {border-top: 24px solid #572435;}
.clr-revenant-light {background: #7e3648;}
.clr-revenant-dark {background: #572435;}
.clr-txt-revenant, .clr-txt-revenant a, a.clr-txt-revenant:hover,
.clr-txt-herald, .clr-txt-herald a, a.clr-txt-herald:hover,
.clr-txt-renegade, .clr-txt-renegade a, a.clr-txt-renegade:hover {color: #7e3648;}
.nav-pills-revenant .nav-link.active, .nav-pills-revenant .show>.nav-link {color: #fff;background-color: #572435;}
.nav-pills-revenant a {color: #ffffff;}
/*.nav-pills-revenant a {color: #7e3648;}*/

.clr-guardian {background: #67aecb;}
.clr-container-guardian {border-top: 24px solid #67aecb;}
.clr-guardian-light {background: #95d5e7;}
.clr-guardian-dark {background: #67aecb;}
.clr-txt-guardian, .clr-txt-guardian a, a.clr-txt-guardian:hover,
.clr-txt-dragonhunter, .clr-txt-dragonhunter a, a.clr-txt-dragonhunter:hover,
.clr-txt-firebrand, .clr-txt-firebrand a, a.clr-txt-firebrand:hover {color: #95d5e7;}
.nav-pills-guardian .nav-link.active, .nav-pills-guardian .show>.nav-link {color: #fff;background-color: #67aecb;}
.nav-pills-guardian a {color: #ffffff;}
/*.nav-pills-guardian a {color: #67aecb;}*/

.clr-mesmer {background: #724192;}
.clr-container-mesmer {border-top: 24px solid #724192;}
.clr-mesmer-light {background: #9d66a6;}
.clr-mesmer-dark {background: #724192;}
.clr-txt-mesmer, .clr-txt-mesmer a, a.clr-txt-mesmer:hover,
.clr-txt-chronomancer, .clr-txt-chronomancer a, a.clr-txt-chronomancer:hover,
.clr-txt-mirage, .clr-txt-mirage a, a.clr-txt-mirage:hover {color: #9d66a6;}
.nav-pills-mesmer .nav-link.active, .nav-pills-mesmer .show>.nav-link {color: #fff;background-color: #724192;}
.nav-pills-mesmer a {color: #ffffff;}
/*.nav-pills-mesmer a {color: #9d66a6;}*/

.clr-engineer {background: #98692c;}
.clr-container-engineer {border-top: 24px solid #98692c;}
.clr-engineer-light {background: #ba8840;}
.clr-engineer-dark {background: #98692c;}
.clr-txt-engineer, .clr-txt-engineer a, a.clr-txt-engineer:hover,
.clr-txt-scrapper, .clr-txt-scrapper a, a.clr-txt-scrapper:hover,
.clr-txt-holosmith, .clr-txt-holosmith a, a.clr-txt-holosmith:hover {color: #ba8840;}
.nav-pills-engineer .nav-link.active, .nav-pills-engineer .show>.nav-link {color: #fff;background-color: #98692c;}
.nav-pills-engineer a {color: #ffffff;}
/*.nav-pills-engineer a {color: #ba8840;}*/

.clr-ranger {background: #8ea53a;}
.clr-container-ranger {border-top: 24px solid #8ea53a;}
.clr-ranger-light {background: #adc35d;}
.clr-ranger-dark {background: #8ea53a;}
.clr-txt-ranger, .clr-txt-ranger a, a.clr-txt-ranger:hover,
.clr-txt-druid, .clr-txt-druid a, a.clr-txt-druid:hover,
.clr-txt-soulbeast, .clr-txt-soulbeast a, a.clr-txt-soulbeast:hover {color: #adc35d;}
.nav-pills-ranger .nav-link.active, .nav-pills-ranger .show>.nav-link {color: #fff;background-color: #8ea53a;}
.nav-pills-ranger a {color: #ffffff;}
/*.nav-pills-ranger a {color: #adc35d;}*/

.clr-thief {background: #495578;}
.clr-container-thief {border-top: 24px solid #495578;}
.clr-thief-light {background: #676e8b;}
.clr-thief-dark {background: #495578;}
.clr-txt-thief, .clr-txt-thief a, a.clr-txt-thief:hover,
.clr-txt-daredevil, .clr-txt-daredevil a, a.clr-txt-daredevil:hover,
.clr-txt-deadeye, .clr-txt-deadeye a, a.clr-txt-deadeye:hover {color: #676e8b;}
.nav-pills-thief .nav-link.active, .nav-pills-thief .show>.nav-link {color: #fff;background-color: #495578;}
.nav-pills-thief a {color: #ffffff;}
/*.nav-pills-thief a {color: #676e8b;}*/

.clr-necromancer {background: #3f5847;}
.clr-container-necromancer {border-top: 24px solid #3f5847;}
.clr-necromancer-light {background: #5b775a;}
.clr-necromancer-dark {background: #3f5847;}
.clr-txt-necromancer, .clr-txt-necromancer a, a.clr-txt-necromancer:hover,
.clr-txt-reaper, .clr-txt-reaper a, a.clr-txt-reaper:hover,
.clr-txt-scourge, .clr-txt-scourge a, a.clr-txt-scourge:hover {color: #5b775a;}
.nav-pills-necromancer .nav-link.active, .nav-pills-necromancer .show>.nav-link {color: #fff;background-color: #3f5847;}
.nav-pills-necromancer a {color: #ffffff;}
/*.nav-pills-necromancer a {color: #3f5847;}*/


.clr-benchmarks {background: #ffffff;color:#181818;}
.clr-benchmarks-light {background: #ba8840;}
.clr-benchmarks-dark {background: #98692c;}
.clr-txt-benchmarks, .clr-txt-benchmarks a {color: #ceb895;}
.nav-pills-benchmarks .nav-link.active, .nav-pills-benchmarks .show>.nav-link {color: #181818;background-color: #efefef;}
.nav-pills-benchmarks a {color: #181818;}
.nav-pills-benchmarks .nav-link {
  padding: .5rem .5rem;
}

.clr-junk {background: #aaaaaa;}
.clr-txt-junk, .clr-txt-junk a {color: #aaaaaa;}

.clr-basic {background: #ffffff;}
.clr-txt-basic, .clr-txt-basic a {color: #ffffff;}

.clr-fine {background: #62a4e1;}
.clr-txt-fine, .clr-txt-fine a {color: #62a4e1;}

.clr-masterwork {background: #1a9306;}
.clr-txt-masterwork, .clr-txt-masterwork a {color: #1a9306;}

.clr-rare {background: #fcd00b;}
.clr-txt-rare, .clr-txt-rare a {color: #fcd00b;}

.clr-exotic {background: #ffa405;}
.clr-txt-exotic, .clr-txt-exotic a {color: #ffa405;}

.clr-ascended {background: #fb3e8d;}
.clr-txt-ascended, .clr-txt-ascended a {color: #fb3e8d;}

.clr-legendary {background: #4c139d;}
.clr-txt-legendary, .clr-txt-legendary a {color: #4c139d;}


.clr-toughness,
.clr-ferocity,
.clr-power,
.clr-precision,
.clr-vitality,
.clr-armor,
.clr-health {background: #aaaaaa;}
.clr-txt-toughness, a.clr-txt-toughness,
.clr-txt-ferocity, a.clr-txt-ferocity,
.clr-txt-power, a.clr-txt-power,
.clr-txt-precision, a.clr-txt-precision,
.clr-txt-vitality, a.clr-txt-vitality,
.clr-txt-armor, a.clr-txt-armor,
.clr-txt-health, a.clr-txt-health {color: #aaaaaa;}


.clr-green {color: #5b9e19;}
.clr-red {color: #d62a0f;}

/*JARALLAX*/


.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.jarallax-home {
  height:100vh;
}


.top-arrow-hidden {
  transition:0.5s;
  overflow:hidden;
  opacity: 0;
  width:0px;
  max-height:34px;
}

.top-arrow-visible {
  transition:0.5s;
  overflow:hidden;
  opacity: 1;
  width:27px;
  max-height:34px;
}

.dropdown-item.active, .dropdown-item:active {
  color: #181818;
  text-decoration: none;
  background-color: #ffffff;
}

footer {
  background-color:#181818;
  margin-top:4rem;
  padding: 2rem;
  border-top: 1rem solid #212121;
  position:relative;
  z-index: 1;
}

.user-img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: .875rem;
  word-wrap: break-word;
  background-color: #212121;
  background-clip: padding-box;
  /*border: 1px solid rgba(0,0,0,.2);*/
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: .3rem;
  min-width:150px;
}
.popover-body {
  padding: .5rem .75rem;
  color: #fff;
}

.popover-header {
  padding: .5rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: #ffffff;
  background-color: #181818;
  border-bottom: 1px solid #000000;
  border-top-left-radius: calc(.3rem - 1px);
  border-top-right-radius: calc(.3rem - 1px);
  text-align: center;
}

.popover-header>img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.popover-body>svg {
  min-width:1.4rem;
}

.popover-body>svg.fa-youtube {
  color:#d32322;
}

.popover-body>svg.fa-discord {
  color:#7289da;
}

.btn {
  padding: 3px;
}

.btn-outline-light {
  padding: 0rem .5rem .1rem .15rem;
  color: #f8f9fa;
  background-color: transparent;
  background-image: none;
  border-color: #f8f9fa;
  transform: translate(0,-1px);
  border-radius: 4px;
  margin: .5rem 0;
}

.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light.focus, .btn-outline-light:focus {
  box-shadow: 0 0 0 0.2rem rgba(248,249,250,.5);
}

footer {
  background-color:#181818;
  /*margin-top:4rem;*/
  padding: 2rem;
  border-top: 1rem solid #212121;
}

.user-img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: .875rem;
  word-wrap: break-word;
  background-color: #212121;
  background-clip: padding-box;
  /*border: 1px solid rgba(0,0,0,.2);*/
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: .3rem;
  min-width:150px;
}

.popover-body {
  padding: .5rem .75rem;
  color: #fff;
}

.popover-header {
  padding: .5rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: #ffffff;
  background-color: #181818;
  border-bottom: 1px solid #000000;
  border-top-left-radius: calc(.3rem - 1px);
  border-top-right-radius: calc(.3rem - 1px);
  text-align: center;
}

.popover-header>img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.popover-body>svg {
  min-width:1.4rem;
}

.popover-body>svg.fa-youtube {
  color:#d32322;
}

.popover-body>svg.fa-discord {
  color:#7289da;
}

.btn-outline-light {
  padding: 0rem .5rem .1rem .15rem;
  color: #f8f9fa;
  background-color: transparent;
  background-image: none;
  border-color: #f8f9fa;
  transform: translate(0,-1px);
  border-radius: 14px;
}

.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light.focus, .btn-outline-light:focus {
  box-shadow: 0 0 0 0.2rem rgba(248,249,250,.5);
}

footer  strong {
  /*margin-bottom:1rem;*/
  /*line-height:3;*/
}

.jarallax-about {
  padding-top:4rem;
  padding-bottom:4rem;
}

.img-home-button {
  margin-bottom: 15px;
  transition: .5s;
  border: 0px solid transparent;
}

.img-home-button:hover {
  transition: .5s;
  border-top: 8px solid transparent;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 7px solid transparent;
}

.img-max {
  width:100%;
}


.boss-title {
  /*margin-top: 4rem;*/
  text-align: center;
}

h3.guide-subtitle {
  margin-top: 3rem;
  /* margin-bottom: 2rem; */
  text-align: center;
  /* border-bottom: 1px solid; */
  border-bottom: 1px solid rgba(236,236,236,.11);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-size: 1.5rem;
}

h3.guide-subtitle.first {
margin-top:0;
}

.guide-skills {
  background-color: #181818;
  border-radius: .25rem;
  padding: 1rem;
  padding-bottom:.75rem;
  max-width:500px;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}
.guide-notice {
  background-color: #181818;
  border-radius: .25rem;
  padding: 1rem;
  max-width:500px;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}


h5.guide-subtitle {
  text-align: center;
  margin-bottom: 2rem;
}

.sticky-side-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
  z-index: 950;
  background-color: rgba(24, 24, 24, 0.95);
  border: 1px solid #ffffff82;
  /* border-bottom: 7px solid #ffffff82; */
}

a.anchor {
  display: block;
  position: relative;
  top: -50px;
  visibility: hidden;
}

.nonArmoryLink{
  color: #ceb895!important;
}

.nonArmoryLink:hover{
  color: #ceb895;
  text-decoration:underline;
}

.guide-boss-panel-wrapper {
  border: 1px solid rgba(236, 236, 236, 0.2);
  border-radius: .25rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

.general-panel-wrapper {
  border: 1px solid rgba(236, 236, 236, 0.2);
  border-radius: .25rem;
  padding: 1rem 1rem;
  margin-bottom: 2rem;
}

span.summary {
  font-size:.85rem;
}

.pet-wrapper {
  max-width:500px;
  margin:auto;
}

.pet-inner {
  background-color: #181818;
  border-radius: .25rem;
  padding: 1rem;
  /*margin-top: 2rem;*/
  /*margin-bottom: 2rem;*/
}

.pet-img {
  /*width: 64px;*/
  /*height: 64px;*/
}

.pet-title {
  font-size:1.25rem;
  color: #ceb895;
  /*margin-top:1rem;*/
}

.pet-sub {
  /*font-size:1.25rem;*/
  color: rgba(206, 184, 149, 0.61);
}


.boss-icon.none {
  border:3.5px solid #cb3534;
  opacity: .5;
}

.boss-icon.low {border:3.5px solid #8b0000;}
.boss-icon.med {border:3.5px solid #fd7e14;}
.boss-icon.high {border:3.5px solid #7bcb45;}
.boss-icon.meta {border:3.5px solid #7bcb45;}
.boss-icon.white {border:3.5px solid rgba(255, 255, 255, 0.57);}

.key-color {
  display: inline-block;
  height:10px;
  width:10px;
  border-radius: 50%;
  background-color: white;
  margin-left:8px;
}

.kc-meta {
  background-color: #7bcb45;
}

.kc-good {
  background-color: #7bcb45;
}

.kc-mediocre {
  background-color: #fd7e14;
}

.kc-unsubstantial {
  background-color: #8b0000;
}

.kc-inefficient {
  display: inline-block;
  background-color: #8b0000;
}

.armory-pad-right {
  margin-right: .5rem;
}

.mobile-btt {
  /*width:50px;*/
  /*height: 50px;*/
  background-color: rgba(24, 24, 24, 0.95) !important;
  position:fixed;
  left: -100px;
  bottom: 0;
  margin:8px;
  border: 1px solid rgba(232, 232, 232, 0.95) !important;
  font-size: 1.25rem;
  padding:10px 20px;
  transition: .3s;
  opacity: 0;
}

.top-arrow-mobile-hidden {
  left: -100px;
  transition: .3s;
}

.top-arrow-mobile-visible {
  left: 0px;
  transition: .3s;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .gw2a-tooltip-embed {
    margin-top: 50px;
  }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 480px) {
  h1.fancy {
    width: 100%;
    text-align: center;
    border-bottom: none;
    line-height: 1.5em;
    margin: 20px 0 40px;
    font-weight:400;
    font-size:1.75rem;
    text-transform: uppercase;
  }

  h1.fancy span {
    background:transparent;
    padding:0 10px;
  }

  .mobile-btt {
    /*width:50px;*/
    /*height: 50px;*/
    background-color: rgba(24, 24, 24, 0.95) !important;
    position:fixed;
    left: -100px;
    bottom: 0;
    margin:8px;
    border: 1px solid rgba(232, 232, 232, 0.95) !important;
    font-size: 1.25rem;
    padding:10px 20px;
    transition: .3s;
    opacity: 0;
  }

  .top-arrow-mobile-hidden {
    left: -100px;
    transition: .3s;
  }

  .top-arrow-mobile-visible {
    left: 0px;
    transition: .3s;
  }
}


@media (min-width: 992px) {
  .modal-lg {
    max-width: none;
    width: 80%;
  }
}
.videoThumb {
  cursor: pointer;
  height: 0;
  padding-bottom: 53%;
  background-image: url("http://placekitten.com/800/450");
  background-size: 100%;
  background-position: center;
  transition: 0.25s ease background-size;
}
.videoThumb:hover {
  background-size: 100%;
}
.videoThumb .videoThumbInner {
  height: 0;
  position: relative;
  padding-bottom: 53%;
  background-color: rgba(0, 0, 0, 0);
  transition: .25s;
}
.videoThumb .videoThumbInner:hover {
  background-color: rgba(0, 0, 0, 0);
}
.videoThumb .glyphicon-play {
  font-size: 56px;
  color: rgba(0, 0, 0, 0.51);
  text-align: center;
  transition: .25s;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -28px;
  margin-left: -28px;

}
.videoThumb:hover .glyphicon-play {
  /*font-size: 54px;*/
  font-size: 56px;
  padding: 1px;
    color: #ff0000;
}
.modal {
  background: rgba(0, 0, 0, 0.8);
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url("//demosthenes.info/assets/images/polina.jpg") no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade {
  opacity: .5;
}

.benchmarks-video-button {
    cursor: pointer;
}

.about-member-wrapper {
  position: relative;
  width:100%;
  height:200px;
  /*background: red;*/
  border-radius: .25rem;
  border: 1px solid black;
  background-image: url('/assets/members/axias.jpg');
  background-position: center;
  /*background-size: 120%;*/
  background-size:cover;
  margin-bottom:30px;
  transition: .15s ease-in-out;
}

.about-member-wrapper:hover {
  /*background-size: 117%;*/
}

.members-row {
  padding-left: 15px;
  padding-right: 15px;
}

.members-icons-row {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.about-member-icon-wrapper {
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #000000bd;
  font-size: 1.25rem;
  overflow:hidden;
}

.about-member-cluster-wrapper {
  transition: .25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}


.about-member-wrapper:hover .about-member-cluster-wrapper {
  transform: translate(0, -50px);
}

.members-icons-row > svg:hover {
  font-size:90%;
}

.members-icons-row a svg {
  color:white;
  font-size: 1rem;
}

.video-thumb-wrapper {
  width: 100%;
  height: 100%;
  background: white;
  display: inline-block;
  /*margin: 4px;*/
  overflow: hidden;
  background-size:cover;
  background-position: center;
}

div.stretchy-wrapper {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;

  background: blue;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  color: white;
  font-size: 24px;
  text-align: center;
}

.members-icons-row > col {
  padding-left: 0;
  padding-right: 0;
}

.member-social-button {
margin: 2px;
margin-top:5px;
  background: red;
  border-radius: .25rem;
/*  padding-left:5px;
  padding-right:5px;
  padding-top:2px;
  padding-buttom:2px;*/
  font-size:.85rem;
  width: 32px;
  height: 32px;
  text-align: center;
  padding-top:6px;
}

.smb-account {
  background: #444444;
}

.smb-youtube {
  background: #d62422;
}

.smb-twitch {
  background: #6441a4;
}

.smb-discord {
  background: #7289dc;
}

.smb-twitter {
  background: #1da1f3;
}

#content-desktop {
  display: block;
}
#content-mobile {
  display: none;
}

@media screen and (max-width: 768px) {

#content-desktop {
  display: none;
}
#content-mobile {
  display: block;
}
/************ Timer Styles *************/
.countdown-wrap:before {
    content: "";
    width: 8px;
    height: 65px;
    background: #444;
    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
    background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
    background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
    background-image: -o-linear-gradient(top, #555, #444, #444, #555);
    border: 1px solid #111;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    left: -10px;
}

.countdown-wrap {
    width: 100%;
    max-width: 465px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

div#clockdiv {
    text-align: center;
    background: #222;
    background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
    background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
    background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
    background-image: -o-linear-gradient(top, #222, #333, #333, #222);
    border: 1px solid #111;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
    margin: auto;
    padding: 24px 0 17px;
}

.countdown-wrap:after {
    content: "";
    width: 8px;
    height: 65px;
    background: #444;
    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
    background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
    background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
    background-image: -o-linear-gradient(top, #555, #444, #444, #555);
    border: 1px solid #111;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    /* top: 48px; */
    right: -10px;
}

div#clockdiv &gt; div &gt; span:nth-child(1) {
    width: 92px;
    max-width: 92px;
    font: bold 48px 'Droid Sans', Arial, sans-serif;
    text-align: center;
    color: #111;
    background-color: #ddd;
    background-image: -webkit-linear-gradient(top, #bbb, #eee);
    background-image: -moz-linear-gradient(top, #bbb, #eee);
    background-image: -ms-linear-gradient(top, #bbb, #eee);
    background-image: -o-linear-gradient(top, #bbb, #eee);
    border-top: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
    margin: 0 7px;
    padding: 18px 0;
    display: inline-block;
    position: relative;
}

div#clockdiv &gt; div {
    display: inline-block;
    width: 92px;
}

div#clockdiv &gt; div &gt; span:nth-child(1):before {
    content: "";
    width: 100%;
    height: 13px;
    background: #111;
    display: block;
    padding: 0 3px;
    position: absolute;
    top: 41%;
    left: -3px;
    z-index: -1;
}

div#clockdiv &gt; div &gt; span:nth-child(1):after {
    content: "";
    width: 100%;
    height: 1px;
    background: #eee;
    border-top: 1px solid #333;
    display: block;
    position: absolute;
    top: 48%;
    left: 0;
}


span.time-label {
    font: bold 15px 'Droid Sans', Arial, sans-serif;
    color: #f47321;
    text-shadow: 1px 1px 0px #000;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 9px;
}
}
</style>