@charset "UTF-8";
/* Base Styles
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url(font-awesome.min.css);
/* NOTE
 *html is set to 62.5% so that all the REM measurements throughout Skeleton
 *are based on 10px sizing. So basically 1.5rem = 15px :) */

/* 
@font-face {
  font-family: 'pubg';
  src: url('../fonts/pubg.ttf');
}
 */


     div#banner { 
   /*     position: absolute;  */
       top: 0; 
       left: 0; 
       background-color: #353535;
       width: 99.9%;
       
     }
     div#banner-content { 
       width: 100%; 
       margin: 0 auto; 
       padding-top: 10px;
       padding-bottom: 10px;
       border: 1px solid #000;
       text-align:center;
       font-size: .5em!important;
     }
 
 
html {
  font-size: 62.5%;
}

body {
  font-size: 1.5em;
  /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.3;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  overflow-y: scroll;
}

/* Header CSS
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
#top-header {
  text-align: center;
}

#top-logo {
  display: block;
  margin: 0 auto;
/*   width: 20%; */
  height: auto;
  min-width: 70px;
  max-width: 200px;
 /*  padding-bottom:10px; */
}

.headingDesc {
  font-size:1em;
  margin-bottom: 0!important;
}

/* Typography
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
 
 
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0rem;
  font-weight: 700;
  text-transform:uppercase;
 /*  font-family: pubg!important; */

}

.normalHeader{
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif!important;
  font-weight: 600;
}

h1 {
  font-size: 3rem;
  line-height: 1;
  letter-spacing: .1rem;
  color:#fe6b01;
}

h2 {
  font-size: 2.8rem;
  line-height: .8;
  letter-spacing: .1rem;
  color: #fe6b01;

}

h3 {
  font-size: 2.6rem;
  line-height: 1.3;
  letter-spacing: .1rem;
  color: #fe6b01;
}

h4 {
  font-size: 2.0rem;
  line-height: 1.35;
  letter-spacing: .1rem;
  color:#fe6b01;
}

h5 {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: .1rem;
}

h6 {
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 3rem;
  }
  h3 {
    font-size: 2.8rem;
  }
  h4 {
    font-size: 2.6rem;
  }
  h5 {
    font-size: 2.4rem;
  }
  h6 {
    font-size: 1.5rem;
  }
}

p {
  margin-top: 0;
}

/* Links
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #000000;
  text-decoration:none;
}

a:hover {
  color: #ffffff;
  text-decoration:underline;
/* 
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
 */
}

/* Buttons
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menuButton {
  min-width: 180px !important;
  height: 60px !important;
  padding: 0px !important;
  font-size: 2em!important;
  background-color: #fe6b01!important;
  color: #ffffff!important;
}
.menuButton2 {
  min-width: 145px !important;
  height: 40px !important;
  padding: 14px !important;
  font-size: 1em!important;
  line-height: 0!important;
  background-color: #fe6b01!important;
  color: #ffffff!important;
}

.mapButton {
  min-width: 145px !important;
  height: 40px !important;
  padding: 0px 10px !important;
  font-size: 1em!important;
  background-color: #fe6b01!important;
  color: #ffffff!important;
}

.bottomMenu {
  
    font-size: 1em!important;
    color: #ffffff!important;
    padding: 10px;
    text-decoration: none;
    text-transform:uppercase;

}

.switchMap {
	display: block;
	padding: 0;
}

.button, button, .button2 {
  display: inline-block;
  height: 38px;
  padding: 0 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: #fe6b01!important;
  color: #000000!important;
  border-radius: 4px;
  /*border: 1px solid #bbb;*/
  min-width: 125px;
  cursor: pointer;
  box-sizing: border-box;
  margin-right: 5px;
}

input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 20px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.67);
  border-radius: 4px;
  /*border: 1px solid #bbb;*/
  min-width: 125px;
  cursor: pointer;
  box-sizing: border-box;
  margin-right: 5px;
}


/*.button1:6 { */
/*color: #0FA0CE!important; */
/*} */
.button1:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
  outline: 0;
  background-color: #c35505!important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #ffffff !important;
  -webkit-box-shadow: inset 0 1px 0 rgba(120, 71, 22, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2) !important;
  -moz-box-shadow: inset 0 1px 0 rgba(120, 71, 22, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2)!important;
  box-shadow: inset 0 1px 0 rgba(120, 71, 22, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}

