/*
 * ------------------------------------
 * bs4: mobile navbar without js custom
 * ------------------------------------
 * show the collapse when navbar toggle is checked */
#my-navbar-toggle-cbox:checked ~ .collapse {
	display: block;
}

/* the checkbox used only internally; don't display it */
#my-navbar-toggle-cbox {
  display:none
}

/*
 * ------------------------------------
 * bs4: dropdown (drops down on click)
 * ------------------------------------
*/

.my-dropdown-toggler > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.my-dropdown-toggler > label,
.my-dropdown-toggler > a[role="button"] {
  display: inline-block;
  /*padding: 6px 15px;*/
  /*color: #F00;*/

  /*line-height: 1.5em;*/
  text-decoration: none;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/*
.my-dropdown-toggler > label:hover,
.my-dropdown-toggler > a[role="button"]:hover,
.my-dropdown-toggler > a[role="button"]:focus {
  color: #0F0;
}
*/
.my-dropdown-toggler > label:after,
.my-dropdown-toggler > a[role="button"]:after {
  content: "\f0d7";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 3px;
}

.my-dropdown-toggler > [type="checkbox"]:checked + label:after {
  content: "\f0d8";
}

.my-dropdown-toggler > input[type="checkbox"]:checked ~ .dropdown-menu {
    display: block;
}


/*
 * ------------------------------------
 * bs4: dropdown (drops down on hover)
 * ------------------------------------
*/

.dropdown:hover > .dropdown-menu {
	display: block;
}

.dropdown>.dropdown-toggle:active {
	/* Without this, clicking will make it sticky */
	pointer-events: none;
}

/*
 * ------------------------------------
 * NWR - Tooltip
 * ------------------------------------
*/
.nwr-tooltip > i {
    opacity: 0.6;
}
.nwr-tooltip > i:hover {
	opacity: 1;
}

.nwr-tooltip i:hover ~ .nwr-tooltip-text {
	visibility: visible;
}

.nwr-tooltip > .nwr-tooltip-text {
    visibility: hidden;

    position: absolute;
    left: 1rem;
    bottom: 100%;
    max-width: 100%;
    padding: 5px 5px;
    z-index: 1;

    color: #fff;
    background-color: #000;
/*
    font-size: 13px;
    text-align: left;
*/
    overflow-wrap: break-word;
    border-radius: 6px;
}

/*
 * ------------------------------------
 * NWR - my slider/carousel code
 * ------------------------------------
*/

@keyframes nwr-sl-anim-scrollone {
    0% { transform: translateX(0); }
    75% { transform: translateX(0); }
    96% { transform: translateX( calc( 100% * -1) ); }
    97% { transform: translateX( calc( 100% * -1)) translateX(+15px); }
    100% { transform: translateX( calc( 100% * -1) ); }
}

@keyframes nwr-sl-anim-scrolltrack {
    0% { transform: translateX(0); }
    100% { transform: translateX( calc( (var(--nwr-sl-num-imgs) / var(--nwr-sl-num-total-imgs)) * -100% ) ); }
}

#nwr-sl-landing {
    --nwr-sl-animspeed: 30s;
    --nwr-sl-num-total-imgs: 10;
    --nwr-sl-img-maxwidth: 850px;
    --nwr-sl-num-imgs: calc( var(--nwr-sl-num-total-imgs) - 1);
    --nwr-sl-img-time: calc( var(--nwr-sl-animspeed) / var(--nwr-sl-num-imgs) );
}

#nwr-sl-gamessupported {
    --nwr-sl-animspeed: 20s;
    --nwr-sl-num-total-imgs: 9;
    --nwr-sl-img-maxwidth: 450px;
    --nwr-sl-num-imgs: calc( var(--nwr-sl-num-total-imgs) - 1);
    --nwr-sl-img-time: calc( var(--nwr-sl-animspeed) / var(--nwr-sl-num-imgs) );
}

.nwr-sl {
    max-width: var(--nwr-sl-img-maxwidth);

    background: transparent;
    /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);*/
    margin: auto;
    overflow:hidden;
    position: relative;
    width: 100%;
    height: auto;
}
.nwr-sl .nwr-sl-window {
    animation: nwr-sl-anim-scrollone var(--nwr-sl-img-time) linear infinite;
}

.nwr-sl .nwr-sl-track {
    width: calc( 100% * var(--nwr-sl-num-total-imgs) );
    display: flex;
    flex-direction: row;
    align-items: center; /* align vertical */
    animation: nwr-sl-anim-scrolltrack var(--nwr-sl-animspeed) steps( var(--nwr-sl-num-imgs) ) infinite;
    height: 100%;
}

.nwr-sl-img {
    max-width: var(--nwr-sl-img-maxwidth);
    width: 100%;
    height: auto;
}

.nwr-sl-img img {
    width: 100%;
    height: auto;
}


/*
 * ------------------------------------
 * NWR - modal box and overlay
 * ------------------------------------
*/

.nwr-modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.nwr-modal:target {
  visibility: visible;
  opacity: 1;
}

.nwr-modal-content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.nwr-modal-footer {
  text-align: right;
}
.nwr-modal-footer a {
  color: #585858;
}
.nwr-modal-footer i {
  color: #d02d2c;
}

.nwr-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}


/*
 * ------------------------------------
 * NWR - Hidden radio stuff (icons)
 * ------------------------------------
*/

/*
div[id^=myhidden_] {
    display: none;
}
input[id^=player_cb_]:checked ~ div[id^=myhidden_] {
    display: block;
}

#myhidden {
    display: none;
}
:checked ~ #myhidden {
    display: block;
}
*/


/* HIDE RADIO */
.nwr-hiddenradio [type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.nwr-hiddenradio label {
  cursor: pointer;
}

/* hides all div of the ID */
.nwr-hiddenradio div[id*=_hidden_] {
    display: none;
}

/*
.hiddenradio [type=radio][value^=rhidden_x]:checked ~ div[id^=rhidden_]   {
    display: none;
}*/
.nwr-hiddenradio [type=radio][value*=_hidden_a]:checked ~ div[id*=_hidden_a]   {
    display: block;
}
.nwr-hiddenradio [type=radio][value*=_hidden_b]:checked ~ div[id*=_hidden_b]   {
    display: block;
}
.nwr-hiddenradio [type=radio][value*=_hidden_c]:checked ~ div[id*=_hidden_c]   {
    display: block;
}


/*
 * ------------------------------------
 * NWR - Width of name fields and max size
 * ------------------------------------
*/
.nwr-width {
    /*width: 17rem;*/
    max-width: 17rem;
}
.nwr-name-field-width {
    width: 10rem;
    max-width: 10rem;
}


/*
 * ------------------------------------
 * NWR - Additional font QTMilitary
 * ------------------------------------
*/

@font-face {                
	font-family: "QTMilitary";
	src: local('QTMilitary'),
	url('../webfonts/QTMilitary.otf'),
	url('../webfonts/QTMilitary.woff2');
  	font-weight: 400;
  	font-style: normal;

}                                   
.qtmilitary {
	font-family: "QTMilitary";
}
