/********************************************* 
  GLOBAL
*********************************************/
body { font-family: 'Open Sans'; background: #151515 url('/assets/img/background.jpg') center center; background-size: cover; color: #FFF; }
.darker { background: #000B; position: fixed; width: 100%; height: 100vh; z-index: 1; top: 0; }
.w1000 { position: relative; width: 1000px; margin: 0 auto; z-index: 2; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/********************************************* 
  HEADER
*********************************************/
.header { background-color: #000; border-bottom: 1px solid #FFF5; }
.header a { display: inline-block; color: #FFF; padding: 20px 10px; text-decoration: none; font-weight: 700; vertical-align: middle; }
.header a:hover { color: orange; transition: all 0.2s ease-out; }
.header i { font-size: 1.5em; vertical-align: middle; margin-right: 10px; color: orange }
.header span { vertical-align: middle; }
.header .float_right {  float: right; }

/********************************************* 
  CONTENT
*********************************************/
.content { padding: 30px 0 50px; }
.content .hf_container { position: relative; background-color: #0009; border: 1px solid #FFF5; transition: all 0.2s ease-out; margin-bottom: 10px; }
.content .hf_container a { font-size: 16px; }
.content .hf_container.active { background-color: #0409; }
.content .hf_container .achievement { display: inline-block; color: orange; text-decoration: none; margin: 12px 0 12px 13px; }
.content .hf_container .count_box { float: right; padding: 12px 11px; cursor: pointer; border-left: 1px solid #FFF5; transition: all 0.1s ease-out; }
.content .hf_container .tick_box { float: right; padding: 12px 11px; cursor: pointer; border-left: 1px solid #FFF5; transition: all 0.1s ease-out; }
.content .hf_container .tick_box:hover { background-color: #FFF; color: #000; }

/*********************************************
 HELP POPUP
*********************************************/
.help_popup { position: relative; background: #222; padding: 15px; width: auto; max-width: 600px; margin: 0 auto; 
  -webkit-box-shadow: 0 0 50px 10px rgba(0,0,0,.5);
  box-shadow: 0 0 50px 10px rgba(0,0,0,.5);
}

/*********************************************
 FORMS
*********************************************/
input[type="text"], select, textarea { background:rgba(0, 0, 0, 0.3); font: 14px Tahoma, sans-serif; border: 1px solid rgba(255, 255, 255, 0.3); padding: 10px; width: 100%; box-sizing: border-box; color: #DDD; -webkit-appearance: none; border-radius: 0; transition: all 0.3s ease-out; }
input:focus, textarea:focus { border: 1px solid #FFF; }

/*********************************************
 BUTTONS
*********************************************/
input[type="submit"], .button { font-family: "Open Sans"; font-weight:600; font-size: 16px;  width: 100%; text-transform: uppercase; color: #FFF; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.3); text-decoration: none; line-height: 26px; display: inline-block; outline: none; cursor: pointer; text-align: center; padding: 10px 20px; box-sizing:border-box; -webkit-appearance: none; border-radius: 0; transition: all 0.3s ease-out; }
input[type="submit"]:hover, .button:hover { color: #FFF; background: orange; border-color: rgba(255,255,255,1); }

/*********************************************
 INFOBOX
*********************************************/
.infobox { z-index: 1500; border: 2px solid; padding: 20px; border-radius: 5px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.25); font-size: 16px; margin-bottom: 15px; line-height: 25px; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); }
.infobox::before { font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 30px; display: inline-block; text-decoration: inherit; margin-right: 15px; vertical-align: top; }
.infobox.success::before { content: '\f058'; color: #8fad3d; }
.infobox.warning::before { content: '\f071'; color: #e6a700; }
.infobox.error::before { content: '\f057'; color: #ad3f2e; }
.infobox.info::before { content: '\f05a'; color: #4381cc; }
.infobox.success { border-color: #8fad3d; color: #586c25; background-color: #eff4d4; }
.infobox.warning { border-color: #e6a700; color: #796101; background-color: #ffea97; }
.infobox.error { border-color: #ad3f2e; color: #923725; background-color: #efcec9; }
.infobox.info { border-color: #4381cc; color: #5d57b9; background-color: #c6d8f0; }

/********************************************* 
  CLASS
*********************************************/
.mb5 { margin-bottom: 5px; }
.mt50 { margin-top: 50px; }
.orange { color: orange; }