body {
	background-color: #242424;
	margin: 0px;
}

@font-face {
    font-family: 'SemplicitaBold';
    src: url('semplicitapro-semibold-webfont.eot'); /* IE9 Compat Modes */
    src: url('semplicitapro-medium-webfont.eot?#iefix') format('embedded-opentype'),
    	 url('semplicitapro-semibold-webfont.woff2') format('woff2'),
         url('semplicitapro-semibold-webfont.woff') format('woff'),
         url('semplicitapro-semibold-webfont.ttf')  format('truetype'),
         url('semplicitapro-semibold-webfont.svg#semplicitapro-semibold-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SemplicitaMedium';
    src: url('semplicitapro-medium-webfont.eot');
    src: url('semplicitapro-medium-webfont.eot?#iefix') format('embedded-opentype'),
    	 url('semplicitapro-medium-webfont.woff2') format('woff2'),
         url('semplicitapro-medium-webfont.woff') format('woff'),
         url('semplicitapro-medium-webfont.ttf')  format('truetype'),
         url('semplicitapro-medium-webfont.svg#semplicitapro-medium-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FrizQuadrataStd';
    src: url('frizquadratastd-regular.eot');
    src: url('frizquadratastd-regular.eot?#iefix') format('embedded-opentype'),
    	 url('frizquadratastd-regular.woff2') format('woff2'),
         url('frizquadratastd-regular.woff') format('woff'),
         url('frizquadratastd-regular.ttf')  format('truetype'),
         url('frizquadratastd-regular.svg#frizquadratastd-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.header {
	line-height: 1.2;
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-weight: 400;
	text-shadow: rgb(0, 0, 0) 0px 2px 2px;
	color: rgb(235, 222, 194);
	font-size: 35px;
	letter-spacing: 2px;
	text-align: center;
}

.subheader {
	line-height: 1.5;
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-weight: 400;
	text-shadow: rgb(0, 0, 0) 0px 2px 2px;
	color: rgb(235, 222, 194);
	font-size: 20px;
	letter-spacing: 2px;
	text-align: center;
	margin: 20px 0;
}

.text {
	color: #fff;
	font-weight: 400;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	margin: 10px 0;
	text-align: justify;
}

.text_center {
	text-align: center;
}

.text_left {
	text-align: left;
}

.list {
	padding-inline-start: 20px;
}

.sub_list {
	padding-inline-start: 20px;
	margin-top: -5px;
	margin-bottom: 18px;
}

.list_item {
	padding: 5px 0;
}

.list_item_narrow {
	padding: 2px 0;
}

.content_margin {
	max-width: 650px;
	margin: auto;
}

.underscore {
	position: relative;
	max-width: 100%;
	height: 23px;
	width: 219px;
	display: block;
	overflow: hidden;
	background: url(../../static/img/elements/underscore.png) no-repeat;
	background-repeat: no-repeat;
	margin: 12px auto 30px;
}

.divider_large_up,
.divider_large_down {
	position: relative;
    height: 103px;
    width: 100%;
    margin-top: -26px;
    margin-bottom: -30px;
    z-index: 99;
    flex: 1 1 auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.divider_large_up {
	background-image: url(../../static/img/elements/divider_large_up.png);
}

.divider_large_down {
	background-image: url(../../static/img/elements/divider_large_down.png);
}

.divider_small {
	background-image: url(../../static/img/elements/divider_small.png);
	height: 33px;
	z-index: 99;
	margin-top: -12px;
	margin-bottom: -12px;
	background-repeat: repeat-x;
	background-position: center center;
}

.desktop_hide {
	display: none;
}

.mobile_scale_down {
	display: none;
	-ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
}

/* ------------- Landing ---------------------------------------- */
#page_landing {
	width: 100%;
	height: 100vh;
	background: url(../../static/img/elements/ragnaros.jpg) no-repeat center center;
	background-size: cover;
	display: table;
	text-align: center;
	z-index: 98;
}

#logo_banner {
	margin-top: 36vh;
	width: 100%;
	height: 29vh;
	z-index: 100;
}

#reborn_logo {
	position: relative;
	max-height: 100%;
	max-width: 100vw;
	vertical-align: middle;
	text-align: center;
	z-index: 100;
}

/* ------------- Introduction ------------------------------------ */
#page_introduction {
	padding: 200px 0;
	position: relative;
	background: url(../../static/img/elements/background_intro.jpg) no-repeat center center;
	background-size: cover;
	z-index: 1;
	margin: auto;
}

