.HomeOverlay {
    height: 100%;
    width: 100%;
}
.DarkenOverlay {
    background: rgba(0,0,0,0.6);
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.HideButton {
    background: transparent url("../Images/Home/Button_Hide.png") no-repeat scroll top center / auto 19px;
	height: 19px;
	width: 50px;
	position: absolute;
	left: calc(50% - 25px);
    top: calc(57vmin + 110px);
	z-index: 901;
	vertical-align: bottom;
	font-size: 11px;
	padding-top: 19px;
	white-space: nowrap;
}
.HideButton:hover {
	color: transparent;
}
.HideButton:hover + .DarkenOverlay {
    opacity: 0;
}
.HomeMenuBar {
  background: transparent;
  position: absolute;
  width: 100%;
  left: 0;
  top: 10px;
  height: 35px;
  text-align: center;
  display: inline-block;
  font-family: OpenSans;
  z-index: 1;
}
.HomeMenuBar > div.active, .HomeMenuBar > div:hover {
    background-size: 180px 5px;
}
.HomeMenuBar > div {
    display: inline-block;
    font-family: GothamBook;
    font-size: 2.3vmin;
    position: relative;
    top: 5px;
    background: transparent url("../Images/underline.png") no-repeat center 100% / 0px 5px;
    padding: 0 5px 8px;
    text-decoration: none;
    color: white;
    margin: 0 20px;
    cursor: pointer;
    -webkit-transition: background-size 0.5s;
    -moz-transition: background-size 0.5s;
    -ms-transition: background-size 0.5s;
    -o-transition: background-size 0.5s;
    transition: background-size 0.5s;
    border-bottom: 0px solid white;
}
.SlidingPanel:not(.active) {
	bottom: 100%;
	position: absolute;
	width: 100%;
}
body.Home .content {
	min-height: unset;
    padding-bottom: 0;
}

.TheGameHeader {
	background: transparent url("../Images/Home/Title_LivingWorld.png") no-repeat scroll center / contain;
	width: 41.63724vmin;
	height: 18vmin;
	display: block;
	left: calc(50% - 20.81862vmin);
	position: absolute;
	top: 10vmin;
}
.ArchetypesHeader {
	background: transparent url("../Images/Home/Title_Archetypes.png") no-repeat scroll center / contain;
	width: 45vmin;
	height: 9.905vmin;
	display: block;
	left: calc(50% - 20.4428vmin);
	position: absolute;
	top: 7vmin;
}
.RoleplayHeader {
    background: transparent url("../Images/Home/Title_RolePlay.png") no-repeat scroll center / contain;
    height: 23.675vmin;
    top: 10vmin;
    position: absolute;
    width: 56.161vmin;
    left: calc(50% - 28.0805vmin);
}
.PVPHeader {
	background: transparent url("../Images/Home/Title_PvP.png") no-repeat scroll center / contain;
	height: 23.7575vmin;
	top: 10vmin;
	position: absolute;
	width: 67.7295vmin;
	left: calc(50% - 33.864vmin);
}
.SlidingPanel {
	overflow: hidden;
	height: 884px;
	height: calc(100vmin - 46px);
	-webkit-transition: bottom 0.5s;
	-moz-transition: bottom 0.5s;
	-ms-transition: bottom 0.5s;
	-o-transition: bottom 0.5s;
	transition: bottom 0.5s;
	bottom: 0;
	position: relative;
}

.SlidingPanel.BeachHead {
    background: black url("../Images/Home/Banner_Valiance.jpg") no-repeat scroll center / cover;
}
.SlidingPanel.BeachHead .HomePanel {
	text-align: center;
}
.SlidingPanel.BeachHead .LogoSmall {
	background: transparent url("../Images/VO_Logo_Small.png") no-repeat scroll 0px 0px / contain;
	width: 20.202vmin;
	height: 17.7777vmin;
	position: absolute;
	display: block;
	bottom: calc(45vmin + 89px);
	left: calc(50% - 10.101vmin);
}
.SlidingPanel.BeachHead .LogoLarge {
	background: transparent url("../Images/VO_Logo_Large.png") no-repeat scroll 0px 0px / contain;
	width: 80.808vmin;
	height: 20.1vmin;
	position: absolute;
	display: block;
	bottom: calc(25vmin + 89px);
	left: calc(50% - 40.404vmin);
}
.SlidingPanel.BeachHead .HomeBox {
    position: absolute;
    bottom: calc(21vmin + 89px);
    display: block;
    padding: 0.5vmin 1vmin;
    background: rgba(0,0,0,0.7);
    width: 15vmin;
    left: calc(50% - 8.5vmin);
    cursor: pointer;
    font-size: 1.5vmin;
}
.SlidingPanel.BeachHead .HomeBox:hover {
	background: rgba(0,0,0,0.7);
	text-decoration: none;
}
a.HomeBox {
    color: rgb(208, 208, 208);
}
a.HomeBox:hover {
    color: rgb(160, 160, 160);
}

.SlidingPanel.BeachHead .PlayNowBox, .BeachHead .DonateBox, .BeachHead .CommunityBox {
	position: absolute;
	bottom: calc(1vmin + 89px);
	color: transparent;
	display: block;
	height: 19.2vmin;
	width: 30.31488vmin;
}
.SlidingPanel.BeachHead .PlayNowBox:hover, .BeachHead .DonateBox:hover, .BeachHead .CommunityBox:hover {
	color: transparent;
}
.SlidingPanel.BeachHead .PlayNowBox {
    background: transparent url("../Images/Home/Box_PlayNowAlpha.png") no-repeat scroll center / contain;
	right: calc(50% + 17vmin);
}
.SlidingPanel.BeachHead .DonateBox {
    background: transparent url("../Images/Home/Box_Donate.png") no-repeat scroll center / contain;
	left: calc(50% - 15.1vmin);
}
.SlidingPanel.BeachHead .CommunityBox {
    background: transparent url("../Images/Home/Box_Community.png") no-repeat scroll center / contain;
	left: calc(50% + 17vmin);
}

.SlidingPanel.TheGame {
  background: black url("../Images/Home/Banner_LivingWorld.jpg") no-repeat center / cover;
}
.SlidingPanel.TheGame .TheGameContent {
	background: rgba(0,0,0,0.5);
	padding: 1.5vmin;
	width: 51vmin;
	position: absolute;
	top: 35vmin;
	left: calc(50% - 27.5vmin);
	background: -webkit-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1));
	background: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1));
	background: -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1));
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1));
	font-size: 1.282vmin;
}
.TheGameContent .BodyText {
    position: relative;
    background: rgba(62, 108, 159, 0.6);
    background: -webkit-linear-gradient(rgba(62, 108, 159, 0.6),rgba(62, 108, 159, 0.2));
    background: -o-linear-gradient(rgba(62, 108, 159, 0.6),rgba(62, 108, 159, 0.2));
    background: -moz-linear-gradient(rgba(62, 108, 159, 0.6),rgba(62, 108, 159, 0.2));
    background: linear-gradient(rgba(62, 108, 159, 0.6),rgba(62, 108, 159, 0.2));
    padding: 2vmin;
    text-align: center;
}
.SlidingPanel.TheGame .BodyText p:first-of-type {
    margin-top: 0;
}
.SlidingPanel.TheGame .BodyText p:last-of-type {
    margin-bottom: 0;
}
.SlidingPanel.TheGame .HomePanel1Buttons  {
    text-align: center;
    position: relative;
    top: 15px;
    right: 0;
    float: right;
}
.SlidingPanel.TheGame .HomeImageButton  {
    color: #CCC;
    text-decoration: none;
    padding-top: 180px;
    width: 300px;
    display: block;
    margin-bottom: 15px;
    text-shadow: 0 0 3px black;
}
.SlidingPanel.TheGame .HomeImageButton:hover{
    color: white;
}
.SlidingPanel.TheGame .HomeStoryButton {
    background: transparent url("../Images/Home/Video_TheStory.jpg") no-repeat scroll top left / contain;
}
.SlidingPanel.TheGame .HomeFeaturesButton {
    background: transparent url("../Images/Home/Video_Features.jpg") no-repeat scroll top left / contain;
}

