html{ 
	scroll-padding-top: 5rem;
	font-family: Calibri, Helvetica, Arial, sans-serif;
	cursor: url('../../images/poetips-high_contrast_cursor_inventory_icon.png'), pointer;
	overflow-x: hidden;
}

body{
	margin:0 auto;
	overflow: hidden;
}

iframe, object, embed {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6{
	color: #dfcf99;
}

h1{
	padding: 1em;
	background:rgba(0, 0, 0, 0.6);
	background-opacity: 0.5;
}


ol, ul{
		color: #a38d6d;
		list-style-type: none;
}

li{
	list-style-type: none;
}

table ul{
	padding: 0!important;
}

ol li{
	padding-top: 1.5em;

}

/* Highlight li */
ol li:hover{
	background: rgba(0,0,0,0.6);
}

a{
	color: #f2c446;
	text-decoration: none;
	cursor: url('../../images/poetips-high_contrast_cursor_inventory_icon.png'), pointer;
}


.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

@media screen and (min-width: 800px) {
  .column {
    flex: 1
  }
}


#adwrapper{
	height: 64px;
	width: 100%;
	display: none;
}
.adsbygoogle{display: none!important;}

/* BUILDS TOOLTIP */
.tabcontent .btooltiptext{
	width:128px!important;
	margin-left:-128px!important;
}

.btooltip {
  position: relative;
  display: inline-block;
}

.btooltip .btooltiptext {
  visibility: hidden;
  width: 64px;
  background-color: rgba(40, 40, 40, 0.9);
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: -4%;
  left: 250%;
  margin-left: -40px;
  opacity: 0;
  transition: opacity 0.3s;
}

.btooltip:hover .btooltiptext {
  visibility: visible;
  opacity: 1;
}


/* BUILDS  */

.active {
	color: white;
}

.buildscontentcontainer{
	padding: 0!important;
	list-style-type: none;
	width: 100%;

}

.buildscontentcontainer p{
	line-height: 20px;
}


.buildscontentcontainer:hover{
	background: rgba(0, 0, 0, 0.6)!important;
}

.buildscontentcontainer:hover li{
	background: rgba(0, 0, 0, 0.0)!important;
}

.buildssubcontent{
	width: 100%;
	margin-top: -40px;
	display: none;
	height: auto !important;
	background: rgba(0, 0, 0,0.6)!important;
}

/*dps img*/
#cracklinglance{
	width: 100%;
	height: 900px;
	background-image: url('../../images/crackinglance_screenshot_poetips.jpg');
	background-size: 100% 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.tabcontent{
	display: none;
}

/*inventory*/
	.clitems{
		display: inline-block;
		background: rgba(0, 0, 0, 0.6);
		padding: 2em;
		background-image: url('../../images/poetips-inventory.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}
	.clitems img:hover{
		transform: scale(0.9);
	}

.buildcontainer h2{
	margin-bottom: 6px;
	color: #f2c446;
	font-size:3em;
	line-height:0px;
	padding-top:20px;
	background-repeat: repeat-x;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-animation: animate 15s linear infinite;
	height: 26px;
	-webkit-text-fill-color:rgba(255, 255, 255, 0.2);
	background-image: url(images/Crackling_Lance_skill_icon.png);
}

.buildcontainer h2:hover{
	-webkit-text-fill-color:rgba(255, 255, 255, 1);

}

	#dps{
		margin-left: -64px;
		width: 512px;
		transform: perspective(1200px) rotateY(30deg);
		transition: transform 0.618s ease 0s;
	}

  #dps:hover {
  	background: rgba(0,0,0,0);
 transform: perspective(1500px) rotateY(-0deg);
    transition: transform 0.618s ease 0s;
 }

.exile{
	position: relative;
}

.exile video{
	transform: scale(.5);
	top: 0;
	margin-top: -256px;
	pointer-events: none;
	float:right;
	position: absolute;
	right:-12%;
	bottom: 0;
	
}

/* end */

iframe{
	cursor: url('../../images/poetips-high_contrast_cursor_inventory_icon.png'), pointer;
}
a:hover{
	color: white;
}

#poe-tips-logo:hover{
transform: scale(0.9);
}

#tabula:hover,#leaguestep:hover,#goldrim:hover{
	transform: scale(0.9);
}
#ascendant{
	display: none;
}

#headerwrapper{
	width: 100%;
	position: sticky;
	padding-bottom: 2em;
	padding-top: 1em;
}

#buildtipstable{

	height: 100%;
}