#page_introduction_content {
	margin: auto;
}

/* ------------- Level Cap --------------------------------------- */
#page_level_cap {
	padding: 150px 0;
	background: url(../../static/img/elements/background_60.jpg) repeat-y top center;
}


/* ------------- RPG --------------------------------------- */
#page_rpg {
	background: url(../../static/img/elements/background_rpg.jpg) no-repeat top center;
	background-size: cover;
	padding: 90px 0;
}

/* ------------- Dungeon Master ----------------------------------- */
#page_dungeon_master {
	background: url(../../static/img/elements/background_black.jpg) repeat-y top center;
	/*background-size: cover;*/
	padding: 90px 0;
}

.dungeon_master_equipment {
	margin: auto !important;
}

.item_level_text {
	position: absolute;
	top: 5px;
	right: 0px;
	text-align: right;
	width: 100px;
	font-family: Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 12px;
	color: #7d7d7d;
}

/* ------------- Classes ----------------------------------------- */
#page_classes {
	background: url(../../static/img/elements/background_classes.jpg) no-repeat center center;
	background-size: cover;
	padding: 90px;
}

/* ------------- Talent Selector ------------------------------------------- */
#page_talents {
	position: relative;
	background: url(../../static/img/elements/background_talents.jpg) no-repeat center center;
	background-size: cover;
	height: 980px;
}

#talent_selector_columns {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#talent_selector_left_column {
	min-width: 220px;
	width: 350px;
	height: 902px;
	z-index: 3;
}

#talent_selector_right_column {
	transition: 0.5s ease;
	min-width: 434px;
	width: 434px;
	overflow-x: hidden;
	z-index: 3;
}

#talent_selector {
	position: absolute;
	width: 100%;
	top: 0;
}

#talents_section {
	transition: opacity 0.30s ease-in;
}

.talents_section_hide {
	opacity: 0;
}

#stats_panel_button_container {
	min-width: 220px;
	width: 290px;
	padding: 8px 30px;
}

#class_selector {
	position: relative;
	top: 5px;
	right: 0;
	z-index: 2;	/* place infront of the talent circle as the talent circle is shifted upwards and would otherwise block the bottom half of the buttons */
	padding: 6px 0px 4px 0px;
	text-align: center;
	margin: auto;
}

#talent_selector_intro {
	position: absolute;
	height: 100%;
	width: 100%;
	background: url(../../static/img/elements/background_talents.jpg) no-repeat center center;
	background-size: cover;
	z-index: 10;
	transition: opacity 1.5s ease;
}

.talent_selector_intro_hide_opacity {
	opacity: 0;
}

.talent_selector_intro_hide_display {
	display: none;
}

#class_selector_intro {
	position: relative;
	top: 440px;
	right: 0;
	z-index: 11;
	padding: 6px 0px 4px 0px;
	text-align: center;
	margin: auto;
}

#class_selector_intro_text {
	position: relative;
	top: 460px;
	text-align: center;
	line-height: 1.5;
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-weight: 400;
	text-shadow: rgb(0, 0, 0) 0px 2px 2px;
	color: rgb(235, 222, 194);
	font-size: 27px;
	letter-spacing: 2px;
	text-align: center;
}

#abilities_button_container {
	width: 372px;
	padding: 8px 30px;
	text-align: right;
}

#talent_selector_reset {
	position: absolute;
	height: 100%;
	width: 372px;
}

#keywords_panel {
	padding: 0px 0px 75px 32px;
	width: 325px;
	position: absolute;
	top: 75px;
	left: 0;
	transition: 0.45s ease;
	height: 100%;
}

.class_info_text {
	color: #fff;
	font-weight: 400;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	margin: 5px 0;
	text-align: left;
}
.class_info_text_header {
	line-height: 1.5;
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-weight: 400;
	text-shadow: rgb(0, 0, 0) 0px 2px 2px;
	color: rgb(235, 222, 194);
	font-size: 18px;
	letter-spacing: 2px;
	text-align: left;
	padding: 20px 0 0px 0;
}

.class_info_hide {
	opacity: 0;
}

#talent_selector_reset_button_container {
	position: absolute;
	bottom: 10px;
	min-width: 220px;
	width: 290px;
	padding: 8px 30px;
	z-index: 4;
	transition: opacity 0.6s linear;
}