.SlidingPanel.Archetypes {
    background: black url("../Images/Home/Banner_Archetypes.jpg") no-repeat center / cover;
}

.ArchetypeIconGroup {
	text-align: center;
	position: absolute;
	top: 19vmin;
	left: calc(50% - 37.572vmin);
	background: rgba(0,0,0,0.5);
	font-size: 0;
}
.ArchetypeIcon {
	width: 6.262vmin;
	padding: 6.515vmin 0 5px;
	font-size: 0.8vmin;
	color: #888;
	display: inline-block;
	text-transform: uppercase;
	margin: 10px 0.25vmin;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.ArchetypeIcon.active, .ArchetypeIcon:hover {
  color: white;
  cursor: pointer;
}
#Titan_Button {
	background: url("../Images/Home/Icon_Titan_grey.png") no-repeat scroll 0 0 / contain;
}
#Titan_Button.active, #Titan_Button:hover {
	background-image: url("../Images/Home/Icon_Titan.png");
}
#Projector_Button {
	background: url("../Images/Home/Icon_Projector_grey.png") no-repeat scroll 0 0 / contain;
}
#Projector_Button.active, #Projector_Button:hover {
	background-image: url("../Images/Home/Icon_Projector.png");
}
#Sapper_Button {
	background: url("../Images/Home/Icon_Sapper_grey.png") no-repeat scroll 0 0 / contain;
}
#Sapper_Button.active, #Sapper_Button:hover {
	background-image: url("../Images/Home/Icon_Sapper.png");
}
#Brawler_Button {
	background: url("../Images/Home/Icon_Brawler_grey.png") no-repeat scroll 0 0 / contain;
}
#Brawler_Button.active, #Brawler_Button:hover {
	background-image: url("../Images/Home/Icon_Brawler.png");
}
#Enforcer_Button {
	background: url("../Images/Home/Icon_Enforcer_grey.png") no-repeat scroll 0 0 / contain;
}
#Enforcer_Button.active, #Enforcer_Button:hover {
	background-image: url("../Images/Home/Icon_Enforcer.png");
}
#Harrier_Button {
	background: url("../Images/Home/Icon_Harrier_grey.png") no-repeat scroll 0 0 / contain;
}
#Harrier_Button.active, #Harrier_Button:hover {
	background-image: url("../Images/Home/Icon_Harrier.png");
}
#Coordinator_Button {
	background: url("../Images/Home/Icon_Coordinator_grey.png") no-repeat scroll 0 0 / contain;
}
#Coordinator_Button.active, #Coordinator_Button:hover {
	background-image: url("../Images/Home/Icon_Coordinator.png");
}
#Manipulator_Button {
	background: url("../Images/Home/Icon_Manipulator_grey.png") no-repeat scroll 0 0 / contain;
}
#Manipulator_Button.active, #Manipulator_Button:hover {
	background-image: url("../Images/Home/Icon_Manipulator.png");
}
#Leader_Button {
	background: url("../Images/Home/Icon_Leader_grey.png") no-repeat scroll 0 0 / contain;
}
#Leader_Button.active, #Leader_Button:hover {
	background-image: url("../Images/Home/Icon_Leader.png");
}
#Commander_Button {
	background: url("../Images/Home/Icon_Commander_grey.png") no-repeat scroll 0 0 / contain;
}
#Commander_Button.active, #Commander_Button:hover {
	background-image: url("../Images/Home/Icon_Commander.png");
}
#Director_Button {
	background: url("../Images/Home/Icon_Director_grey.png") no-repeat scroll 0 0 / contain;
}
#Director_Button.active, #Director_Button:hover {
	background-image: url("../Images/Home/Icon_Director.png");
}