.levelButton {
  background-color: #CC0000 !important;
  color: #ffffff !important;
  border: solid 1px #484848;
  -moz-box-shadow: inset 0 0 5px #ffb9b9;
  -webkit-box-shadow: inset 0 0 5px #ffb9b9;
  box-shadow: inset 0 0 5px #ffb9b9;
}

.levelButton:hover {
  border-color: #888 !important;
  outline: 0 !important;
  background-color: #a30000 !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  border-radius: 4px !important;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2) !important;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}

/* To override sweetalert styling of button
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Forms
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  color: #555!important;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  width: 80%;
}

textarea {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  width: 80%;
}

select {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  width: 50%;
}

select.swal2-select {
  background-color: #CC0000;
  background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  color: white;
  padding: 12px;
  width: auto;
  font-size: 1.6em;
  font-weight: 600;
  color: #fff !important;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border: solid 2px #000000 !important;
  -webkit-border-radius: 3px;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  -webkit-transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -ms-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

select.swal2-select:hover {
  background-color: #C0392B;
  display: block !important;
}

select.swal2-select:focus {
  display: block !important;
  border: 0;
  outline: 0;
}

select.swal2-select:active {
  border: 0;
  outline: 0;
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}

textarea:focus, select:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}

label, legend {
  display: block;
  margin-bottom: .5rem;
  /* Removed for main menu styling */
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0;
}

input[type="checkbox"], input[type="radio"] {
  display: inline;
}

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal;
}

/* Lists
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside;
  -webkit-margin-after: 0!important;
}

ol {
  list-style: decimal inside;
  padding-left: 0;
  margin-top: 0;
}

ul {
  padding-left: 0;
  margin-top: 0;
}

/* Removed for Main Menu Styling */
/*ul ul, */
/*ul ol, */
/*ol ol, */
/*ol ul { */
/*margin: 1.5rem 0 1.5rem 3rem; */
/*font-size: 90%; } */
/*li { */
/*margin-bottom: 1rem; } */
/* Code
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
}

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

/* Tables
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
 .tableContainer {
     min-height: 350px;
max-width:99%;
margin:0 auto;
margin-bottom:0px;
 }
 
th {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 0px;
  text-align: center;
  border-bottom: 1px solid #E1E1E1;
  width:50%;
  font-size: 1.5em;
  letter-spacing: .1rem;
  text-transform: uppercase;

}
td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #E1E1E1;
  background-color: rgba(255, 255, 255, 0.24);
  color:#fff;
  font-size: 1em;

}

.circleTable th{
  width:10%!important;
}
.circleTable td{
  width:10%!important;
  font-size: 1.5em;
}

.specialTD{
    padding: 5px 20px!important; 
	border: 0!important;
    background-color: rgba(255, 255, 255, 0)!important;
    font-size: .8em!important;
}

u-full-width td {
 width:50%;
}

.dropzone td {
width: 3em;

}

.dropzone tr {
height:3em!important;
}

table {
  border-collapse: collapse;
}
table td{
  border: 3px solid #E1E1E1;
}



/* Spacing
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button {
  margin-bottom: 1rem;
}

input, textarea, select, fieldset {
  margin-bottom: 1.5rem;
}

pre, blockquote, dl, figure, table, p, ol, form {
  /*     margin-bottom: 2.5rem; */
}

/* Misc
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: .5rem;
  margin-bottom: .5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}

#fHr {
  margin-top: .5rem;
  margin-bottom: .5rem;
  border-top: 3px solid #E1E1E1;
}



/* Bottom Menu
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav-links, #bottom-menu, #footer {
  text-align: center;
}
#footer{
  /* margin-top: 10px; */
}

/* Footer
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Social Icons
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0;
  margin-top: -0.675em;
}

ul.icons li {
  display: inline-block;
}

ul.icons li a {
  text-decoration: none;
  position: relative;
  display: block;
  width: 3.75em;
  height: 3.75em;
  border-radius: 100%;
  /*border: solid 1px #fff;*/
  line-height: 3.75em;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  background-color: #fe6b01;
}

ul.icons li i {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  font-size: 1.85rem;
  line-height: inherit;
  text-align: center;
  text-indent: 0;

}