.reset_button_hide {
	opacity: 0;
}

.button_simple {
	cursor: pointer;
	color: white; /* Gold rgb(247, 177, 10) */
	width: 300px;
	font-size: 22px;
	font-family: "FrizQuadrataStd", serif;
	background: transparent;
	padding: 12px 0px;
	margin: 6px 0px;
	border-style: none;
	border-bottom: solid;
	border-width: 1px;
	border-color: #525252;
	outline:none;
	transition: 0.25s ease;
}

.button_simple:hover {
	color: #bfbfbf;
}

.button_stylized {
	cursor: pointer;
	color: white; /* Gold rgb(247, 177, 10) */
	width: 290px;
	margin: 4px 0;
	font-weight: 400;
	font-family: "FrizQuadrataStd", serif;
	letter-spacing: 1px;
	text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 7px, rgba(0, 0, 0, 0.7) 0px 1px 7px;
	line-height: 1.2em;
	font-size: 18px;
	outline:none;
	transition: border-image 0.2s ease 0s, color 0.2s ease 0s;
	background: transparent;
	border-width: 18px;
	border-style: solid;
	border-color: transparent;
	border-image: url(../../static/img/elements/button_black.png) 25 50 30 fill / 30px 50px / 0 repeat round;
}

.button_stylized:hover {
	border-image: url(../../static/img/elements/button_hover.png) 25 50 30 fill / 30px 50px / 0 repeat round;
}

.button_stylized_small {
	width: 270px;
	border-width: 16px;
	font-size: 16px;
	margin: auto;
	margin-top: 10px;
}

.navigator_divider {
	width: 84%;
	border: none;
    background-color: #525252;
    color: #525252;
    height: 1px;
}

.class_icon {
	margin: 1px 1.5px;
	width: 50px;
	height: 50px;
	transition: .17s ease;
	opacity: 0.5;
	filter: grayscale(25%);
	cursor: pointer;
}

.class_icon:hover {
  	opacity: 1;
  	filter: none;
}

.class_icon_selected {
	box-shadow: 0px 0px 2px 2px #e3be17;	/* Gold */
	border-radius: 7px;
	opacity: 1;
  	filter: none;
}

.class_icon_intro {
	margin: 1px 1.5px;
	width: 58px;
	height: 58px;
	transition: .17s ease;
	opacity: 0.7;
	filter: grayscale(50%);
	cursor: pointer;
}

.class_icon_intro:hover {
  	opacity: 1;
  	filter: none;
  	box-shadow: 0px 0px 10px 0px #919191;	/*dark grey */
	border-radius: 7px;
}
.navigator_button_container {
	margin-top: 16px;
}

.navigator_button {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	background-color: #4a4a4a;
	border: none;
	color: white;
	padding: 12px 38px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	border-radius: 4px;
}

/* ------------- Talents (Mobile) ----------------------------------------- */
#page_talents_mobile {
	display: none;
	background: url(../../static/img/elements/background_talents_preview.jpg) no-repeat center center;
	background-size: cover;
	height: 100vh;
}

#page_talents_mobile_text {
	padding: 41vh 6vh 0 6vh;
}

/* ------------- Attributes Panel ----------------------------------------- */
#stats_panel {
	position: relative;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	transition: 0.5s ease;
}

.stats_panel_hide {
	margin-left: -350px;
}

.stats_panel_title {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 22px;
	text-align: center;
	color: white;
	padding-top: 18px;
	padding-bottom: 18px;
}

.stats_number_display {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 17px;
	text-align: center;
	color: white;
	margin-top: 22px;
	margin-bottom: 12px;
}

.stats_labels {
	width: 80%;
	margin: auto;
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 12px;
	text-align: left;
	color: #6b6b6b;
	display: flex;
	flex-direction: row;
	margin-top: 4px;
	margin-bottom: 4px;
}

.stats_divider {
	width: 80%;
	border: none;
    background-color: #525252;
    color: #525252;
    height: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.slidecontainer {
	margin: auto;
	width: 80%; /* How much of the container's width the sliders fill */
}

.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 12px;
	border-radius: 5px;  
	background: #575757;	/* Medium Grey */
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	-moz-box-shadow:    inset 0 0 1px #000000;
	-webkit-box-shadow: inset 0 0 1px #000000;
	box-shadow:         inset 0 0 1px #000000;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 21px;
	height: 21px;
	border-radius: 50%; 
	background: white;	/* Light Grey */
	cursor: pointer;
	-moz-box-shadow:    inset 0 0 8px #707070;
	-webkit-box-shadow: inset 0 0 8px #707070;
	box-shadow:         inset 0 0 8px #707070;
}

