@charset "utf-8";
/*
Theme Name: Real4Cash Affiliate Program
CSS/Theme URI: https://real4cash.com/
Description: Custom NATS Template for Real4Cash.com
Version: 1.0
Author: geral@MiguelTavares.com
*/

/* Startup CSS */
body { height:100%; min-height:100%; font-size:14px; background:#000; color:#FFF; font-family:'Raleway', Arial, Helvetica, sans-serif; overflow-x:hidden; }
pre { color:#CCC; }
.hide { display:none !important; }
p { margin-bottom:10px; }
img { max-width:100%; height:auto; }
.clear { clear:both; }

.font-Montserrat { font-family:'Montserrat', Arial, Helvetica, sans-serif; }
.font-Raleway { font-family:'Raleway', Arial, Helvetica, sans-serif; }
.fw-400 { font-weight:400 !important; }
.fw-700 { font-weight:700 !important; }
h1, h2, h3, h4, h5, h6 { font-family:'Montserrat', Arial, Helvetica, sans-serif; font-weight:600; }
input[type="submit"],
input[type="button"],
button { font-family:'Montserrat', Arial, Helvetica, sans-serif; }

a, .btn, input[type="submit"], input[type="button"], button { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }

/* Main Color: #67aed2 */
.bg-dark { background-color:#000 !important; }
.bg-dark-luxe { background-color:#000; }
.highlight { color:#67aed2 !important; }
a { color:#67aed2; }
a:hover { color:#FFF; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled { background:#67aed2; border:1px solid #67aed2; }
.btn-primary.disabled, .btn-primary:disabled, .form-control:disabled, .form-control[readonly] { cursor:not-allowed; }
.btn-primary:hover { background:#860207; border:1px solid #860207; }

.bg-fixed-cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 50%;
	height: 100vh;
	background: url('../images/bg.jpg') center center no-repeat;
	background-size: cover;
	z-index: -1;
}
/* Mobile version: show a square block */
@media (max-width: 767.98px) {
	.bg-fixed-cover {
		display: none;
	}

	.mobile-hero {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		background: url('../images/bg.jpg') center center no-repeat;
		background-size: cover;
	}

	.row.vh-100 { height:auto !important; }
}

.scrollable-content {
	max-height: 90vh;
	/*overflow-y: auto;*/
	padding:25px 0;
}

.btn {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #fff;
	overflow: hidden;
	font-weight: 700;
	position: relative;
	text-transform: uppercase;
	outline: none;
	border: none;
	border-radius:8px;
	padding: 7px 20px;
	-moz-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	-o-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	-webkit-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.btn .btn-label { padding: 14px 0; }
.btn:hover, .btn:focus, .btn:active {
	outline: none !important;
	border: none !important;
	color: #fff !important;
	box-shadow:0 0 0 0.2rem rgba(204, 204, 204, 0.5);
}
.btn.btn-default:focus, .btn.btn-default:active { color:#222 !important; }
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
	background-color:#ad0021;
	box-shadow:0 0 0 0.2rem rgba(232, 0, 44, 0.2);
}
.btn-default {
	background-color:#fff;
}
.btn span {
	position: relative;
	z-index: 2;
	display: inline-block;
}
.btn .mask {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 0;
	z-index: 1;
	-moz-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	-o-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	-webkit-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.btn:hover .mask { width:100%; }

.btn.btn-primary { color:#FFF; }
.btn.btn-default { color:#222; }
.btn.btn-default:hover { background:#777; }

.btn.btn-join { font-size:200%; text-transform:uppercase; }

.btn:hover { box-shadow:none !important; }
.btn.btn-luxe { background-color:#1b1b1b; line-height:1em; padding:14px 35px; font-size:15px; letter-spacing:1px; }
.btn.btn-luxe:hover { background-color:#67aed2; color:#1b1b1b !important; }
.btn.btn-luxe:not(:disabled):not(.disabled).active:focus, .btn.btn-luxe:not(:disabled):not(.disabled):active:focus, .show>.btn.btn-luxe.dropdown-toggle:focus {
	background-color:#00ad4e;
	box-shadow:0 0 0 0.2rem rgba(0, 232, 70, 0.2);
}

.btn.btn-luxe-gold { background-color:#67aed2; color:#1b1b1b; line-height:1em; padding:14px 35px; font-size:15px; letter-spacing:1px; }
.btn.btn-luxe-gold:hover { background-color:#c83b3a; color:#FFF !important; }
.btn.btn-luxe-gold:not(:disabled):not(.disabled).active:focus, .btn.btn-luxe-gold:not(:disabled):not(.disabled):active:focus, .show>.btn.btn-luxe-gold.dropdown-toggle:focus {
	background-color:#1b1b1b;
	box-shadow:0 0 0 0.2rem rgba(0, 0, 0, 0.2);
	color:#FFF;
}

.btn.btn-luxe.btn-luxe-outline { background:none; line-height:1em; padding:14px 35px; font-size:15px; letter-spacing:1px; border:1px solid #FFF !important; color:#FFF; backdrop-filter:blur(10px); }
.btn.btn-luxe.btn-luxe-outline:hover { background-color:#67aed2; color:#1b1b1b; border:1px solid #67aed2 !important; }
.btn.btn-luxe.btn-luxe-outline:not(:disabled):not(.disabled).active:focus, .btn.btn-luxe.btn-luxe-outline:not(:disabled):not(.disabled):active:focus, .show>.btn.btn-luxe.btn-luxe-outline.dropdown-toggle:focus {
	background-color:#00ad4e;
	box-shadow:0 0 0 0.2rem rgba(0, 232, 70, 0.2);
	border:1px solid #FFF !important;
}

/* Generic Paddings */
.padding-zero { padding: 0; }
.padding-left-zero { padding-left:0; }
.padding-right-zero { padding-left:0; }
.padding-left-100 { padding-left:100px; }
.padding-left-75 { padding-left:75px; }
.padding-left-50 { padding-left:50px; }
.padding-right-100 { padding-right:100px; }
.padding-right-75 { padding-right:75px; }
.padding-right-50 { padding-right:50px; }
.padding-top-100 { padding-top:100px; }
.padding-top-75 { padding-top:75px; }
.padding-top-50 { padding-top:50px; }
.padding-top-25 { padding-top:25px; }
.padding-bottom-100 { padding-bottom:100px; }
.padding-bottom-75 { padding-bottom:75px; }
.padding-bottom-50 { padding-bottom:50px; }
.padding-bottom-25 { padding-bottom:25px; }

/* Bootstrap Overrides */
.tooltip { font-size:10px !important; }

/* Custom Styles */
.wrapper {
	display: table;
	width: 100%;
	height: 100%;
	table-layout: fixed;
	overflow: hidden;
	transition: opacity .6s;
}

.main-content .logo { display:inline-block; max-width:360px; margin:25px 0; }

@media (max-width: 767.98px) {
	.scrollable-content, .main-content, .main-content.w-75 { width:96% !important; }
}

.section-closed { display:none; }
.section-opened { display:block; }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1500px) { .container-fluid.container-fluid-luxe { width:1440px; } }
@media (min-width: 1700px) { .container-fluid.container-fluid-luxe { width:1680px; } }

.section-form { display:inline-block; width:100%; text-align:left; padding-top:30px; border:1px solid #e3e3e3; padding:30px; border-radius:20px; }
.section-form form { display:inline-block; width:100%; }
.section-form form .form-row { display:inline-block; width:100%; margin-bottom:18px; }
.section-form form .form-row:last-child { margin-bottom:0; }
.section-form form .form-row label { display:inline-block; width:100%; margin-bottom:2px; font-weight:400; font-size:12px; cursor:pointer; text-transform:uppercase; }
.section-form form .form-row .form-check label { font-weight:400; font-size:1.2em; }
.section-form form .form-row .form-check label:hover { font-weight:700; }
.section-form .form-response { display:none; }
.form-control:focus { border-color:#1b1b1b; box-shadow:0 0 0 .25rem rgba(0, 0, 0, 0.25); }

.signup-section-header { display:inline-block; width:100%; margin-bottom:12px; padding:12px 16px; background-color:#263036; color:#67aed2; text-transform:uppercase; font-weight:700; font-size:14px; border-radius:8px; }
.signup-section-header span { display:inline-block; background-color:#67aed2; color:#1b1b1b; height:21px; width:21px; text-align:center; line-height:21px; border-radius:50px; font-weight:700; font-size:14px; margin-right:6px; }

.main.bg-dark .section-form, .section-form.dark-style { border-color:#272e33; background-color:#171d21; }

.footer-social a { font-size:18px; text-decoration:none; color:#FFF; background:#000; border-radius:50px; padding:12px 14px; position:relative; margin:2px;}
.footer-social a i { position:relative; top:1px; }
.footer-social a:hover { color:#000; background:#67aed2; }

.sites-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; border:1px solid #272e33; background-color:#101112; padding:20px; border-radius:20px; margin-top:30px; margin-bottom:30px; }
.sites-grid .site-item { display:flex; justify-content:center; align-items:center; }
.sites-grid .site-item a { position:relative; display:inline-block; }
.sites-grid .site-item a img { max-height:30px; transition: opacity 0.3s ease; }
.sites-grid .site-item a:hover img { opacity:0.6; }

/* Preloader */
#preloader { float:left; width:100vw; height:100vh; background-color:#101010; color:#666; text-align:center; position:fixed; top:0; left:0; z-index:999999; }
#preloader .centerbox { display:table; width:100%; height:100%; }
#preloader .middle { display:table-cell; vertical-align:middle; }
#preloader .middle img { display:inline-block; max-width:300px; }
#preloader .loading-spinner-container { display:inline-block; width:100%; }
#preloader .loading-spinner-text { display:inline-block; width:100%; margin:10px 0; }

.loader{width:48px;height:48px;border:3px solid #fff;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;margin-top:12px;animation:rotation 1s linear infinite}
.loader::after{content:'';box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;border:8px solid transparent;border-bottom-color:#67aed2}
@keyframes rotation{
	0%{transform:rotate(0)}
	100%{transform:rotate(360deg)}
}