.hidemenu{
	display: inline;
}
#subnav-filter{
  margin-left: -76px;
}

#botwbuilds, #news{
	padding-left: 0 !important;
}

#news li{
	margin-bottom: 1em;
}

#mobilemenu{
	display: none;
}

#banner-feature{
	font-size: 1em;
}
#banner-feature img{
	vertical-align: middle;
}


p{
	padding: 1em;
	color: #a38d6d;
	background:rgba(0, 0, 0, 0.6);
	background-opacity: 0.5;
}

.description{
	min-height: 32px!important;
	padding: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	color: #a38d6d;
	background:rgba(0, 0, 0, 0.6);
	background-opacity: 0.5;
}
#ascendancysfix{
	background
	padding-left: 0em!important;
	min-height: 32px!important;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding-top: 0 !important;
}
#ascendancysfix div{
	display: flex;
}
#ascendancysfix :hover{
	background: rgba(0,0,0,0)!important;
	background-opacity: 0!important;
}

.nostyle{
	padding: 0!important;
	margin: 0 auto!important;
	display: inline-block;
}
.nostyle:hover{
	background: rgba(0,0,0,0);
}


#classlist{
	padding-left:0!important;
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
#classlist li{
		padding: 1em;
    display: flex;
    flex-direction: row;
  
}
#classlist img{
	padding-right: 1em;
}
#classlist div{
	position: absolute;
	margin-left: 0px;
	margin-top: 84px;	
	background: rgba(0,0,0,0.5);
	width: 134px;
	text-align: center;
}

.container div s, #classlist s{
	display: none;
}

nav {
	z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  height: 48px;
  overflow: visible;
  padding: 0;
  margin: 0;
  box-shadow: 4px 2px 16px black;
}

section{
		padding: 1em;
		margin: 0 auto;
	  background-color: rgba(12, 11, 11, 0.9);
}

header{
	/*height: 640px;*/
	width: 80%;
	margin: 0 auto;
}

header #sentinelprop{
	width: 100%;
	position: relative;
	z-index: -100;
	pointer-events: none;
}

#yellowsentinelprop{
	position: absolute;
	top: 0;
	right: 8%;
	z-index: 100;
	pointer-events: none;
}
#bluesentinelprop{
	position: absolute;
	top: -3%;
	left: 7%;
	z-index: 100;
	pointer-events: none;
}


footer{
	width: 100%;
	margin: 0 auto;
	color: white;
	height: 32px;
	text-align: center;
	line-height: 16px;
	padding-bottom: 4em;
}
footer div{
	padding: 1em;
	margin-top: -16px;
}

footer a{
	color: white;
}

footer a:hover{
	color:#f2c446 !important;
}

footer a:hover svg{
	fill: red !important;
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
}

table{
		color: #a38d6d;
}

small{
	color: gray;
}

.ninja{
	padding-left: 6px;
	margin-right: 0px;
	margin-top:-4px;

}
.ninja:hover{
	background: rgba(255, 255, 255, 0.3)!important;
}

#nav{
	padding: 0;
	margin: 0;
	width: 97%;
	top: 0;
	left: 0;
	line-height: 48px;
	vertical-align: middle;
	text-align: left;
	position: relative;
}

#nav, .sectionlist, h3{
	list-style: none;
	padding-left: 1em;
}

#nav li {
		display: inline-block;
		min-width: 6rem;
  	text-align: center;
}

#nav li img{
	padding-right: 8px;
	vertical-align: middle;
	width: 24px;
}

#nav a, #title, h3,h1,{
	text-shadow: 2px 2px 8px black !important;
}

#keyart{
	top: 0;
	left: 0;
	float: left;
	margin-top: -164px;
	margin-left: -920px;
	background-image: url("../../images/poetips-keyart.png");
	background-repeat: no-repeat;
	width: 100vmin;
	height: 1024px;
	width: 100%;
	position: absolute;
	z-index: 99999;
	background-position: center;
  background-size: cover;
}

#pagewrapper{
	width: 100%;
	margin: 0 auto;
}

#wrappercap{
	width: 100%;
	margin: 0 auto;
	height: auto;
}

#wrappercap img{
	width: 82.5%;
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin: 0 auto;
	position: relative;
	margin-top: -45px;
	margin-bottom: -49px;
}

.wrappercapmidtop{
	width: 100%;
	margin: 0 auto;
	height: auto;
}

.wrappercapmidtop img{
	width: 82.5%;
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin: 0 auto;
	position: relative;
	margin-top: -45px;
	margin-bottom: -49px;
}