.slider::-moz-range-thumb {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: white;	/* Light Grey */
	cursor: pointer;
}

/* ------------- Abilities Panel -------------------------------------------- */
#ability_header {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 25px;
	text-align: center;
	color: white;
	padding: 17px;
	background-color: rgba(0, 0, 0, 0.70);
}

#ability_column {
	width: 434px;
	height: 870px;
	padding-top: 5px;
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	overflow-y: scroll;
	transition: 0.5s ease;
}

/* Width */
#ability_column::-webkit-scrollbar {
	width: 13px;
}

/* Track */
#ability_column::-webkit-scrollbar-track {
	background: none; 
}
 
/* Handle */
#ability_column::-webkit-scrollbar-thumb {
	background: #3b3b3b;
}

/* Handle on hover */
#ability_column::-webkit-scrollbar-thumb:hover {
	background: #424242; 
}

.ability_column_hide {
	margin-left: 432px;
}

.ability {
	position: relative;
	width: 390px;
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #525252;
	padding: 6px;
}

.ability_no_border {
	border: none;
}

.ability_text {
	position: relative;
	font-family: Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 12px;
	font-style: normal;
	text-align: left;
	color: white;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 1px;
	padding-bottom: 1px;
}

.grid_ability_columns_layout {
	display: flex;
	flex-direction: row;
}

.ability_icon {
	width: 60px;
	height: 60px;
	background: url("");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin: auto;
	border-radius: 4px;
	border-style: solid;
	border-width: 2px;
	border-color: #424242; /* Grey */
	margin-bottom: 6px;
}

/* ------------- Talent Circle -------------------------------------------- */
#talents_section {
	width: 910px;
	margin: auto;
	margin-top: -18px;
}

#talents_spec_names {
	width: 910px;
	height: 910px;
	background: url(../../static/img/circle/spec_names_paladin.png) no-repeat center center;
	background-size: cover;
}

#talents_circle_tiers {
	width: 910px;
	height: 910px;
	background: url(../../static/img/circle/talents_background_tiers.png) no-repeat center center;
	background-size: cover;
}

#talents_circle_dividers {
	width: 910px;
	height: 910px;
	background: url(../../static/img/circle/talents_background_dividers.png) no-repeat center center;
	background-size: cover;
}

#talents {
	width: 910px;
	height: 910px;
}

.spec_points_display {
	position:absolute;
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 17px;
	font-style: normal;
	text-align: center;
	color: white;
	width: 20px;
	display: none;
}

.tier_joiner {
	position: absolute;
}

/* ------------- Talents -------------------------------------------- */
.talent {
	position:absolute;
}

.talent_icon {
	position:absolute;
	border-style: solid;
	border-width: 2px;
	border-color: #545454; /* Grey */
	border-radius: 8px;
	height: 35px;
	width: 35px;
	filter: grayscale(100%);
}

.talent_rank {
	font-family: Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 11px;
	font-style: normal;
	text-align: center;
	vertical-align: center;
	color: white;
	background-color: black;
	top: 28px;	/* 26px */
	left: 6px; /* 17px */
	position:relative;
	border-radius: 3px;
	height: 14px;
	width: 24px;
}

#talent_joiners {
	width: 100%;
	height: 100%;
}

.talent_joiner {
	position: absolute;
	top: 0px;
	left: 0px;
}

/* ------------- Tooltip -------------------------------------------- */
#tooltip_ability_description,
#tooltip_talent_description,
#tooltip_talent_description_nextrank {
	color: #ffd100;	/* Gold */
}

#tooltip_prereq {
	color: #ff4040;	/* Red */

}
.tooltip_text {
	font-family: Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 12px;
	font-style: normal;
	text-align: left;
	color: white;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 1px;
	padding-bottom: 1px;
}

#tooltip {
	position: absolute;
	width: 320px;
	border-style: solid;
	border-width: 1px;
	border-color: #808080;	/* Light Grey */
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.75); /* the last digit is the opacity */
	z-index: 99;
}

.tooltip_div_top {
	display: flex;
	flex-direction: row;
}

