@charset "utf-8";
	/* CSS Document */

	@font-face {
		font-family: "FFMarselis";
		src: url("../fonts/FFMarselisforRuV.ttf");
	}
	@font-face {
		font-family: "FFMarselis";
		src: url("../fonts/FFMarselisforRuV-It.ttf");
		font-style: italic;
	}
	@font-face {
		font-family: "FFMarselis";
		src: url("../fonts/FFMarselisforRuV-Bd.ttf");
		font-weight: 600;
	}
	@font-face {
		font-family: "FFMarselis";
		src: url("../fonts/FFMarselisforRuV-BdIt.ttf");
		font-weight: 600;
		font-style: italic;
	}
	@font-face {
		font-family: "FFMarselis";
		src: url("../fonts/FFMarselisforRuV-Blk.ttf");
		font-weight: 700;
	}
	@font-face {
		font-family: "FFMarselis";
		src: url("../fonts/FFMarselisforRuV-BlkIt.ttf");
		font-weight: 700;
		font-style: italic;
	}

	/* VARS */
	:root {
		/* Colors */
		--bg-1: #001957;
		--bg-2: #f9f9fa;
		--txt-1: #001957;
		--txt-2: #F9F9FA;
		--border-1: #001957;
		--sp-1: #00FF66;
	}
	*:focus, *:active { outline: 0 !important; box-shadow: none !important; }

	body { font-family: "FFMarselis"; background-color: var(--bg-2); font-size: 20px; color: var(--txt-1); }
	@media (max-width: 1200px) {
		body { font-size: 18px; }
	}
	@media (max-width: 575px) {
		body { font-size: 16px; }
	}


	/* LINKS */
	a, .page-link { color: #0069d9; }
	a:hover, .page-link:hover { color: var(--txt-1); }
	p { line-height: 30px; }
	@media (max-width: 999px) {
		p { line-height: 27px; }
	}
	@media (max-width: 575px) {
		p { line-height: 24px; }
	}


	/* NAVBAR */
	.navbar { z-index: 2; height: 70px; }
	.navbar-nav { margin-left: auto !important; margin-right: 0 !important; }
	.navbar-nav .nav-link { text-transform: uppercase; }
	.navbar-collapse {  }
	.navbar-brand { padding: 0; }
	.navbar-brand img { max-height: 40px; }
	.navbar-dark .navbar-nav .show > .nav-link,
	.navbar-dark .navbar-nav .current > .nav-link,
	.navbar-dark .navbar-nav .nav-link.show,
	.navbar-dark .navbar-nav .nav-link.current,
	.navbar-dark .navbar-nav .nav-link:hover { color: var(--sp-1); }
	.navbar-dark .navbar-nav .nav-link,
	.navbar-dark .navbar-nav .nav-link:focus,
	.navbar-light .navbar-nav .nav-link:focus { color: #fff; }
	.navbar-light .navbar-nav .show > .nav-link,
	.navbar-light .navbar-nav .current > .nav-link,
	.navbar-light .navbar-nav .nav-link.show,
	.navbar-light .navbar-nav .nav-link.current,
	.navbar-light .navbar-nav .nav-link:hover { color: var(--sp-1); }
	.navbar-dark .navbar-toggler { color: #fff; border-color: #fff; }
	.nav-tabs { margin-bottom: .5rem; }
	.bg-dark { background: none !important; }
	.bg-light { background-color: var(--bg-1) !important; }
	.hide { display: none; }

	@media  (max-width: 1024px) and (min-width: 991px){
		.navbar { font-size: 16px; }
	}
	@media(max-width: 991px) {
		.navbar-collapse { position: absolute; left: 0; right: 0; top: 70px; background-color: var(--bg-1); }
		.navbar-collapse .nav-link { padding: 0.5rem 2rem; }
	}
	@media(max-width: 575px) {
		.navbar { font-size: 16px; }
	}

	/* NAV PILLS */
	.nav-pills .nav-link { color: var(--txt-1); }
	.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--sp-1); background-color: var(--bg-1); }

	/* MODAL */
	.modal-dialog { overflow-y: initial !important; }
	.modal-body { max-height: 80vh; overflow-y: auto; }
	#hextech-info-modal { z-index: 9999; }

	.input-group-prepend span.input-group-text { border-color: rgba(0, 0, 0, 0.125); border-right: none; background-color: var(--bg-2); }
	.input-group-append .input-group-text { border: none; background-color: var(--sp-1); text-transform: uppercase; font-weight: 600; color: var(--txt-1); }
	#friend-invite-modal .form-control { height: auto; border-left: none; border-right: none; }
	#friend-invite-modal .form-control:focus { background-color: var(--bg-2); }
	.input-group-radio { background-color: var(--bg-1); }
	.input-charity-name, .input-charity-name[readonly] .input-group-charity, .input-group-votes { background-color: #e9ecef !important; }
	.input-group-charity { border: none; }
	.input-charity-name, .input-charity-name[readonly] { border: none; padding-left: 0; }
	input#birthday { background-color: var(--bg-2); }

	/* re-Captcha */
	.g-recaptcha > div:first-child { max-width: 100% !important; }
	.g-recaptcha > * { margin: auto; }
	@media (max-width: 500px) {
		.g-recaptcha > div > div {
			transform: scale(0.85);
			transform-origin: 0 0;
		}
	}
	@media (max-width: 300px) {
		.g-recaptcha > div > div {
			transform: scale(0.75);
			transform-origin: 0 0;
		}
	}

	/* HONEY POT */
	#phone_number { visibility: hidden; position: absolute; top: -999px; left: -999px; }

	/* BASICS */
	.form-control { margin-bottom: 1rem; }
	.form-control, .page-link { border: 1px solid rgba(0, 0, 0, 0.125); background-color: var(--bg-2); }
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
		padding-right: 2rem;
		padding-left: 2rem;
	}
	.col-md-6 img { max-width: 100%; }
	.no-paddings { padding: 0; }
	h1 { color: var(--txt-1); text-transform: uppercase; font-weight: 400; word-break: break-word; }
	.card-title { color: var(--txt-1); }
	.fix { padding-left: 1.25rem; }
	.card, .list-group-item { background-color: var(--bg-2); }
	.badge { padding: 0.4rem; min-width: 30px; min-height: 30px; }
	.badge-primary { background-color: var(--bg-2); color: var(--txt-1); border: 1px solid var(--sp-1); font-weight: 600; }
	.badge-secondary { border: 0; color: var(--sp-1); background: transparent; font-size: 2rem; line-height: initial; }
	.display-4 { font-weight: 600; font-size: 70px; }
	.text-locked { color: #AFAFAF !important; }
	@media (max-width: 999px) {
		.text-locked img { width: 15px; height: auto; }
	}
	@media (max-width: 575px) {
		.text-locked img { width: 10px; height: auto; }
	}
	.charity-icon { width: 30px; height: auto; cursor: pointer; }
	.charity-icon-sm { width: 20px; height: auto; }
	.img-medal { height: 30px; width: auto; }
	@media (max-width: 575px) {
		.img-medal { height: 20px; }
		.charity-icon { width: 20px; }
	}

	.accordion { border: 0; }
	.accordion .card { border: 0; text-align: left !important; }
	.accordion .card-header { background: var(--bg-2); border: 0; padding: 0.3rem 0.15rem; }
	.accordion .card-body { padding-right: 2.5rem; padding-left: 2.5rem; }
	.accordion .btn-block { line-height: 20px; position: relative; }
	.accordion .btn-block span { height: 100%; }

	.btn { padding: .5rem 1rem; font-weight: 600; font-size: inherit; }
	.btn-block { color: var(--txt-1); font-size: 1.5rem; padding-top: 0; padding-bottom: 0; }
	.btn-primary { background-color: var(--sp-1); border-color: var(--sp-1); color: var(--txt-1); text-transform: uppercase;  }
	.btn-primary:hover { background-color: var(--bg-1); border-color: var(--bg-1); color: var(--txt-2); }
	.btn-secondary { background-color: var(--bg-1); color: var(--sp-1); border-color: var(--bg-1); }
	.btn-secondary:hover { background-color: var(--sp-1); color: var(--txt-1); border-color: var(--sp-1); }

	.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; text-transform: uppercase; font-weight: 600; }

	.btn-primary:not(:disabled):not(.disabled):current:focus,
	.btn-primary:not(:disabled):not(.disabled).current:focus,
	.show > .btn-primary.dropdown-toggle:focus { background-color: var(--sp-1); border-color: var(--sp-1); color: var(--txt-1); }
	.list-group-item { color: var(--txt-1); text-transform: uppercase; }
	.score { color: #495057; text-transform: none; }

	#notifications_button { position: fixed; bottom: 100px; right: 0; border-bottom-right-radius: 0; border-top-right-radius: 0; }

	@media (max-width: 999px) {
		.col-md-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
		.col-md-6 img, .display-4, .container, iframe { margin-bottom: 1rem; }
		.bg-dark { background: var(--bg-1) !important; }
		.display-4 { font-size: 50px; }
		.btn-block { font-size: 1rem; }
		.badge { min-width: 20px; min-height: 20px; }
		.badge-secondary { font-size: 1.5rem; }
	}
	@media (max-width: 575px) {
		h3 { font-size: 1.5rem; }
		.badge { padding: 0.3rem; line-height: 10px; }
		.card { margin-bottom: 0; }
		.list-group-item .badge { float: none; }
		.display-4 { font-size: 25px; }
	}
	@media (min-width: 576px) {
		#terms-modal .modal-dialog { max-width: 75%; }
		#terms-modal .modal-title { padding-left: 2rem; }
	}

	/* RADIOS */
	.checkmark { position: absolute; top: 2px; left: -2px; height: 18px; width: 18px; background-color: transparent; border-radius: 50%; border: 2px solid #ccc; cursor: pointer; }
	.checkmark-label { position: relative; margin: 0; }
	.checkmark-label > input { visibility: hidden; }
	.checkmark-label:after { content: ""; position: absolute; display: none; }
	.checkmark-label input:checked ~ .checkmark:after { position: absolute; display: block; content: ""; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--sp-1); }

	/* LAYOUT */
	.row { margin: 0; }
	.jumbotron { margin-bottom: 0; padding: 100px 2rem 6rem; background-color: var(--bg-2); }
	.jumbotron > .row { width: 85%; margin: 0 auto; padding: 2rem 0; }
	.jumbotron #leaderboard_table_wrapper .row { padding: 0; }
	.jumbotron #leaderboard_table_wrapper .row:last-child { padding-top: 2rem; }
	@media (max-width: 1439px) {
		.jumbotron > .row { width: 100%; }
	}
	@media (max-width: 575px) {
		.jumbotron { padding: 4rem 1.1rem !important; }
		.jumbotron > .row, .col-md-6, .col-sm-12 { padding: 0; }
	}

	#first { position: relative; z-index: 0; overflow: hidden; padding: 0; height: 700px; background: url("../images/bg.jpg?1") center center no-repeat; background-size: cover; }
	#first img { margin: 150px 0; width: 800px; }
	/*#first a { position: absolute; bottom: 8vh; left: 50%; width: 48px; height: 48px; margin-left: -24px; border-left: 4px solid var(--bg-2); border-bottom: 4px solid var(--bg-2); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; }*/
	#first h1 { font-size: 5rem; }
	#hero-btn { background: var(--sp-1); position: absolute; width: 210px; bottom: 150px; left: 0; right: 0; margin: auto; }
	#hero-btn:hover { background-color: var(--sp-1); border-color: var(--sp-1); color: var(--txt-1); }
	#next3 { background: url("../images/bg2.jpg?1") top right no-repeat; background-size: cover; }

	#last { background: url("../images/bg.jpg?1") top right no-repeat; background-size: cover; color: #fff; }
	#last .row { padding-bottom: 1rem; }
	#last h1, #first h1 { color: #fff; }
	#last h6 { margin-top: 1rem; }
	#last h3 { margin: 2rem 2rem 0; }
	#last .col-md-6, .twitter .col-md-6, #club #first .col-md-6, #confirmed #first .col-md-6, #form .col-md-6, #next3 .col-md-6 { margin: 0 auto; }
	#last .col-md-6 { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; }
	#last p:last-child { margin-bottom: 0; }
	@media (max-width: 999px) {
		#last .col-md-6 img { margin-bottom: 0; }
		#first { padding: 0 !important; height: 470px; }
		#first img { width: 500px; margin: 120px 0 7vh; }
		#hero-btn { bottom: 12vh; width: 210px; }
		#about #first { padding: 0 !important; }
		#about #first h1 { margin: 0; }
	}
	@media (max-width: 575px) {
		#first { height: 470px; }
		#first img { width: 300px; margin: 170px 0 7vh; }
		#hero-btn { bottom: 80px; width: 180px; }
	}

	#house #first h1, #about #first h1 { line-height: 70vh; }
	#about #first h1 { background: rgba(0, 41, 77, 0.6); }
	#club #first h1, #confirmed #first h1 { margin: 12vh 0 5vh 0; }
	#club h3, #confirmed h3 { width: 100%; margin-bottom: 3rem; }
	#confirmed .row ul { text-align: left; list-style: none; padding: 0; margin: 0; }
	#confirmed .row ul li:before { border-right: 2px solid var(--sp-1); border-bottom: 2px solid var(--sp-1); width: 10px; height: 10px; transform: rotate(-45deg); content: ""; display: inline-block; margin-right: 10px; }
	#confirmed .jumbotron .row { padding-top: 0; }
	@media(max-width: 1439px) {
		#last .col-md-6, #next3 .col-md-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
		#club #first h1, #confirmed #first h1 { margin: 10vh 0 5vh 0; }
		#club #first .col-md-6 img, #confirmed #first .col-md-6 img { max-width: 80%; }
		#club #first .row, #confirmed #first .row { padding: 0; }
		#next { padding-top: 6rem; }
	}
	@media (min-width: 600px) and (max-width: 991.98px) {
		#confirmed #first h1 { margin: 8vh 0 4vh 0; }
	}
	@media (max-width: 575px) {
		#club h3, #confirmed h3 { margin-bottom: 1rem; }
	}

	.explanation-image { width: 100%; margin-bottom: 10px; }


	#form .row { padding-bottom: 0; }

	/* TABLES */
	.table { color: var(--txt-1); }
	table { border: 0; border-collapse: collapse !important; width: 100%; }
	table tbody { border-top: 2px solid var(--border-1); }
	table thead tr { border: 0; background-color: transparent; }
	table td,
	table th { text-align: left; font-weight: 400; border: 0 !important; color: var(--txt-1); }
	table th { color: var(--txt-2); }
	table thead tr { background: var(--bg-1); }
	.table td, table td { text-align: left; border: 0; padding: .4rem .8rem; font-weight: 600; color: var(--txt-1); white-space: nowrap; }
	table td:last-child { text-align: right; }
	.table th, table th { padding: 0; padding-left: .8rem; font-size: .8rem }
	table tr { border: 1px solid rgba(0, 0, 0, 0.125); background-color: var(--bg-2); }
	table th:last-child { text-align: right; padding-right: .8rem; }
	@media (max-width: 575px) {
		.table td, table td { font-size: 12px; }
		.img-rank { width: 15px; height: auto; }
		.img-rank-user { width: 20px; height: auto; }
		table .goal-icon { width: 20px; height: auto; }
	}
	@media (max-width: 575.98px) {
		.table-responsive-sm { display: initial; width: initial; overflow-x: initial; -webkit-overflow-scrolling: initial; }
	}
	@media (max-width: 420px) {
		.table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
		.table-responsive-sm > .table-bordered { border: 0; }
	}
	.table-footnote { font-size: 14px; }
	.dataTables_info { text-align: left; }
	.goals_data_table { width: 100% !important; }

	/* GOALS TABLE */
	#goals_table tbody tr { background: #F1F1EF; }
	#goals_table .current-goal { background: var(--sp-1); }

	/* LEADERBOARD TABLE*/
	#leaderboard_table_info { text-align: left; padding: 0; line-height: 42px; }
	.goals_data_table { border: 0; border-collapse: collapse !important; }
	.goals_data_table tr td:nth-child(3) { text-transform: uppercase; }
	.goals_data_table tr.active_user_row { background-color: var(--sp-1); }
	.goals_data_table tr td:first-child,
	.goals_data_table tr td:nth-child(2) { width: 5% !important; }
	.dataTables_wrapper .col-sm-12 { padding: 0; }
	.page-item.active .page-link { background-color: var(--bg-1); border-color: var(--border-1); }
	.paginate_button { text-transform: uppercase; }

	/* HEALING POINTS TABLE */
	#healing-points-table { width: 100% !important; margin: 0 !important; }
	#healing-points-table thead { min-width: 100% !important; margin: 0 !important; }
	#healing-points-table tbody { min-width: 100% !important; margin: 0 !important; }
	#healing-points-table tbody td { font-size: 14px; }

	/* PROGRESS BAR */
	.progress { background-color: #F1F1EF; height: 40px; font-size: 20px; font-weight: 600; overflow: visible; position: relative; }
	.progress-bar { background-color: var(--sp-1); color: var(--txt-1); border-right: 1px solid var(--border-1); z-index: 1; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
	#user_xp_progress_bar { border: 1px solid rgba(0, 0, 0, 0.125); }
	.steps { position: relative; width: 100%; margin-bottom: 10px; height: 40px; }
	.steps > div { position: absolute; display: inline-block; border-radius: 4px; background: var(--bg-2); width: 130px; height: 100%; color: var(--txt-1); text-transform: uppercase; line-height: 40px; }
	.steps .step-start { left: -65px; }
	.steps .step-end { right: -65px; }
	@media (max-width: 1439px) {
		.steps .step-start { left: 0; }
		.steps .step-end { right: 0; }
	}
	@media (max-width: 999px) {
		.progress { font-size: 18px; }
	}
	@media (max-width: 575px) {
		.progress { height: 30px; font-size: 16px; }
		#user_xp_progress_bar { font-size: 12px; }
		.steps { height: 25px; }
		.steps > div { line-height: 25px; width: 110px; }
	}

	#InputEmail { margin-bottom: 0; }

	/* FAQ RANKS */
	ul.faq-ranks { text-decoration: none; list-style-type: none; padding-left: 5px; }
	ul.faq-ranks li { padding: 5px; }
	ul.faq-ranks li span { font-weight: 600; }
	@media (max-width: 575px) {
		ul.faq-ranks li { padding-left: 3px; }
	}

	/* FOOTER */
	footer { text-align: left; padding: .5rem 2rem; line-height: 24px; background-color: var(--bg-1); color: #fff; }
	#icons { float: right; width: 15%; text-align: right; }
	footer a { margin-left: .5rem; color: #fff; }
	footer a:hover { color: var(--sp-1); text-decoration: none; }
	@media (max-width: 730px) {
		footer, .card, .form-control, .list-group { text-align: center; }
		#icons { float: none; width: 100%; text-align: center; }
	}


	/* COOKIE BANNER */
	#cookies { position: fixed; bottom: 0; width: 100%; background-color: var(--bg-2); padding: .5rem 1rem; line-height: 38px; }
	#cookies p { margin: 0; }
	#cookies a.btn { float: right; }
	@media (max-width: 999px) {
		#cookies { text-align: center; line-height: inherit; }
		#cookies a.btn { float: none; display: block; margin: 0.5rem auto; max-width: 50%; }
	}

	#copy_code { line-height: 20px; }

	/* NOTIFICATIONS */
	#notifications-modal .list-group, #notifications-modal .list-group-item { font-size: inherit; font-weight: inherit; text-transform: inherit; }