#FB-logo {
  font-size: 1.85em;
}

ul.icons li a:before {
  color: #c8cccf;
}

ul.icons li a:hover {
  border-color: #fff;
  background: #fff;

}

ul.icons li i:hover {
  color:#c35505 ;
}

/* Login Page Styling
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
/* Home Page Styling
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dropdownBorder {
  width: 60%;
  max-width: 600px;
  background: #CC0000;
  margin: .3em auto .3em auto;
  list-style-type: none;
  border-radius: 5px;
  border: solid 3px #000000;
  text-align: center;

}

.selectMain{
margin:.3em;
width:97%!important;
text-align-last:center; 
font-weight:bold;   
font-size:1em;
}

/* Favorite Page Styling
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fillArea {
  text-align: center;
}

.favName, .favLevel {
  font-size: 1.3em;
}

.favDesc {
  font-size: 1.3em;
  margin-bottom: 5px;
}

.favLink {
  font-size: 1em;
}

.btn {
  min-width: 50px !important;
}

/* Level Page Styling
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1200px) {
  .mapContainer {
    display: inline-block;
    border-style: solid;
    border-width: 3px;
    /* margin-left: -3%; */
    width: 90vw;
    height: 90vw;
  }
}

.mapContainer {
  margin: 0px auto;
  padding: 0;
  overflow: scroll;
}

#mapCan {
  cursor: pointer;
  cursor: hand;
}

.boxLink {
  background-color: #d6d5d5;
  color: #f10b0b;
  padding: 10px 25px;
  border-style: solid;
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.41);
  box-shadow: inset 5px 5px 8px rgba(0, 0, 0, 0.32);
}

/* Map Page
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sharedMap {
  width: 98%;
}

.highlightInfo {
  font-weight: 400;
  color: #CC0000;
}

/* Friends Page Styling
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
#fFind {
  border-radius: 4px;
  margin-bottom: 3%;
  max-width: 540px;
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  margin-top: 2%;
  padding-top: 1.5em;
  -moz-box-shadow: inset 0 0 5px #000000;
  -webkit-box-shadow: inset 0 0 5px #000000;
  box-shadow: inset 0 0 5px #000000;
  padding-left: .5em;
  padding-right: .5em;
}

/* Media Queries
 *–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
 *Note: The best way to structure the use of media queries is to create the queries
 *near the relevant code. For example, if you wanted to change the styles for buttons
 *on small devices, paste the mobile query code up in the buttons section and style it
 *there. */
/* Larger than mobile */
@media (min-width: 250px) {
  .boxLink {
    font-size: .3em;
  }
  .fav {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .fav img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .mobileShow {
    display: inline-block;
  }
  #fFind {
    width: 90%;
  }
  .selectMain{
font-size:.7em;
}

  #carousel2 figure {

    font-size: .5em;

  }
}

@media (min-width: 360px) {

  .boxLink {
    font-size: .5em;
  }
}

@media (min-width: 400px) {
  .boxLink {
    font-size: .6em;
  }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

  .boxLink {
    font-size: .8em;
  }
  .smallSpace {
    padding-bottom: 10px;
  }
    .selectMain{
font-size:1em;
}

}