#tooltip_ability_column_left {
	display: flex;
	flex-direction: column;
}

#tooltip_ability_column_right {
	display: flex;
	flex-direction: column;
}

#tooltip_ability_columns {
	display: flex;
	flex-direction: row;
}

/* ------------- Equipment ----------------------------------------- */
#page_equipment {
	background: url(../../static/img/elements/background_equipment.jpg) no-repeat center center;
	background-size: cover;
	padding: 90px;
}

#equipment_content {
	padding: 0 50px;
}

.equipment_text {
	font-family: Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 12px;
	text-align: left;
	padding: 0.8px 0;
	color: white;
}

#equipment_introduction_background {
	background: url(../../static/img/elements/background_equipment.jpg) no-repeat center center;
	background-size: cover;
	padding: 90px 0;
}

#equipment_introduction {
	width: 650px;
	margin: auto;
}

.equipment_list {
	max-width: 650px;
	margin: auto;
	padding-inline-start: 20px;
}

#equipment_attribute_tiles_table {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.equipment_attribute_tile {
	height: 180px;
	width: 192px;
	margin: 10px;
	border-style: solid;
	border-width: 1.5px;
	border-color: #524731;
	border-radius: 12px;
}

.attribute_icon {
	display: block;
	margin: auto;
	margin-top: 19px;
	height: 56px;
	width: 56px;
}

.attribute_tile {
	padding: 0px 20px;
	margin: 5px 0px;
}

#equipment_armor {
	background: url(../../static/img/elements/background_equipment_blue.jpg) no-repeat center center;
	background-size: cover;
	padding: 25px 0px;
}

#equipment_weapons {
	background: url(../../static/img/elements/background_equipment_red.jpg) no-repeat center center;
	background-size: cover;
	padding: 25px 0px;
}

#equipment_trinkets {
	background: url(../../static/img/elements/background_equipment_green.jpg) no-repeat center center;
	background-size: cover;
	padding: 25px 0px;
}

.equipment_ability {

	width: 100%;
}

.equipment_ability_columns {
	display: flex;
	flex-direction: row;
}

.equipment_ability_name {
	font-size: 15px;
	padding-bottom: 3px;
	color: white; 
}

.equipment_ability_description {
	padding-top: 3px;
	color: #ffd100;	/* Gold */
}

.equipment_ability_column_left,
.equipment_ability_column_right {
	display: flex;
	flex-direction: column;
}

#equipment_button_area {
	text-align: center;
	padding-top: 15px;
}

#equipment_title {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 26px;
	text-align: center;
	color: white;
	margin-top: 18px;
	margin-bottom: 18px;
}

.equipment_type_header {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 18px;
	text-align: center;
	color: white;
	padding-top: 18px;
	padding-bottom: 12px;
}

.equipment_divider {
	width: 100%;
	border: none;
    background-color: #525252;
    color: #525252;
    height: 1px;
}

#equipment_page_attribute_table {
	padding-top: 20px;
	justify-content: center;
	text-align: center;
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	margin-bottom: 14px;
}

.attribute_group {
	text-align: center;
}

.attribute_table_attribute {
	padding-top: 5px;
	padding-bottom: 5px;
	width: 350px;
}

.attribute_table_name {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 14px;
	text-align: left;
	color: white;
	width: 350px;
	padding-left: 10px;
	padding-right: 10px;
}

.attribute_table_description {
	font-family: "FrizQuadrataStd", Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 14px;
	text-align: left;
	width: 330px;
	color: #ffd100;
	padding-left: 10px;
	padding-right: 10px;
}

.equipment_table {
	margin: auto;
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: center;
}

.equipment_item {
	width: 345px;
	background-color: rgba(0, 0, 0, 0.75); /* the last digit is the opacity */
	padding: 14px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	margin: 6px;
}

.equipment_info {
	display: flex;
	flex-direction: row;
}

.equipment_ability_info {
	display: flex;
	flex-direction: row;
	background-color: #121212;
	border-radius: 4px;
	margin: 7px 0px 0px 0px;
	padding: 7px 11px 11px 11px;
}

.equipment_item_icon {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	border-style: solid;
	border-width: 1px;
	border-color: #363636;
	margin-right: 10px;
	margin-top: 4px;
}

.equipment_item_effect {
	margin-top: 8px;
	padding-top: 8px;
	border-top-style: solid;
	border-width: 1px;
	border-color: #363636;
}