.wrappercapmid{
	width: 100%;
	margin: 0 auto;
	height: auto;
}

.wrappercapmid img{
	width: 82.5%;
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin: 0 auto;
	margin-top: -120px;
}

#wrappercapbot{
	width: 100%;
	margin: 0 auto;
	height: auto;
}

#wrappercapbot img{
	width: 82.5%;
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin: 0 auto;
	margin-top: -45px;
	margin-bottom: -49px;
}

.wrapper{
	width: 80%;
	margin: 0 auto;
	height: auto;
	padding-bottom: 4em;
}

.sectionlist li{
	line-height: 32px !important;
	min-height: 64px;
	padding-left: 1em;

}

.sectionlist li img{
	padding-right: 8px;
	vertical-align: middle;
	width: 32px;
}

#header{
	height: 128px;
	width: 80%;
	margin: 0 auto;
}

#headercontent{
	/*height: 100%;*/
}

#headertitle{
	position: absolute;
	padding: 0.5em;
	padding-top:0.25em!important;
	color: white;
	line-height:0px;
	text-align: left;
	top: -11.4%;
	width: 30%;
	height: 96px;
	margin-top: 180px!important;
	background-color: rgba(0, 0, 0,0.9);
}

#headertitle img{
	width: 64px;
	padding-bottom: 54px;
	padding-right: -4px;
}
#headertitle h1{
	color: #a38d6d;
	font-size: 64px;
	padding: 0!important;
}

#banner{
	position: absolute;
	padding: 2em;
	padding-top:0.25em!important;
	color: white;
	line-height:16px;
	text-align: left;
	left: 4%;
	top:17.4%;
	width: 100%;
	height: auto;
	margin-top: 180px!important;
	background-color: rgba(0, 0, 0,0.9);
}

#banner h2{
	font-size: 42px!important;
	padding: 0!important;
	position: relative;
	z-index: 99;
}

#banner .mod{
	padding-left: 6px;
}

#banner-build-of-the-week{
	position: absolute;
	z-index: 10;
	line-height:28px;
	text-align: left;
	left: 1%;
	top: 48.5%;
	width: 100%;
	height: auto;
}

#build-embed{
	padding-right: 1em;
}

#title{
	padding-left: 1em;
	float: left;
}

#news, #botwbuilds{
	list-style-type: none;
}

#news li,#botwbuilds li{height: auto;}

.headline{
	font-size: 24px;
	font-weight: bolder;
	padding: 0!important;
}

#news li,#botwbuilds li{
	padding: 1em;
	/*background: rgba(0, 0, 0, 0.6);*/
}

.dtable{
	 display: table-row;
}

.dtable li{
	text-align: left;
	height: auto;
	width: 33%;
	 display: table-cell;
}

#spacer{
	margin-top: 180px;
}

.bcol{ /*Column*/
	width: 45%;
}
.ccol{ /*Column*/
	width: 33%;
}

#title{
	left: 0px !important;

	text-align: left !important;
}

#rampagetable td{
	padding-left: 2em;

}

/*Text Style for showing Modifiers in Blue*/
.mod{
	color: #7988ff;
}


/*Ascendanys*/
#ascendanttable img{
	min-height: 32px!important;
	width: 100%;
}

.nostyle{
	margin-left: -5px !important;
	-webkit-transform:scale(0.95);
	-moz-transform:scale(0.95);
	-ms-transform:scale(0.95);
	transform:scale(0.95);
}

.ascendancys{
	height: 128px;
	width: auto;
	padding: 0 !important;
	 display:flex;
}

.ascendancys li{
	padding: 0 !important;
  display:flex;
}

.ascendancys li:hover{
	background: rgba(0,0,0,0) !important;
}

.ascendancys li:not(:first-child) {
	padding-left:250px !important;
}

.ascendancys img{
	display: inline-block;
  width: 250px !important; 
  height: 116px !important;
}

.container a img{
	width: auto;
}

.container img:hover{
		-webkit-transform:scale(0.90);
	-moz-transform:scale(0.90);
	-ms-transform:scale(0.90);
		transform:scale(0.90);
}


/* Show Ascendancy Class NamePlate */
.container :hover:before {
  content: '';
  display: block;
  background-image:  url('../../images/poetips-name-plate.png');
  position: absolute;
  width: 230px; 
  height: 70px;
  position: absolute;
  right: -8px;
  bottom: -16px;
  z-index: 1;
  pointer-events: none;
}

.container{
	overflow: visible;
  position: relative;
  display: flex;
}

