/* Header */
#header_image {
  background-image:url('/media_images/IMG_20200520_p.jpg');
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover; 
  height:300px;
}
#header_logo {
  --logo_height:95px;
  bottom: calc(var(--logo_height) + 10px);
  height:0px;
}

/* Responsive layouts - width < 850px go to tablet mode */
@media (max-width: 850px) {
  #header_image {
    height:100px;
  }
  #header_logo {
    --logo_height: 45px;
    bottom: calc(var(--logo_height) + 4px);
  }
}
/* Responsive layouts - width < 600px go to mobile mode */
@media (max-width: 600px) {
  #header_image {
    height:65px;
  }
  #header_logo {
    --logo_height: 45px;
    bottom: calc(var(--logo_height) + 4px);
  }
}

.header_navigation {
  /*background-color:blue;*/
  /* margin-top: -40px; */
  z-index: 4;
}
.header_menu {
  color:var(--mws_running_foreground);
  position:relative;
  height:40px;
  line-height:40px;
}
.header_fixed {
  position:fixed;
  margin-top: 0;
  top:0;
}
.content_fixed {
  padding-top: 46px;
}
.menu_left {
  display: inline;
  float: left;
}
.menu_right {
  display: inline;
  float: right;
}
.menu_color_mode {
}
/* Legacy-previous slider */
.menu_dark_mode_button {
  color: var(--mws_contrast_foreground);
  background-color: var(--mws_contrast_background);
  float: right;
  position: relative;  
  height: 24px;
  width: 24px;
  margin: 9px 0px 9px 4px;
  font: 16px Arial, sans-serif;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
/* [START] Slide-Toggle */
.mwm_switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  /* ht24, c20, move20, now 40+4*/
}

.mwm_switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.mwm_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mws_contrast_background);
  border: 2px solid var(--mws_running_background);
  -webkit-transition: .4s;
  transition: .4s;
}

.mwm_slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .mwm_slider {
  background-color: var(--mws_contrast_background);
}

input:focus + .mwm_slider {
  box-shadow: 0 0 1px var(--mws_contrast_background);
}

input:checked + .mwm_slider:before {
  -webkit-transform: translateX(11px);
  -ms-transform: translateX(11px);
  transform: translateX(11px);
}
/* Rounded sliders */
.mwm_slider.mwm_round {
  border-radius: 34px;
}

.mwm_slider.mwm_round:before {
  border-radius: 50%;
}
/* [ END ] Slide-Toggle */

/* [Start] m3_Menu Items */
/* [Start] Utility Menu */
#m3_utility {
  z-index:8;
  position:fixed;
  top:0px;
  line-height:42px;
  height:42px;
  color: var(--mws_running_foreground);
  text-shadow: 0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background);
}
#m3_utility a {
  color: var(--mws_running_foreground);
  text-shadow: 0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background),
               0px 0px 5px var(--mws_running_background);
  text-decoration: none;
}
#m3_utility a:hover {
  color: var(--mws_running_link);
  cursor:pointer;
}
/* [ End ] Utility Menu */
/* */

.m3_btn {
  background-color: var(--mws_running_background);
  color: var(--mws_running_foreground);
  padding: 0px 10px 0px 10px;
  margin: 4px 0px 0px 0px;
  height: 38px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer; 
  position:relative;
  z-index: 0;
  border: 2px solid var(--mwx_menu_outline);
  border-bottom: 0px;
}
.m3_mbl_btn {
  width:100%
}
.m3_btn:hover {
  /*color: var(--mws_running_hover);*/
  background-color: pink;  
  border-color: var(--mwx_menu_outline);
}
#m3_dsk_btn_home:hover, #m3_mbl_btn_home:hover {
  background-color: var(--mwx_menu_home);
}
#m3_dsk_btn_resources:hover, #m3_mbl_btn_resources:hover {
  background-color: var(--mwx_menu_resources);
}
#m3_dsk_btn_games:hover, #m3_mbl_btn_games:hover {
  background-color: var(--mwx_menu_games);
}
.m3_mbl_btn {
  width:100%;
  display:none;
  text-align:left;
}
.m3_con_sec {
  /*background-color: rgba(127,127,127,0.875);*/
  /*background-image: linear-gradient(to right, rgba(255, 102, 0,0.875), rgba(255, 102, 0,0.375), transparent);*/
  display: none;
}
.m3_con_sec a {
  color: var(--mws_running_foreground);
  display: inline-block;
  padding:10px 10px 10px 10px;
}
.m3_con_sec a:hover {
  /*background-color: var(--mwx_darkgreen);*/
  color: var(--mws_running_foreground);
  display: inline-block;
  padding:10px 10px 10px 10px;
}

@media (min-width: 601px) {
  #m3_mbl_btn_openmenu {
    display:none;
  }
  .m3_dsk_btns {
    display: inline-block;
  }
}
@media (max-width: 600px) {
  #m3_mbl_btn_openmenu {
    display:inline-block;
  }
  .m3_dsk_btns {
    display: none;
  }
}
/* [ End ] m3_Menu Items */

/* Dynamic Menu Styles */
.mwm2_section_button {
  background-color: var(--mws_running_background);
  color: var(--mws_running_foreground);
  padding: 0px 10px 0px 10px;
  margin: 0px 0px 0px 0px;
  height: 42px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;  
}
#mwm2_btn_open_menu {
  background-color: var(--mws_running_background);
  color: var(--mws_running_foreground);
  padding: 0px 10px 0px 10px;
  margin: 0px 0px 0px 0px;
  height: 42px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;  
}
.mwm2_section_button:hover {
  color: var(--mws_running_hover);
  background-color: var(--mwx_darkgreen);
}

.mwm2_section_content a {
  color: var(--mws_running_link);
  padding: 2px 12px;
  height: 38px;
  text-decoration: none;
  display: block;
}