/* Larger than tablet */
@media (min-width: 750px) {
  hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }
  body {
    background-color: #ffffff;
    background-image: url(../images/overlay.png), -moz-linear-gradient(90deg, #fe6b011a 5%, rgba(0, 0, 0, 0.35)), url(../images/bg1.jpg);
    background-image: url(../images/overlay.png), -webkit-linear-gradient(90deg, #fe6b011a 5%, rgba(0, 0, 0, 0.35)), url(../images/bg1.jpg);
    background-image: url(../images/overlay.png), -ms-linear-gradient(90deg, #fe6b011a 5%, rgba(0, 0, 0, 0.56)), url(../images/bg1.jpg);
    background-image: url(../images/overlay.png), linear-gradient(90deg, #fe6b011a 5%, rgba(0, 0, 0, 0.56)), url(../images/bg1.jpg);
    background-repeat: repeat,	no-repeat,	no-repeat;
    background-size: 100px 100px, cover, cover;
    /*background-position: top left,	center center,	bottom center;*/
    background-attachment: fixed,	fixed, fixed;
  }
  .fav {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .fav img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .mobileShow {
    display: none;
  }
}

/* Larger than desktop */
/* @media (min-width: 1000px) */
/* Larger than Desktop HD */
/* @media (min-width: 1200px) */
/* Sweet Alert Styling */
.swal2-spacer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.swal2-cancel .swal2-styled {
  background-color: white !important;
}

.tableCenter{
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  float: none;
  margin-bottom: 10px;
}

.questionMark{
    font-size: 1.75em;
    color:#fe6b01;
}

.hideButton {
    display: inline-block;
    height: 20px!important;
    padding: 0 0px!important;
    color: #fff!important;
    background-color: rgb(255, 255, 255) !important;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px!important;
    letter-spacing: .1rem;
    min-width: 20px!important;
    margin-right: 0px!important;

 }

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  bottom: -3px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4b4b48;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: -2px;
  bottom: 0px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #fe6b01;
}

input:focus + .slider {
  box-shadow: 0 0 1px #fe6b01;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

.mainBody{
  background-color: rgba(190, 190, 190, 0.18);
  text-align: center;
  border-top: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
  margin-top: 1rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
  margin-bottom: 1rem;
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */


}

/* Modal Content/Box */
.modal-content {
  background-color: rgb(37, 37, 37);
  margin: 1% auto; /* 15% from the top and centered */
  padding: 5px;
  border: 1px solid #888;
  width: 75%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #fe6b01;
  float: right;
  font-size: 3em;
  font-weight: bold;
  margin-top: -.25em;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal img {
  width:95%;
  margin-left: 2.2%;
}

/* Image Styles */

.helm img{
width:6em;
height:auto;
}

.helm p{
margin-bottom:0px!important;
padding-bottom:0px!important;
}
.helm h1, h2, h3, h4, h5{
padding-left:1em;
padding-right:1em;
}

.helm th {
padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    /* text-align: center; */
    border-bottom: 1px solid #E1E1E1;
    font-size: .8em;
    letter-spacing: .1rem;
    width: 33.3333333333%;
}

.afterRules {
font-size:.9em;
}

.vidShowcase {
  width:75%;
  margin: 0 auto;
}

.vidWrapper{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.vidWrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logo-header{
max-width:500px;
height:auto;
}
/* Lazy Load Images */
.lazy-load img {
  opacity: 1;
  transition: opacity 0.3s;
}
.lazy-load img[data-src] {
  opacity: 0;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */

@media (min-width: 250px) {
	body{
		background-color: black;
	}
	
	
  .container{
    margin: 0 auto;
    padding-top: .5em;
    padding-bottom: .5em;
    width: 100%;
  }
  
   .tableContainer {
     min-height: 350px;
     }

  #top-header {
    padding-left: 1em;
    padding-right: 1em;
  }
  td {
  padding: 2px 5px;
  }
}
@media (min-width: 400px) {
  .container{
    margin: 0 auto;
    width: 100%;
  }
  #top-header {
    padding-left: 0em;
    padding-right: 0em;
  }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
td {
  padding: 12px 15px;
}

 .tableContainer {
     min-height: 350px;
     }
}

/* Larger than tablet */
@media (min-width: 750px) {

  .container{
    margin: 5px auto;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


.mapChoose {
  margin:5px;
  border: 5px solid #fe6b01;
  max-width: 300px;
}

.tint {
  position: relative;
  /* float: left; */
  display: inline-flex;
  cursor: pointer;
}

.tint:before {
  background: none;
}

.tint:hover:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #c35505;
  -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
  max-height: 320px!important;
}

figure {
  margin: 0!important;
}

.navWrap {
  display: inline-block;
}


nav a {
  text-decoration: none;
  color: #fff;
  display: block;
}

nav ul {
  list-style: none;
  position: relative;
  text-align: left;
  margin-bottom: 0;
}

nav li {
  float: left;
  background: #ffffff2e;
  /*min-width: 100px;*/
  text-align: center;
}

/* clear'n floats */
nav ul:after {
  clear: both;
}

nav ul:before,
nav ul:after {
  content: " ";
  display: table;
}

nav {
  position: relative;
}

/* prime */
ul.primary li a {
  display: block;
  padding: 10px 20px;
  border-right: 1px solid #3D3D3D;
  text-transform: uppercase;
}

ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {

  color: #000;
}


/* keeps the tab background white */
ul.primary li:hover a {
  background: #fff;
  color: #666;
  text-shadow: none;
  text-decoration:none;
}

ul.primary li:hover > a{
  color: #000;
}
.mobileInstructions{
  display: none;
}


@media only screen and (max-width: 600px) {
  .mobileInstructions{
   display: inline-block;
  }

  .partyTable {
    overflow: auto;
    display: block;
  }

  .serverNav nav ul{
    list-style: none;
    position: relative;
    text-align: center;
    margin-bottom: 0;
  }

  .serverNav nav li{
    float: left;
    background: #ffffff2e;
    min-width: 10px;
    text-align: center;
    width: 33%;
    display: inline-block;
  }

  .partyTable th {
    font-size: 1em !important;
  }

  .navWrap {
    width: 100%;
    margin-top: 0px;
  }

  nav li {
    float: none;
    background: #ffffff2e;
    margin-bottom: 3px;

  }

  ul.primary li:hover a {
    background: none;
    color: #8B8B8B;
    text-shadow: 1px 1px #000;
  }

  ul.primary li:hover ul {
    display: block;
    background: #272727;
    color: #fff;
  }

}
.partyTable {
  width:95%!important;
  margin-left: 2.5%;
  margin-bottom: 2em;
}

.partyTable th{
  width: 25%!important;
  font-size: 1.2em!important;
}

.partyTable a {
  color:#fe6b01;
}

/* Tabbed Categories */

.tabbed {
  width: 700px;
  margin: 0px auto;
  color: #ffffff;
  min-height: 300px;

}

.tabbed > input {
  display: none!important;
}

.tabbed > label {
  display: block;
  float: left;
  padding: 12px 15px;
  margin-right: 5px;
  cursor: pointer;
  transition: background-color .3s;
  background: #9163a052;
}

.tabbed > label:hover,
.tabbed > input:checked + label {
  background: #ac01e7;
}

.tabs {
  clear: both;
  perspective: 600px;
}

.tabs > div {
  /*   width: 700px; */
  position: absolute;
  border: 2px solid #ac01e7;
  background-color: #696969;
  padding: 10px 30px 10px;
  line-height: 1.4em;
  opacity: 0;
  transform: rotateX(-20deg);
  transform-origin: top center;
  transition: opacity .3s, transform 1s;
  z-index: 0;
  text-align:left!important;
}

#tab-nav-0:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-1:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(3),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(4),
#tab-nav-4:checked ~ .tabs > div:nth-of-type(5),
#tab-nav-5:checked ~ .tabs > div:nth-of-type(6),
#tab-nav-6:checked ~ .tabs > div:nth-of-type(7){
  transform: rotateX(0);
  opacity: 1;
  z-index: 1;
}

@media screen and (max-width: 700px) {
  .tabbed { width: 98% }
  .tabbed > label { display: none }
  .tabs > div {
    width: 95%;
    border: none;
    padding: 10px;
    opacity: 1;
    position: relative;
    transform: none;
    margin-bottom: 10px;
  }
  /*
    .tabs > div p:first-of-type  {
      border-bottom: 2px solid #ac01e7;
    }
   */

}



/*Adwords Styling*/
.leftSky {
	float: left;
	position: fixed;
	top: 18%;
	left: 0;
	max-width:300px;
	max-height:600px;
	width:300px;
  }

/*Adwords Styling*/
.rightSky {
  float: right;
  position: fixed;
  top: 18%;
  right: 0;
  max-width:300px;
  max-height:600px;
  width:300px;
}
.bottomSky {
  min-height: 40px;
}
.notice{
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  height: 90px;

}

.notice img {
  max-width: 750px;
    opacity: 1;
    transition: opacity 0.3s;
}

.notice img[data-src] {
    opacity: 0;
}

/* @media (max-width: 1599px) {	
  .leftSky { max-width: 150px!important; width: 150px!important; }
}

@media (max-width: 1279px) {
  .leftSky { display:none!important; }
  .leftSky2 { display:none!important; }
}
 */
 
 /* @media (max-width: 750px) {
.leftSky { display: none!important; }
.leftSky2 { display:none!important;}
 } */

@media (max-width: 750px) {
  .topSky {
    width:100%;
    height:auto;
  }
  .notice{
    display: none;
  }
  
  .bottomSky {
    min-height: 40px;
  }

  .featVid{
    display: none!important;
  }
}

.mystery {
  overflow: hidden;
  margin: -140px auto;
  height: 330px;
  z-index: 0;
}

div.mInner {
  position:relative;
  float: right;
  right: 50%;
}
div.mInner img {
  position: relative;
  right:-50%;
}

#symbol_no1 {
 padding-top: 100px;
}



@media (max-width: 400px) {

  .mystery img {
    max-width: 450px;
  }


}


*{margin:0;padding: 0;}
.row{ position: relative;}
.row:after{ content: "";clear: both;display: block;}

#list{ position: relative; margin-top: -250px;}
#list li{ width: 250px; height:250px; list-style: none;}
#list img{ border:1px solid;}

.active{ background-color: yellow;}

li[data-roll="2"]{}

#slot_box1{
  position:relative;
  width: 250px;height: 250px;
  border:2px rgb(255, 248, 172) solid;
  overflow:hidden;
  display: inline-block;
  -webkit-filter: drop-shadow(0px 0px 24px rgb(255, 248, 172));
  z-index: 99999;
}

#list li{
  background: url("../images/guns/question.png");
background-size: 250px 250px;
}
#list li[data-roll="1"]{ background: url("../images/guns/abr.jpg");}
#list li[data-roll="2"]{ background: url("../images/guns/auger.jpg");}
#list li[data-roll="3"]{ background: url("../images/guns/cordite.jpg");}
#list li[data-roll="4"]{ background: url("../images/guns/essex.jpg");}
#list li[data-roll="5"]{ background: url("../images/guns/galil.jpg");}
#list li[data-roll="6"]{ background: url("../images/guns/gks.jpg");}
#list li[data-roll="7"]{ background: url("../images/guns/hellion-salvo.jpg");}
#list li[data-roll="8"]{ background: url("../images/guns/icr-7.jpg");}
#list li[data-roll="9"]{ background: url("../images/guns/kn-57.jpg");}
#list li[data-roll="10"]{ background: url("../images/guns/koshka.jpg");}
#list li[data-roll="11"]{ background: url("../images/guns/maddox_rfb.jpg");}
#list li[data-roll="12"]{ background: url("../images/guns/mog-12.jpg");}
#list li[data-roll="13"]{ background: url("../images/guns/mozu.jpg");}
#list li[data-roll="14"]{ background: url("../images/guns/mp40.jpg");}
#list li[data-roll="15"]{ background: url("../images/guns/mx9.jpg");}
#list li[data-roll="16"]{ background: url("../images/guns/paladin-hb50.jpg");}
#list li[data-roll="17"]{ background: url("../images/guns/rampart-17.jpg");}
#list li[data-roll="18"]{ background: url("../images/guns/ray-gun.jpg");}
#list li[data-roll="19"]{ background: url("../images/guns/saug.jpg");}
#list li[data-roll="20"]{ background: url("../images/guns/sg12.jpg");}
#list li[data-roll="21"]{ background: url("../images/guns/strife.jpg");}
#list li[data-roll="22"]{ background: url("../images/guns/swordfish.jpg");}
#list li[data-roll="23"]{ background: url("../images/guns/titan.jpg");}
#list li[data-roll="24"]{ background: url("../images/guns/vapr.jpg");}
#list li[data-roll="25"]{ background: url("../images/guns/zweihander.jpg");}
#list li[data-roll="26"]{ background: url("../images/guns/warmachine.jpg");}
#list li[data-roll="27"]{ background: url("../images/guns/spitfire.jpg");}

/*Roulette Wheel*/

.rcontainer {
  align-items: center;
  background-color: #202027;
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.rtable {
  animation: draw 11s linear infinite;
  stroke: #ca9d76;
}

.ball {
  animation: levitate .5s alternate ease-in-out infinite;
  fill: #fff;
}


.gold {
  fill: #f3aa14;
}


.roulette {
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  max-width: 100px;

svg {
  fill: #B2AB46;
  font-size: 32px;
  height: 100px;
  width: 100px;
}
}

@keyframes draw {
  from {
    stroke-dashoffset: 0;
  }
}


@keyframes levitate {

  0% {
    transform: translate(0, 0);
  }



  100% {
    transform: translate(0, 2px);
  }
}