.container a{
	display: flex;
}

/* Show Ascendancy Class Text */
.container div{
	pointer-events: none; 
	font-family: "FontinSmallCaps",Verdana,Arial,Helvetica,sans-serif !important;
	font-size: 1.2em;
	color: lightgrey;
	position: absolute;
	bottom: 4px;
	right: 16px;
	text-align: right;
 	opacity: 0;
 	visibility: hidden;
 	z-index: 2;
}

.container:hover div{
 	visibility: visible;
 	opacity: 1; 
}

/*Nav Dropdown Menu*/
.subnav{
	width: 128px !important;
}

.subnav li{
	text-align: left !important;
}

.subnav a{
	display: block;
}

#nav ul{
	display: none;
	position: absolute;
	top: 48px;
	background:rgba(0, 0, 0, 0.95);
}

#nav li:hover ul{
	display: block !important;
}

#nav li ul{
	display:none;
}

#nav li:hover ul{
	display: block !important;
}

/* BETRAYAL */

#mobilebetrayal{display: none;}

#betrayaldiv{
	margin-left: -18px;
	width:1450px;
	background:url('../../images/betrayal/betrayal.png');
	background-size:100% 100%;
	height: 170px;
}
#betrayalmaster{
	width: 1450px;
}
#betrayalmaster td{
  vertical-align: bottom !important;
  font-weight: bolder;
  text-align: center;
	width: 85px!important;
	height: 80px;
	color:white;
	padding-left: 4px;
	font-size: 16px;
	text-shadow: 1px 1px 4px black;
}

#betrayal td{
  vertical-align: bottom !important;
  font-weight: bolder;
	width: 42px;
	height: 42px;
	color:white;
	font-size: 16px;
	text-shadow: 1px 1px 4px black;

}

#betrayal td:hover{
	background: rgba(255,255,255,0.3);
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden ;
  width: 256px;
  height: 32px;
  font-size: 16px !important;
  background: rgba(0,0,0,0.9);
  color: #fff;
  text-align: left;
  padding-left: 12px;
  padding-top: 4px;
  padding-bottom: 12px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -86px;
  left: 0px;
  margin-left:-4px;
}

.tooltiptext{
	 	pointer-events: none;
}

#betrayal td:hover .tooltiptext {
  visibility: visible;
}

/* Envoy */
#envoy{
	right: 50%;
	left: 43%;
	position: relative;
	height: auto;
	width:206px;
	margin-top: -185px;
  transform: translateX(0%)translateY(10%);;
  max-width: 100%;
}

.etooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.etooltip .etooltiptext {
  visibility: hidden ;
  width: 540px;
  height: 250px;
  font-family: Garamond (serif);
  font-size: 16px !important;
  background: rgba(0,0,0,0.9);
  color: #fff;
  text-align: left;
  /*position text*/
	padding: 1em;
	padding-left: 1em;
	padding-top: 6em;
	padding-right: 4em!important;
	transform: scale(0.9);
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
	margin-left: -420px;
  top: -260px;
}

.etooltiptext img{
	padding-left: 1em;
	padding-right: 1em;
}
.etooltiptext img:hover{
	transform: scale(0.9);
}


#envoy div:hover .etooltiptext {
  visibility: visible;
  background:url('../../images/EnvoyBubble.png');
  background-repeat: no-repeat;
}

/* ATLAST TOOLTIPS */
.atooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.atooltip .atooltiptext {
  visibility: hidden  ;
  width:840px;
  height: 64px;
  font-size: 16px !important;

  text-align: left;
  padding-left: 12px;
  padding-top: 4px;
  padding-bottom: 12px;
  line-height: 24px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -74px;
  left: 0px;
  margin-left:540px;
}

.atooltipcontainer:hover .atooltiptext {
  visibility: visible;
}

header iframe{
	display: block;
		width: 1600px; 
		height: 480px; 
    position: relative;
    margin: auto;
    top: 20%;
    margin-top: -136px;
    right: -50%;
    z-index: 99;
    transform: translate(-50%, -75%);
}

#embedcapl,#embedcapr{
	pointer-events: none;
}

#embedcapl{
	width: 100%;
	margin: 0 auto;
	height: auto;
}

#embedcapl img{
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	margin-top: 71px !important;
	margin-left:-14px;
	height: 512px;
	width: 116px;
}
#embedcapr{
	width: 100%;
	margin: 0 auto;
	height: auto;
}

#embedcapr img{
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	margin-top: -856px !important;
	margin-right: -16;
	height: 512px;
	width: 116px;
}