#Titan_Button:before, #Projector_Button:before, #Sapper_Button:before, #Brawler_Button:before,
#Enforcer_Button:before, #Harrier_Button:before, #Coordinator_Button:before, #Manipulator_Button:before,
#Leader_Button:before, #Commander_Button:before, #Director_Button:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: url("../Images/underline.png") no-repeat center 100% / 0px 5px;
	-webkit-transition: background-size 0.5s;
    -moz-transition: background-size 0.5s;
    -ms-transition: background-size 0.5s;
    -o-transition: background-size 0.5s;
    transition: background-size 0.5s;
}
#Titan_Button:hover:before, #Projector_Button:hover:before, #Sapper_Button:hover:before, #Brawler_Button:hover:before,
#Enforcer_Button:hover:before, #Harrier_Button:hover:before, #Coordinator_Button:hover:before, #Manipulator_Button:hover:before,
#Leader_Button:hover:before, #Commander_Button:hover:before, #Director_Button:hover:before,
#Titan_Button.active:before, #Projector_Button.active:before, #Sapper_Button.active:before, #Brawler_Button.active:before,
#Enforcer_Button.active:before, #Harrier_Button.active:before, #Coordinator_Button.active:before, #Manipulator_Button.active:before,
#Leader_Button.active:before, #Commander_Button.active:before, #Director_Button.active:before {
	background-size: 150px 5px;
}

