html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* Site background */
body {
	/*default*/
    background-image: url(../images/background.jpg);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed; /*Keep background fixed at its position & Keeping the background from being zoomed in, when scrolling or clicking to expand the patch note boxes*/
	height: 100%;
	
	/* Easter */
    /*background-image: url(../images/background_easter.jpg);*/
	/* Halloween */
    /*background-image: url(../images/background_halloween.jpg);*/
	/* Christmas */
    /*background-image: url(../images/background_christmas.jpg);*/
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* Style the header */
.header {
  /*background-color: rgb(0, 0, 0);*/
  background: rgba(0,0,0,0.85);
  background-size: 100%;
  background-position: center;
  padding: 20px;
  text-align: center;
  border: 2px solid white;
  width: 100%;
  box-sizing: border-box;  /* to prevent overflow-y */
  font-family: Arial, Helvetica, sans-serif;
}
/* nav list */
nav ul {
  margin:0;
  padding: 0;
  list-style-type: none;
  position: relative;
}
nav li {
  display: inline-block;
  margin-right: 20px;
}
nav form {
  display: inline-block;
  margin-right: 20px;
}
/* nav buttons */
.navbtn:hover {
    background-color: #e15b00;
    color: white;
}
.navbtn {
    background-color: rgb(65, 63, 63);
    text-align: center;
    padding: 10px 32px;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
}
/* language nav button */
.navbtn_tooltip {
    background-color: rgb(65, 63, 63);
    text-align: center;
    padding: 10px 32px;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
}
.navbtn_tooltip:hover {
    background-color: #e15b00;
    color: white;
}
/* language popup main div */
.language_popup {
  visibility: hidden;
  width: 400px;
  background-color: white;
  background-size: 100%;
  border-radius: 6px;
  padding: 3px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  /* specifying the column details */
  column-count: 2;
  column-gap: 10px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: black;
  column-width: 150px;
}
/* make language change visible on hovering */
.navbtn_tooltip:hover .language_popup {
  visibility: visible;
}
/* popup left column */
.languagename_leftside {
  text-align: left;
}
/* popup right column */
.languagename_rightside {
  text-align: left;
}
/* language divs (each language has its own main div containing flag + language word div) */
.languagename {
  padding-top: 3px;
  padding-left: 3px;
}
/* when hovering over the main language div */
.languagename:hover {
  background-color: lightgray;
}
/* add border when specific language is chosen */
.chosenlanguagename {
  border: 1px solid red;
}
/* various language word divs (each language word has its own div) */
.languageword {
  width: 70%;
  float: right;
  margin-top: 2.5px;
  margin-right: 10px;
  text-align: center;
  padding: 2px;
  color: black;
}
/* Talent Calculator Button */
.navbtn_talentcalculator {
    background-color: rgb(65, 63, 63);
    text-align: center;
    padding: 10px 32px;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
}
.navbtn_talentcalculator:hover {
    background-color: #e15b00;
    color: white;
}
/* talentcalculator popup main div */
.talentcalculator_popup {
  visibility: hidden;
  width: 300px;
  background-color: white;
  background-size: 100%;
  /*text-align: left;*/
  border-radius: 6px;
  padding: 3px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
/* make talentcalculator_popup change visible on hovering */
.navbtn_talentcalculator:hover .talentcalculator_popup {
  visibility: visible;
}
.talentcalclinkcontainer {
  text-align: center;
}
.talentcalclistentry {
  padding-top: 3px;
  padding-left: 3px;
}
.talentcalclistentry:hover {
  background-color: lightgray;
}
.linktype {
  width: 70%;
  float: right;
  margin-top: 2.5px;
  margin-right: 10px;
  text-align: center;
  padding: 2px;
  color: black;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* contentbox_left */
.contentbox_left {
  margin-left: 0%;
  width: 10%;
  height: auto;
  box-sizing: border-box;
  background: rgba(0,0,0,0.5);
  float: left;
}
/* The sticky class is added to the contentbox_left with JS when it reaches its scroll position */
.stickycontentleft {
  position: fixed;
  top: 12%;
}
/* list in contentbox left */
.contextbox_mainlist {
  margin-top: 30%;
  text-align: center;
  text-decoration: underline;
}
/* links in contentbox left */
.contentinfo {
  margin-bottom: 38%;
}
.contentinfo:hover {
  cursor: pointer;
  color: grey;
  text-decoration: underline;
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* Main Text Template */
.main_text_panel {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 11%;
  margin-top: 3%;
  margin-bottom: 3%;
  width: 73%;
  box-sizing: border-box;
  border-radius: 6px;
}
/* main frame */
.sub_text_panel {
  background: rgba(0,0,0,0.5);
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  border: 1px solid white;
  border-radius: 6px;
}
/* Main title divs (icon + title) */
.main_titlediv {
  width: 100%;
  height: 59px;
  border: 2px solid white;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
}
/* title icon */
.maintexticon {
  margin-top: 3px;
  margin-left: 3px;
  border-radius: 3px;
  float: left;
}
/* title of the text paragraph*/
.boxtitle {
  /*float: right;*/
  width: auto;
  margin-top: 18px;
  margin-right: 50px;
  text-align: center;
}
/* maintext sections (text / image)*/
.maintextsections {
  column-count: 2;
  column-gap: 10px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: white;
  column-width: 40%;
  box-sizing: border-box;
}
/* main description text paragraph*/
.maintext {
  margin-left: 8px;
  margin-right: 8px;
}
/* main description images*/
.maintextimage_container {
  float: right;
  text-align: center;
  margin-top: 5px;
}
.maintextimage {
  width: 100%;
  height: 80%;
  border-radius: 3px;
}
/* maintextimage caption*/
figcaption {
    margin: 10px 0 0 0;
    color: white;
}
/* small res video box */
.sub_text_panel_smallvideobox {
  background: rgba(0,0,0,0.5);
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  border: 1px solid white;
  border-radius: 6px;
  display: none;
}
/* Main title divs (icon + title) */
.main_titlediv_smallvideobox {
  width: 100%;
  height: 59px;
  border: 2px solid white;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
}
/* title icon */
.maintexticon_smallvideobox {
  margin-top: 3px;
  margin-left: 3px;
  border-radius: 3px;
  float: left;
}
/* title of the text paragraph*/
.boxtitle_smallvideobox {
  width: auto;
  margin-top: 18px;
  text-align: center;
}
.maintextsections_smallvideobox {
  column-count: 2;
  column-gap: 10px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: white;
  column-width: 40%;
  box-sizing: border-box;
  text-align: center;
}
.video_left_side {
  float: left;
  margin-top: 0.5%;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 0.75%;
  padding-left: 0.75%;
  padding-right: 0.75%;
  overflow: hidden;
  border: 1px solid white;
  border-radius: 2px;

}
.video_right_side {
  float: right;
  margin-top: 0.5%;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 0.75%;
  padding-left: 0.75%;
  padding-right: 0.75%;
  overflow: hidden;
  border: 1px solid white;
  border-radius: 2px;

}
.smallvideobox_videothumbnail {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: 0.4s;
}
.smallvideobox_videothumbnail:hover {
  transform: scale(1.1,1.1);
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* Server Status info texts */
.server_status_text_offline {
  color: red;
}
.server_status_text_online {
  color: green;
}

.time_display_text {
  color: rgba(252, 224, 134, 1);
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* videobox */
.videobox_right {
    color: white;
    margin-left: 85%;
    top: 12%;
    width: 15%;
    height: auto;
    box-sizing: border-box;
    background: rgba(0,0,0,0.5);
    position: absolute;
}
/* The sticky class is added to the videobox_right with JS when it reaches its scroll position */
.stickyvideobox {
  position: fixed;
  top: 12%;
  z-index: -1;
}

.videolisttitle {
  margin-top: 5%;
}

/* Button list */
.videolist {
  text-align: center;
  margin-top: 20%;
}

/* video images */
.videothumbnail {
  margin-top: 5%;
  width: 80%;
  cursor: pointer;
  border: 1px solid white;
  border-radius: 2px;
  transition: 0.4s; /* transition time of the transform below */
}
.videothumbnail:hover {
  transform: scale(1.1,1.1);
}

/* Changes for smaller screen res */
@media only screen and (max-width: 1400px) {
  .contentbox_left {
    margin-left: 0%;
    width: 10%;
    height: auto;
    top: 25%;
    box-sizing: border-box;
    background: rgba(0,0,0,0.5);
    float: left;
  }
  .videobox_right {
    display: none;
  }
  .sub_text_panel_smallvideobox {
    background: rgba(0,0,0,0.5);
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
    border: 1px solid white;
    border-radius: 6px;
    display: block;
  }

}

@media only screen and (max-width: 1150px) {
  .language_popup {
    visibility: hidden;
    width: 200px;
    background-color: white;
    background-size: 100%;
    /*text-align: left;*/
    border-radius: 6px;
    padding: 3px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;

    /* specifying the column details */
    column-count: 1;
    column-gap: 0;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: black;
    column-width: 150px;
  }
}

@media only screen and (max-width: 1000px) {
  .boxtitle {
    float: none;
    width: auto;
    margin-right: 50px;
    margin-top: 18px;
    text-align: center;
  }
  .contentbox_left {
    display: none;
  }
  .main_text_panel {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 0;
    margin-top: 3%;
    margin-bottom: 3%;
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
  }

}

@media only screen and (max-width: 700px) {
  .language_popup {
    visibility: hidden;
    width: 180px;
    background-color: white;
    background-size: 100%;
    box-sizing: border-box;
    /*text-align: left;*/
    border-radius: 6px;
    padding: 3px;
    /* Position the tooltip */
    position: absolute;
    z-index: 2;
    /* specifying the column details */
    column-count: 1;
    column-gap: 0;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: black;
    column-width: 150px;
  }
}