/*ITEM FILTER*/

#item-filter:hover{
	background: rgba(255, 255, 255, 0.3);
}

/*TWITCH*/

#twitchlogo:hover{
	background: rgba(255, 255, 255, 0.3)!important;
}

#twitch-embed{
	width: 100%;
	margin: 0 auto !important;
	display: none;
}

#twitch-embed iframe{
	display: block;
		width: 100%; 

    position: relative;

    top: 0%;

    right: -50%;
    z-index: 99;
    transform: translate(-50%, -75%);
}

/*Highlight Imgs*/
.highlight{
	min-height: 32px!important;
	padding: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	color: #a38d6d;
	background:rgba(0, 0, 0, 0.6);
	background-opacity: 0.5;
}

.highlight img{
		width: 32px!important;
		padding: 0!important;
}

.highlight img:hover{
		background: rgba(255,255,255,0.3);
}

#enchanttable li{
		height: auto;
	}

/* Hide li Highlight */
#enchanttable li:hover{
  background: rgba(0,0,0,0)!important;
}

.hidehighlight{
 	pointer-events: none;
}

/* Fix Spacing*/
#flasktable{
		margin-top: -64px;
}
#flasktable li{
	height: auto !important;
	padding-top: 1em !important;
	padding-left: 1em !important;

}
/* Atlast SKill Tree Content */
#atlasbg{
	background:url('../../images/poetips-atlastskilltree.png');
	background-position: center top!important;
	background-repeat: no-repeat;
	background-size: fixed;
}

.subcontentcontainer{
	padding: 0!important;
	list-style-type: none;
}

.subcontentcontainer:hover{
	background: rgba(0, 0, 0, 0.6)!important;
}

.subcontentcontainer:hover .subcontent{
	display:inline-block !important;
		height: auto !important;
}

.subcontentcontainer:hover li{
	background: rgba(0, 0, 0, 0.0)!important;
}

.subcontent{
	display: none;
	padding: 1em;
	height: auto !important;
	background: rgba(0, 0, 0,0.6)!important;
}

/* Youtube Embed Poster Swap */
#poster{
	position: absolute;
	z-index: 9999;
  width: 80%;
  height: 480px;
  margin-top: 16px;
  background-image: url("../../images/poetips-secrets-poster.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#poster:hover{
	  background-image: url("../../images/poetips-secrets-poster-hover.jpg");

}

/*Search bar*/
#pagesearch {
	color: #dfcf99;
	border: none;
	outline: none;
	background-color:transparent;
}

#pagesearch {
	background-image: url("../../images/search.png");
	background-size: 16px;
  background-repeat: no-repeat;
  background-position: right;
}

/* Gems List  */
#gemslist li, #tgemslist li, #vgemslist li{
	display: inline-block;
}

.gem a {
	font-size: 0;
}

/*Gem search bar*/
#gems p input, #tgems p input, #vgems p input {
	color: #dfcf99;
	border: none;
	outline: none;
	background-color:transparent;

}

/* Gem Popups */
div.gem a .popup {
    display: none;
    position: absolute;
    left: -500%;
		bottom: 47px;
    z-index: 99999;
} 

div.gem a {
    display: inline-block;
    position: relative;
}
div.gem a:hover{
	background-color: #282828;
}
div.gem a .popup{
    display: none;
}
div.gem a:hover .popup{
    display: inherit;
}
div.gem {
  display: inline-block
}



#jun{
	width: 420px;
	bottom: 128px;
	right: 128px;
	position: absolute;
}


#trademaps a{
	width: 32px!important;
	padding-left: 6px!important;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ultra Wide Screens*/
@media screen and (max-width: 1800px) {

	#envoy{
		left: 41.5%;
		transform: translateY(10px);
	}

	#pagewrapper{
		width: 100%;
	}

	#headerwrapper{
		width: 100%;
	}

	header iframe{
		left: 50%;
	}

#keyart{
	margin-left: -850px;
}

	#embedcapl{
		margin-left: 0px;
	}
	#embedcapr{
		margin-right: 0px;
	}

	#ascendancys{
		margin-left: -256px!important;
	  display: flex;
		flex-wrap: wrap;
	}
	#ascendancys li{
		padding-bottom: 64px!important;
		padding-left: 256px!important;
	}
	.ascendancys{
		padding-left: 12em!important;
		height: auto;
		width: 60%;
	}
	#twitch-embed iframe{
		top: 5%;
	}
	#betrayaldiv{
	display: none;
	}

	#mobilebetrayal{
		display: block;
		width: 100%;
		height: auto;
	}

	#mobilebetrayal img{
		width: 100%;
	}

}