.equipment_ability_icon {
	width: 46px;
	height: 46px;
	border-radius: 6px;
	border-style: solid;
	border-width: 1px;
	border-color: #363636;
	margin-right: 10px;
	margin-top: 5px;
}

.equipment_item_weapon_table,
.equipment_item_slot_armor_type_table {
	display: flex;
	flex-direction: row;
}

/* ------------- Artifacts ------------------------------------- */
#page_artifacts {
	padding: 100px 0;
	background: url(../../static/img/elements/background_artifacts.jpg) no-repeat center center;
	background-size: cover;
}

.artifact_comparison {
	margin: auto;
	width: 800px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.artifact_wreath {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
}

.artifact_wreath_text {
	position: absolute;
	top: 14.5px;
	right: 9.5px;
	text-align: center;
	width: 40px;
	font-family: Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica;
	font-size: 18px;
    color: #e6cc80;
}

.equipment_item_artifact {
	border-style: solid;
	border-color: #e6cc80;
	border-width: 1px;
	position: relative;
}

.artifact_level_slider_container {
	margin: auto;
	width: 350px;
	padding: 30px 0 10px 0;
}

.slider_artifacts {
	-webkit-appearance: none;
	width: 100%;
	height: 12px;
	border-radius: 5px;  
	background: #584931;	/* Light Brown */
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	-moz-box-shadow:    inset 0 0 1px #000000;
	-webkit-box-shadow: inset 0 0 1px #000000;
	box-shadow:         inset 0 0 1px #000000;
}

.slider_artifacts::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: white;
	cursor: pointer;
	-moz-box-shadow:    inset 0 0 8px #707070;
	-webkit-box-shadow: inset 0 0 8px #707070;
	box-shadow:         inset 0 0 8px #707070;
}

.slider_artifacts::-moz-range-thumb {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: white;
	cursor: pointer;
}

hr { 
	display: block;
	margin-top: 40px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-color: #564a27;
	border-width: 0.5px;
	width: 800px;
} 

/* ------------- Raids ----------------------------------------- */
#page_raids {
	background: url(../../static/img/elements/background_raids.jpg) no-repeat center center;
	background-size: cover;
	padding: 120px 0;
}

#page_raids_bar {
	background: url(../../static/img/elements/background_raids_bar.png) no-repeat center center;
	background-size: cover;
	padding: 50px;
}

/* ------------- Leveling ----------------------------------------- */
#page_leveling {
	background: url(../../static/img/elements/background_leveling.jpg) no-repeat center center;
	background-size: cover;
	padding: 90px 0;
}

/* ------------- Immersion -------------------------------- */
#page_immersion {
	background: url(../../static/img/elements/background_immersion.jpg) no-repeat top center;
	background-size: cover;
	padding: 90px 0;
}

/* ------------- Playerbase -------------------------------- */
#page_playerbase {
	background: url(../../static/img/elements/background_playerbase.jpg) no-repeat bottom center;
	background-size: cover;
	padding: 90px 0;
}


/* ------------- Miscellaneous -------------------------------------- */
#page_misc {
	background: url(../../static/img/elements/background_misc.jpg) repeat-y center center;
	padding: 50px 0;
}

#page_misc_content {
	max-width: 650px;
	padding: 15px;
	margin: auto;
}

/* ------------- Footer ------------------------------------------ */
#page_footer {
	background: url(../../static/img/elements/background_footer.jpg) no-repeat center center;
	background-size: cover;
	padding: 40px 0px;
}

.footer_text {
	margin: auto;
	text-align: center;
	color: #e3dbcf;
	font-weight: 400;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6em;
}

.footer_text_bold {
	font-weight: bold;
	letter-spacing: 1.5px;
}

#credits_table {
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.credits_column {
	padding: 5px;
}

/* ------------- Utility ----------------------------------------- */

.no_select {
	/* stop text from being highlighted when clicking  */
	-webkit-touch-callout: none;	/* iOS Safari */
	-webkit-user-select: none;		/* Safari */
	-khtml-user-select: none;		/* Konqueror HTML */
	-moz-user-select: none;	/* Old versions of Firefox */
	-ms-user-select: none;	/* Internet Explorer/Edge */
	user-select: none;		/* Non-prefixed version, currently
							supported by Chrome, Opera and Firefox */
}