.ArchetypeIcon.Titan {
	background-image: url("../Images/Home/Icon_Titan.png");
}
.ArchetypeIcon.Projector {
	background-image: url("../Images/Home/Icon_Projector.png");
}
.ArchetypeIcon.Sapper{
	background-image: url("../Images/Home/Icon_Sapper.png");
}
.ArchetypeIcon.Brawler {
	background-image: url("../Images/Home/Icon_Brawler.png");
}
.ArchetypeIcon.Enforcer {
	background-image: url("../Images/Home/Icon_Enforcer.png");
}
.ArchetypeIcon.Harrier {
	background-image: url("../Images/Home/Icon_Harrier.png");
}
.ArchetypeIcon.Coordinator {
	background-image: url("../Images/Home/Icon_Coordinator.png");
}
.ArchetypeIcon.Manipulator {
	background-image: url("../Images/Home/Icon_Manipulator.png");
}
.ArchetypeIcon.Leader {
	background-image: url("../Images/Home/Icon_Leader.png");
}
.ArchetypeIcon.Commander {
	background-image: url("../Images/Home/Icon_Commander.png");
}
.ArchetypeIcon.Director {
	background-image: url("../Images/Home/Icon_Director.png");
}

.ArchetypeDescription .ArchetypeIcon {
    width: 6.515vmin;
    height: 6.515vmin;
    display: inline-block;
    float: left;
    margin: 5px 0px 0px 77px;
    padding: 0px;
    float: left;
}
.ArchetypeContainer {
	position: absolute;
	background: rgba(27,27,27,0.7);
	background: -webkit-linear-gradient(rgba(27,27,27,0.7),rgba(27,27,27,0.7), rgba(27,27,27,0.2));
	background: -o-linear-gradient(rgba(27,27,27,0.7),rgba(27,27,27,0.7), rgba(27,27,27,0.2));
	background: -moz-linear-gradient(rgba(27,27,27,0.7),rgba(27,27,27,0.7), rgba(27,27,27,0.2));
	background: linear-gradient(rgba(27,27,27,0.7),rgba(27,27,27,0.7), rgba(27,27,27,0.2));
	display: inline-block;
	width: 33%;
	left: 10%;
	padding: 1vmin;
	height: 16vmin;
	text-align: center;
	top: 10vmin;
	text-transform: uppercase;
}
.ArchetypeContainer.Name {
    height: 7.515vmin;
    width: 95%;
    left: 10%;
    padding: 0;
    top: 0;
}
.ArchetypeContainer + .ArchetypeContainer + .ArchetypeContainer {
	right: 10%;
	left: unset;
}
.ArchetypeDescriptionGroup {
	display: block;
	position: absolute;
	left: calc(50% - 41.9vmin);
	width: 44vmin;
	top: 32vmin;
	height: 0;
}
.ArchetypeDescription {
	display: none;
}
.ArchetypeDescription.active {
	display: block;
}
.ArchetypeDescription h1 {
    font-size: 2.5vmin;
    text-transform: uppercase;
    margin: 28px 0px 0px 6px;
    text-align: center;
    display: inline-block;
    top: 2.6vmin;
    float: left;
}
.ArchetypeDescription h2 {
	font-family: GothamBold;
	font-size: 1.75vmin;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	display: block;
}
.ArchetypeDescription h3 {
	font-family: GothamBook;
	font-size: 1.4vmin;
	text-align: center;
	text-transform: uppercase;
	margin: 0.4vmin 0;
	padding: 0;
	width: 100%;
	display: block;
}
.ArchetypeDescription p {
    margin: 0 0 20px 0;
}
.BodyText p:last-of-type {
    margin-bottom: 0;
}
.ArchetypeDescription .BodyText {
	position: absolute;
	top: 30vmin;
	left: 41px;
	width: 81%;
	font-size: 1.35vmin;
	text-align: center;
}
.TypeIcon {
	display: inline-block;
	width: 100%;
	padding-top: 8vmin;
	background-size: 8vmin;
	background-position: top center;
	background-repeat: no-repeat;
	font-size: 1.4vmin;
}
.TypeIcon.Split {
    width: 40%;
	background-size: 7vmin;
	background-position: center 0.5vmin;
    left: 1vmin;
    position: absolute;
}
.TypeIcon.Split:last-of-type {
    right: 1vmin;
    left: unset;
}
.TypeOr {
    display: inline;
    position: relative;
    top: 4vmin;
    font-size: 1.25vmin;
}
.TypeIcon.Commander {
	background-image: url("../Images/Powers/Commander.png");
}
.TypeIcon.Director {
	background-image: url("../Images/Powers/Director.png");
}
.TypeIcon.Leader {
	background-image: url("../Images/Powers/Leader.png");
}
.TypeIcon.MeleeControl {
	background-image: url("../Images/Powers/Melee_Control2.png");
}
.TypeIcon.MeleeDamage {
	background-image: url("../Images/Powers/Melee.png");
}
.TypeIcon.MeleeDefensive {
	background-image: url("../Images/Powers/Melee_Defense.png");
}
.TypeIcon.MeleeDamageControl {
	background-image: url("../Images/Powers/Melee_Control.png");
}
.TypeIcon.MeleeDefenseControl {
	background-image: url("../Images/Powers/Melee_Defense_Control.png");
}
.TypeIcon.RangedDamage {
	background-image: url("../Images/Powers/Ranged.png");
}
.TypeIcon.RangedControl {
	background-image: url("../Images/Powers/Ranged_Control.png");
}
.TypeIcon.RangedSupport {
	background-image: url("../Images/Powers/Ranged_Support.png");
}
.TypeIcon.TeamSupport {
	background-image: url("../Images/Powers/Team_Support.png");
}

