/* ----- Custom styles ----- */
html, body {
	background-color: #000;
}
body {
	color: #2d2d2d;
	font: normal 15px/1.45em 'proxima-nova', Arial, sans-serif;
}
p {
	margin-bottom: 20px;
}
a {
	color: #2b368d;
}
a, button {
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
a:focus {
	outline: none !important;
}
a:hover {
	color: #2b368d;
	text-decoration: underline;
}
strong {
	font-weight: 600;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0 0 5px;
	font-weight: 600;
	line-height: 1.25em;
}
h1, .h1 {
	font-size: 40px;
}
h2, .h2 {
	font-size: 34px;
}
h3, .h3 {
	font-size: 28px;
}
h4, .h4 {
	font-size: 24px;
}
h5, .h5 {
	font-size: 20px;
}
h6, .h6 {
	font-size: 16px;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
#content a:hover img {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

/* ----- Important Classes / Bootstrap Overrides ----- */
.show-tablet, .show-mobile, .show-phone {
	display: none;
}
.btn {
	display: inline-block;
	padding: 15px 60px;
	background-color: #0064fa;
	border: none;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	line-height: 1em;
	text-decoration: none;
	text-transform: uppercase;
}
	.btn:hover {
		background-color: #5f9cf7;
		color: #fff;
		text-decoration: none;
	}
.clear {
	clear: both;
}
.container {
	max-width: 1440px;
}
.font-blue {
	color: #0064fa;
}
.upper {
	text-transform: uppercase !important;
}
.wrapper {
	padding: 30px 0;
}

/* ----- Header ----- */
.navbar {
	padding: 18px 0;
	margin: -1px 0 !important;
	background-color: #fff;
	border: none !important;
	border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
}
.logo {
	display: block;
	width: 300px;
}
#navbar {
	padding-right: 15px;
	margin: 4px 0 !important;
}
.mobile-banner {
	width: 100%;
}

/* ----- Membership ----- */
#membership {
	padding: 60px;
	background: url(https://images.naughtycdn.com/public/tnts/images/TNTS-banner-prejoin.jpg) top center no-repeat;
	background-size: cover;
}
	#membership .upper {
		margin: 0 20px 15px;
		font-size: 125%;
	}
.membership-boxes-col {
	min-width: 600px;
}
#membership-boxes {
	margin-bottom: 45px;
}
.membership-box {
	min-height: 85px;
	padding: 20px;
	margin: 0 0 15px;
	background-color: #2b368d;
	box-sizing: border-box;
	color: #fff;
}
	.membership-box:hover {
		background-color: #3d4cc7;
		color: #fff;
		text-decoration: none;
	}
.membership-box.light {
	background-color: #0064fa;
}
	.membership-box.light:hover {
		background-color: #5f9cf7;
	}
.membership-box.has-modal {
	padding-bottom: 45px;
}
	.membership-box .row {
		width: 100%;
		max-width: 100%;
	}
	.membership-box img {
		display: block;
		width: auto;
		max-width: none;
		height: 65px;
		margin: -10px;
	}
.membership-name {
	font-size: 28px;
	font-weight: 600;
	line-height: 1em;
	text-transform: uppercase;
}
	.membership-name .description {
		display: block;
		margin-top: 5px;
		font-size: 12px;
		font-weight: normal;
		line-height: 1em;
		text-transform: none;
	}
.toggle-modal {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: #fff;
	font-size: 12px;
	line-height: 1em;
}
.underlined {
	cursor: pointer;
	text-decoration: underline;
}
	.underlined:hover {
		text-decoration: none;
	}
.membership-price {
	font-size: 40px;
	font-weight: 600;
	line-height: 1em;
}
	.membership-price .sup {
		margin: 6px 0 0 5px;
		font-size: 12px;
		font-weight: normal;
		line-height: 12px;
	}
#payments {
	padding: 30px;
	background-color: #2b368d;
	color: #fff;
}
	#payments .row {
		margin-top: 30px;
	}
	#payments .row:first-child {
		margin-top: 0;
	}
	#payments .col-8 {
		padding-left: 75px;
	}
	#payments p {
		margin-bottom: 0;
		font-size: 110%;
	}
	#payments .icon {
		display: inline-block;
		width: 50px;
		margin-right: 5px;
		text-align: center;
	}
	#payments a {
		color: #fff;
		text-decoration: underline;
	}
	#payments a:hover {
		color: #007bff;
		text-decoration: none;
	}
	#payments img {
		display: inline-block;
		width: auto;
		max-width: none;
		height: 35px;
		margin-right: 15px;
	}
	#payments .blue {
		display: none;
		height: 25px;
	}