/* Wide Screens ----------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {

#buildtipstable,#debufftable {
  margin-top: 0px;
}
	#banner{
		left: 1%;
	}

	#flasktable td, #buildtipstable td, #debufftable td, #ailmentstable td{
	display: inline-block;
  width:100%;
}
	.hidehighlight{
		display: none;
	}

	#pagewrapper{
		width: 100%;
	}

	#headerwrapper{
		width: 100%;
	}


#wrappercap img{
	margin-top: -45px;
	margin-bottom: -35px;
}

#wrappercapbot img{
	margin-top: -45px;
	margin-bottom: -35px;
}

#keyart{
	margin-left: -720px;
}


	#twitch-embed iframe{
		top: 10%;
	}

	header iframe{
		left: 50%;
	}

	#embedcapl{
		margin-left: 0px;
	}

	#embedcapr{
		margin-right: 0px;
	}

	#ascendancys{
		margin-left: -256px!important;
	  display: flex;
		flex-wrap: wrap;
	}
	#ascendancys li{
		padding-bottom: 64px!important;
		padding-left: 256px!important;
	}
	.ascendancys{
		padding-left: 8em!important;
		height: auto;
		width: 60%;
	}

	#betrayaldiv{
		display: none;
	}

	#mobilebetrayal{
		display: block;
		width: 100%;
		height: auto;
	}

	#mobilebetrayal img{
		width: 100%;
	}
.wrappercapmid{
	margin-top: -175px;
}
	.wrapper{
	 padding-bottom: 8em;
	}
	#envoy{
		left: 40.5%;
		transform: translateY(22px);
	}
	#yellowsentinelprop{
		right: -25%;
		transform: scale(0.6);
		top: 10%;	
	}
	#bluesentinelprop{
		left: -10%;
		top: -10%;
		transform: scale(0.7);
	}

	.buildcontainer h2{
		font-size: 2.5em;
	}
	#enchants{
		padding-top: 2em;
	}
		#flasktable{
	margin-top: 0px;
	}

}


/* Large Screens --------------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {

#buildtipstable,#debufftable {
  margin-top: 0px;
}

	#flasktable td, #buildtipstable td, #debufftable td, #ailmentstable td{
	display: inline-block;
  width:100%;
}
	.exile,#dps{
		display: none;
	}
	#banner{
		left: -9%;
	}
	#pagewrapper{
		width: 100%;
	}

	#headerwrapper{
		width: 100%;
	}


#wrappercap img{
	margin-top: -45px;
	margin-bottom: -35px;
}

#wrappercapbot img{
	margin-top: -32px;
	margin-bottom: -35px;
}

.wrappercapmid img{
	margin-top: -12.5em;
	margin-bottom: 2em;
}
.wrappercapmidtop img{
	margin-bottom: -2em;
}
	.wrapper{
	 padding-bottom: 10em;
	}

#keyart{
	margin-left: -720px;
}

	header iframe{
		left: 50%;
	}

	#embedcapl{
		margin-left: 0px;
	}

	#embedcapr{
		margin-right: 0px;
	}

	#headertitle{
		left: 0;
		padding-right: 30%;
	}

	#banner{
		width: 120%;
	}


	#ascendancys{
		margin-left: -256px!important;
	  display: flex;
		flex-wrap: wrap;
	}
	#ascendancys li{
		padding-bottom: 64px!important;
		padding-left: 256px!important;
	}
	.ascendancys{
		padding-left: 1em!important;
		height: auto;
		width: 80%;
	}

	#betrayaldiv, #jun{
	display: none;
	}
	
	#mobilebetrayal{
		display: block;
		width: 100%;
		height: auto;
	}


	#mobilebetrayal img{
		width: 100%;
	}

	.buildcontainer h2{
		font-size: 2em;
	}
	#envoy{
		left: 37%;
		transform: translateY(10px);
	}
}

/*------------------------------------------------------------------*/
/* Medium Screens*/
@media screen and (max-width: 1280px) {

#flasktable td, #buildtipstable td, #debufftable td, #ailmentstable td, #buildvideo td{
	display: inline-block;
  width:100%;
}

.hidemenu{display: none;}

#mobilemenu{display: inline;}

#buildtipstable,#debufftable {
  margin-top: 0px;
}
	#banner{
		top: 48%;
		left: 0%;
	}

	#pagewrapper{
		width:100%;
	}

	#headerwrapper{
		width: 100%;

	}