.SlidingPanel.Roleplay {
  background: black url("../Images/Home/Banner_RolePlay.jpg") no-repeat center / cover;
}
.Roleplay .RoleplayContent {
    position: absolute;
    top: 38vmin;
    width: 60vmin;
    left: calc(50% - 32vmin);
    background: rgba(0, 0, 0, 0.6);
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    padding: 1.5vmin;
	font-size: 1.282vmin;
}
.SlidingPanel.Roleplay .BodyText {
    position: relative;
    background: rgba(128, 40, 0, 0.6);
    background: -webkit-linear-gradient(rgba(128, 40, 0, 0.6), rgba(128,40,0,0.2));
    background: -o-linear-gradient(rgba(128, 40, 0, 0.6), rgba(128,40,0,0.2));
    background: -moz-linear-gradient(rgba(128, 40, 0, 0.6), rgba(128,40,0,0.2));
    background: linear-gradient(rgba(128, 40, 0, 0.6), rgba(128,40,0,0.2));
    padding: 2vmin;
	text-align: center;
}
.SlidingPanel.Roleplay p {
    margin-top: 0;
}

.SlidingPanel.PVP {
  background: black url("../Images/Home/Banner_PvP.jpg") no-repeat center / cover;
}
.SlidingPanel.PVP .PVPContent {
    position: absolute;
    top: 38vmin;
    width: 60vmin;
    left: calc(50% - 32vmin);
    background: rgba(0, 0, 0, 0.6);
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.2));
    padding: 1.5vmin;
	font-size: 1.282vmin;
}
.SlidingPanel.PVP .BodyText {
    position: relative;
    background: rgba(128, 0, 0, 0.6);
    background: -webkit-linear-gradient(rgba(128, 0, 0, 0.6), rgba(128,0,0,0.2));
    background: -o-linear-gradient(rgba(128, 0, 0, 0.6), rgba(128,0,0,0.2));
    background: -moz-linear-gradient(rgba(128, 0, 0, 0.6), rgba(128,0,0,0.2));
    background: linear-gradient(rgba(128, 0, 0, 0.6), rgba(128,0,0,0.2));
    padding: 2vmin;
}
.SlidingPanel.PVP .BodyText h2 {
	display: inline-block;
	margin: 0 3vmin 0 0;
	font-family: GothamBold;
	font-size: 2.5vmin;
	text-align: center;
}

.kunenadiscuss {
    display: none;
}

.Footer {
    background-color: RGBA(49, 49, 49, 0.6);
    position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}