/* ----- Footer ----- */
footer {
	padding: 45px 45px 15px;
	color: #fff;
}
	footer a {
		color: #fff;
		text-decoration: none;
	}
	footer a:hover, footer a:active, footer a:focus {
		color: #5d5d5d;
		text-decoration: underline;
	}
.secure-row {
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}
.lock-icon {
	display: inline-block;
	max-width: 40px;
	margin: 8px 8px 0 0;
}
	.secure-row .h6 {
		margin-bottom: 3px;
		font-size: 18px;
	}
	.secure-row a {
		text-decoration: underline;
	}
	.secure-row a:hover {
		text-decoration: none;
	}
.copyright {
	margin-top: 30px;
	text-align: center;
}

/* Modal */
.modal-header {
	border-bottom: none !important;
	border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
}
.modal-content {
	border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
}
.modal-body {
	padding-top: 0;
	font-size: 120%;
	text-align: center;
	justify-content: center;
}
	.modal-body p {
		line-height: 1.4em;
	}
	.modal-body .small-font {
		font-size: 11px;
	}

/* ----- Responsive ----- */
@media (max-width: 1200px) {
	.container {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	#membership {
		padding: 45px;
		background-position-x: 60%;
	}
	#membership .upper {
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}
}
@media (max-width: 1024px) {
	.hide-tablet {
		display: none;
	}
	.show-tablet {
		display: block;
	}
}
@media (max-width: 992px) {
	.membership-boxes-col {
		min-width: 500px;
	}
}
@media (max-width: 767px) {
	body {
		font-size: 14px;
	}
	h1, .h1 {
		font-size: 34px;
	}
	h2, .h2, .membership-price {
		font-size: 28px;
	}
	h3, .h3, .membership-name {
		font-size: 24px;
	}
	h4, .h4 {
		font-size: 20px;
	}
	h5, .h5 {
		font-size: 16px;
	}
	h6, .h6 {
		font-size: 14px;
	}
	.hide-mobile {
		display: none;
	}
	.show-mobile {
		display: block;
	}
	.navbar {
		padding: 10px 0;
	}
	.logo {
		width: 250px;
		max-width: 250px;
	}
	#membership {
		padding: 30px 30px 15px;
		background-image: none;
		background-color: #000;
	}
	.membership-boxes-col {
		min-width: 1px;
	}
	.membership-box {
		min-height: 72px;
		padding: 15px;
	}
	#membership .upper {
		color: #fff;
		text-align: left;
	}
	.membership-box .sup {
		margin: 2px 0 0 5px;
	}
	#payments {
		padding: 15px;
		background-color: #fff;
		color: #2b368d;
	}
	#payments p {
		font-size: 13px;
		line-height: 1.1em;
	}
	#payments a {
		color: #2b368d;
	}
	#payments img {
		display: none;
	}
	#payments .blue {
		display: inline-block;
	}
	.secure-row {
		max-width: 100%;
	}
	footer {
		padding: 15px 30px;
		font-size: 12px;
	}
}
@media screen and (max-width: 576px) {
	#membership {
		padding: 30px 15px;
	}
	.secure-row .float-left, .secure-row .float-right {
		float: none !important;
	}
	.secure-row img {
		margin-bottom: 15px;
	}
	.secure-row p br {
		display: none;
	}
	.copyright .pipe {
		display: block;
		height: 0px;
		font-size: 0;
	}
}
@media screen and (max-width: 360px) {
	body {
		font-size: 13px;
		overflow-x: hidden;
	}
	h1, .h1 {
		font-size: 30px;
	}
	h2, .h2, .membership-price {
		font-size: 24px;
	}
	h3, .h3, .membership-name {
		font-size: 20px;
	}
	h4, .h4 {
		font-size: 18px;
	}
	h5, .h5 {
		font-size: 16px;
	}
	h6, .h6 {
		font-size: 13px;
	}
	#membership {
		padding: 20px 10px;
	}
	.membership-box {
		padding: 10px;
	}
	.membership-name .description, .toggle-modal {
		font-size: 11px;
	}
	.toggle-modal {
		left: 10px;
	}
	#payments .col-6 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin-top: 15px;
	}
	#payments .row, #payments .row:first-child .col-6:first-child {
		margin-top: 0;
	}
	#payments .show-mobile {
		width: 40px;
		margin-right: 10px;
		text-align: center;
	}
	#payments .blue {
		margin-right: 0;
	}
	#payments br {
		display: none;
	}
	footer {
		padding: 15px;
	}
}