.wrappercapmid{
	margin-top: -160px;
}
.wrappercapmid img{
	margin-top: -9.5em;
	margin-bottom: 2em;
}
.wrappercapmidtop img{
	margin-bottom: -2em;
}
	.wrapper{
	 padding-bottom: 8em;
	}
	#youtube-embed{
		margin-top: -126px;
		transform: scale(1);

	}

	#headertitle{
		width: 40%;
		display: none;
	}

	header iframe{
		left: 50%;

	}
#keyart{
	margin-left: -640px;
}

	#embedcapl{
		margin-left: 0px;
		margin-top: 196px;
	}

	#embedcapr{
		margin-right: 0px;
	}

	#headertitle{
		left: -8%;
		padding-right: 30%;
	}

	#ascendancys{
		margin-left: -285px!important;
	  display: flex;
		flex-wrap: wrap;
	}
	#ascendancys li{
		padding-bottom: 64px!important;
		padding-left: 256px!important;
	}
	.ascendancys{
		padding-left: 7em!important;
		height: auto;
		width: 80%;
	}

	#betrayal{
		display: none;
	}
	#betrayaldiv{
		display: none;
	}

	#mobilebetrayal{
		display: block;
		width: 100%;
		height: auto;
	}

	#mobilebetrayal img{
		width: 100%;
	}
	#buildvideo iframe{
		width: 640px;
		height: 380px;
	}

		.buildcontainer h2{
		font-size: 1.5em;
	}
	#envoy{
		left: 35%;
		transform: translateY(10px);
	}

}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Small Screens+ */
@media screen and (max-width: 900px) {
	#ascendanttable img{
		display: none;
	}

	#ascendant{
		display: inline-block;
	}
	#pagewrapper{
		width: 100%;
	}

	#headerwrapper{
		width: 100%;
	}
#keyart{
	display: none;
}

#wrappercap img{
	margin-top: -45px;
	margin-bottom: -25px;
}

#wrappercapbot img{
	margin-top: -20px;
	margin-bottom: -25px;
}

	.wrapper{
	 padding-bottom: 12em;
	}


	#youtube-embed{
		margin-top: -90px;
		transform: scale(1);

	}

	#headertitle{
		width: 40%;

	}

	header iframe{
		left: 70%;
	}

	#embedcapl{
		margin-left: -245px;
	}

	#embedcapr{
		margin-right: -435px;
	}

	#headertitle{
		left: -8%;
		padding-right: 30%;
	}

	#ascendancys{
		margin-left: -256px!important;
	  display: flex;
		flex-wrap: wrap;
	}
	#ascendancys li{
		padding-bottom: 128px!important;
		padding-left: 256px!important;
	}
	.ascendancys{
		padding-left: 2em!important;
		height: auto;
		width: 80%;
	}

	ol, ul{
		padding-left: 0!important;
	}

	.subnav{
		padding: 1em!important;
		
	}

	#subnav-filter{
	  margin-left: -32px;
	}

	.sectionlist li{
		padding-top:2em;
		padding-bottom: 2em;
		height: auto;
	}

	#nav{
		width: 95%;
	}

	#buildvideo iframe{
		height: 320px;
		width: 100%;
	}

	.hidehighlight{
		padding: 0!important;
	}

	#flasktable{
		max-width: 768px;
	}

	#buildtipstable, #debufftable{
		margin-top: 0px;
	}


	#flasktable td, #buildtipstable td, #debufftable td, #ailmentstable td, #buildvideo td{
		display: inline-block;
	  width:100%;
	}

	#flasktable table td{
		display: initial-table;!important;
		width: 80%;
		padding-left: 3em;
	}

	#flasktable table td img{
		float: left;
		margin-left: -48px;
		position: absolute;
	}

	.hidemenu{
		display: none;
	}

	#mobilemenu{display: inline;}

	header iframe{
	display: block;
		width: 768px; 
		height: 320px; 
		left: 45%;
		bottom: 50%;
	}

	#embedcapl img{
		margin-top: -191px !important;
		margin-left: -40;
		height: 340px;
		width: 80px;
	}

	#embedcapr img{
		margin-top: -575px !important;
		margin-right: 20;
		height: 340px;
		width: 80px;
	}

	#headertitle{
	 display: none;
	}

	#banner{
		top: 38%;
		left: 8%;
	}

	#betrayaldiv{
		display: none;
	}

	#mobilebetrayal{
		display: block;
		width: 100%;
		height: auto;
	}

	#mobilebetrayal img{
		width: 100%;
	}

	#envoy{
		display: none;
	}

	.buildcontainer h2{
		font-size: 1.25em;
	}
}