/* ------------- Mobile ----------------------------------------- */
@media only screen and (max-width: 800px) {
	/*------------ Text -----------*/
	.header {
		line-height: 1.2;
		font-size: 31px;
		letter-spacing: 2px;
	}
	.subheader {
		line-height: 1.5;
		font-size: 18px;
		letter-spacing: 2px;
		margin: 20px -1px;
	}
	.mobile_hide {
		display: none;
	}
	.desktop_hide {
		display: block;
	}
	.content_margin {
		width: 88vw;
		padding: 0 6vw;
	}

	/*------------ Landing -----------*/
	#logo_banner {
		margin-top: 40vh;
		width: 100%;
		max-width: 100vw;
		height: 24vh;
		z-index: 100;
	}

	/*------------ Introduction -----------*/
	#page_introduction {
		width: 100%;
	}

	#page_introduction_content {
		width: 88%;
		margin: auto;
		padding: 0 6%;
	}

	#page_introduction_list {
		width: 100%;
		margin: auto;
	}

	/*------------ Classes -----------*/
	#page_classes {
		padding: 10vh 0;
	}

	/*------------ Talents -----------*/
	#page_talents {
		display: none;
	}

	#page_talents_mobile {
		display: block;
	}

	/*------------ Equipment -----------*/
	#page_equipment {
		padding: 45px 0;
	}

	#equipment_attribute_tiles_table {
		display: flex;
		flex-direction: column;
		justify-content: center; 
		align-items: center;
	}

	/*----------- Artifacts --------*/
	#page_artifacts {
		width: 88vw;
		padding-left: 6vw;
		padding-right: 6vw;
	}
	.artifact_comparison {
		width: 100vw;
		flex-direction: column;
	}

	.artifact_equipment_mobile {
		margin: auto;
		margin-top: 6px;
	}

	/*------------ Raids -----------*/
	#page_raids_bar {
		padding: 45px 0;
	}
}

/* -- Tablets & Large Laptops -- */
@media only screen and (min-width: 800px) and (max-width: 1060px) {

	/*------------ Removed Features -----------*/
	#page_removed_features_column_container {
		padding-left: 4vw;
	}

	/*------------ Talents -----------*/
	#page_talents {
		display: none;
	}

	#page_talents_mobile {
		display: block;
	}

	#page_talents_mobile_text {
		padding: 45vh 6vh 0 6vh;
	}

	/*------------ Features -----------*/
	#page_features {
		display: flex;
		flex-direction: column;
	}

	.features_section {
		width: 60vw;
		border-style: solid;
		border-right-width: 0px;
		border-right-width: 0px;
		border-color: #424242;
		padding: 16vw 20vw;
	}

	/*------------ Tournaments -----------*/
	#page_tournaments {
		background: url(../../static/img/elements/background_tournaments_mobile.jpg) no-repeat center center;
		background-size: cover;
	}

	#page_tournaments_offset_frame {
		margin: auto;
		width: 60vw;
		padding: 90px 20vw 90px 20vw;
	}

	#page_tournaments_content {
		width: 100%;
		padding-left: 0px;
	}
}

/* Reduce the size of the equipment tiles on smaller phone screens */
@media only screen and (max-width: 425px) {
	.mobile_scale_down {
		-ms-transform: scale(0.8, 0.8); /* IE 9 */
		-webkit-transform: scale(0.8, 0.8); /* Safari */
		transform: scale(0.8, 0.8);
	}
	/* Offset the empty space created by transform: scale() */
	#equipment_table_0 {
		margin: -95px 0;
	}
	#equipment_table_1 {
		margin: -160px 0;
	}
	#equipment_table_2 {
		margin: -110px 0;
	}
	/* Add a border to the equipment on mobile as the background is darker*/
	.equipment_item {
		border-style: solid;
		border-color: #333333;
		border-width: 1px;
	}

	/*---------- Artifacts ----------*/
	.artifact_comparison {
		width: 100vw;
		flex-direction: column;
		transform: scale(0.8, 0.8);
		margin-top: -50px;
		margin-bottom: -50px;
		margin-left: -28px;
	}

	.artifact_level_slider_container {
		width: 90vw;
	}

	hr { 
		width: 90vw;
	}

	/*---------- Dungeon Master Items ----------*/
	#attribute_allocation_item,
	#attribute_allocation_button_container,
	#item_level_item,
	#item_level_button_container {
		display: none;
	}
}