/* Desktop Screens -------------------------------------------------------------------*/

@media screen and (max-width: 900px) {
		#pagewrapper{
		width:100%;
	}
	#headerwrapper{
		with: 100%;
	}

	#banner{
		top: 30%;
		left: 0;
	}

#poster{
	height: 320px;
}


#wrappercap img{
	margin-top: -45px;
	margin-bottom: -25px;
}

#wrappercapbot img{
	margin-top: -20px;
	margin-bottom: -25px;
}

.wrappercapmid img{
	margin-top: -11.5em;
	margin-bottom: 4em;
}
.wrappercapmidtop img{
	margin-bottom: -1.5em;
}

	.wrapper{
	 padding-bottom: 10em;
	}
	#youtube-embed{
		margin-top: 256px;
		transform: scale(1);
	}

	#youtube-embed iframe{
		width: 100%;
	}
	#headertitle{
		width: 40%;

	}

	header iframe{
		margin-top: -90px;
		left: 50%;
	}

	#embedcapl{
		margin-left: 30px;
		margin-top: 164px;
	}

	#embedcapr{
		margin-left: 28px;
		margin-top: 5px;
	}

	#headertitle{
		left: -8%;
		padding-right: 30%;
	}

	#navninja{
		display: none!important;
	}
	#ascendanttable td{
		display: inline-block;
		width: 100%;
	}
		.buildcontainer h2{
		font-size: 1em;
	}
}


/* Laptop Screens -------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
	#pagewrapper{
		width: 100%;
	}

	#headerwrapper{
		width: 100%;
	}

#poster{
	height: 320px;
}


#wrappercap img{
	margin-top: -45px;
	margin-bottom: -20px;
}

#wrappercapbot img{
	margin-top: -20px;
	margin-bottom: -25px;
}
.wrappercapmid img{
	margin-top: -13em;
	margin-bottom: 4em;
}
.wrappercapmidtop img{
	margin-bottom: -1em;
}
	.wrapper{
	 padding-bottom: 12em;
	}

	#embedcapl{
		margin-left: 32px;
	}
	#embedcapr{
		margin-left: 28px;
	}

	#ascendancys{
		margin-left: -205px!important;
	  display: flex;
		flex-wrap: wrap;
	}
	#ascendancys li{
		padding-bottom: 128px!important;
		padding-left: 256px!important;
	}
	.ascendancys{
		padding-left: 0em!important;
		height: auto;
		width: 80%;
	}
	#ascendanttable img{
		display: none;
	}

	#ascendant{
		display: inline-block;
	}

}



/* Mobile Screens -------------------------------------------------------------------*/

@media screen and (max-width: 640px) {
	#pagewrapper{
		width: 100%
	}

	#headerwrapper{
		width: 100%;
	}
#keyart{
	margin-top: -16px;
	margin-left: -260px;
	height: 520px;
}
#poster{
	height: 320px;
}

#wrappercap img{
	margin-top: -45px;
	margin-bottom: -13px;
}

#wrappercapbot img{
	margin-top: -10px;
	margin-bottom: -25px;
}

	#ascendanttable img{
		display: none;
	}

	#ascendant{
		display: inline-block;
	}

	#item-filter{display: none}

	#ascendancys{
		margin-left: -205px!important;
	  display: flex;
		flex-wrap: wrap;
	}
	#ascendancys li{
		padding-bottom: 128px!important;
		padding-left: 256px!important;
	}
	.ascendancys{
		padding-left: 1em!important;
		height: auto;
		width: 80%;
	}

	footer{
		padding-top: 1em;
	}

	#betrayal{
		display: none;
	}

	#banner{
		top: 25%;
		left: -15%;
		transform: scale(0.7);
	}

.wrappercapmid img{
	margin-top: -14.8em;
	margin-bottom: 4em;
}
.wrappercapmidtop img{
	margin-bottom: -1em;
}
	.wrapper{
	 padding-bottom: 14em;
	}


	header iframe{
		left: 50%;
	}



	#embedcapl{
		margin-left: 32px;
		margin-top: 164px;
	}

	#embedcapr{
		margin-left: 28px;
		margin-top: 5px;
	}
	#envoy{
		display: none;
	}
 #buildvideo iframe{
 	height: 120px!important;
 }	


 	.buildcontainer h2{
		font-size: 1vm;

	}
}