/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

body {
font-family: 'Recursive', sans-serif;
font-size:19px;
}

.smooth {
transition:.4s ease-in-out;
-webkit-transition:.4s ease-in-out;	
}

header {
position:fixed;
top:0;
left:0;
width:100%;	
z-index:100;
background: rgb(0,0,0);
background: linear-gradient(122deg, rgba(0,0,0,0) 0%, rgba(51,0,0,0) 100%);
padding:60px 90px;
}

header.scrolled {
padding:30px 90px;
background: rgb(0,0,0);
background: linear-gradient(122deg, rgba(0,0,0,1) 0%, rgba(51,0,0,1) 100%);
}

header img.logo {
width:225px;	
}

header.scrolled img.logo {
width:120px;	
}

header nav {
float:right;	
}

div#mobile-menu {
display:none;	
}

div.first-section {
padding-top:260px !important;	
}

.hero-bg {
position:relative;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;	
z-index:0;
}

.hero-bg.dimmed-bg::after {
content:'';
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background-color:rgba(0,0,0,.90);
z-index:-1;
}

.hero-bg.dimmed-bg * {
z-index:1;
}

.jump-icon {
font-size:46px;
font-weight:bold;	
}

div.spacer {
margin:50px auto !important;
text-align:center;
transform:rotate(-2deg);	
}

div.spacer::before, div.spacer::after {
display:block;
content:'';	
width:175px;
height:3px;
background-color:#057663;
margin:7px auto 0px auto;
}

.spacer-bg {
min-height:200px;	
}

img {
max-width:100% !important;	
}

img.icon {
width:70px;	
}

.partner-box img {
width:70px;	
float:left;
margin:0px 15px 5px 0px;
}

.flyin {
transition:.7s ease-in;
-webkit-transition:.7s ease-in;
opacity:0;
margin-top:100px;
}

.flyin.in {
margin-top:auto;
opacity:1;
}

iframe {
height:400px;
width:500px;
border:2px solid #1a1a1a;
margin:20px auto;	
}

.hero-img {
width:50%;	
max-width:400px;
}

.mobile-only {
display:none !important;	
}

div.faq {
padding:10px 0px;
margin:10px auto;	
position:relative;
}

div.faq::after {
content:'';
display:block;
position:absolute;	
left:-10px;
background:#A6A2A2;
width:20px;
height:3px;
top:70px;
}

div.faq p.question {
color:#330000;
font-weight:bold;
font-size:22px;
}

div.faq p.answer {
padding-left:26px;
font-size:17px;	
}

.bg-red {
background-color:#330000;	
}

a.btn.bg-red:hover {
background-color:#820D0D;		
}

.bg-red-grad {
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(51,0,0,1) 100%);	
}

.bg-blue-grad {
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(24,142,164,1) 100%);	
}

.clear {
clear:both !important;	
}

.stick {
position:sticky;
top:0;	
}

table {
display:block;	
max-width:100%;
overflow-x:auto;	
}

.ajax-updated {
background-size:60px;
background-repeat:no-repeat;
background-position:center;
}

.text-small {
font-size:13px;	
}

.scrollY {
max-height:125px !important;
overflow-y:auto;
}

@media screen and (max-width:800px) {

.desktop-only {
display:none !important;	
}

.mobile-only {
display:block !important;	
}
	
header,header.scrolled {
position:relative;
background: rgb(0,0,0);
background: linear-gradient(122deg, rgba(0,0,0,1) 0%, rgba(51,0,0,1) 100%);
padding:30px !important;;
}

header img.logo {
width:120px !important;	
}

div.first-section {
padding-top:20px !important;	
}

div#mobile-menu {
display:block;
position:absolute;
top:20px;
right:20px;
width:50px;
z-index:7;	
}

div#mobile-menu div {
display:block;
width:55px;
background-color:#fff;
height:8px;
margin:5px auto;
border-radius:5px;
}

div#mobile-menu div.x {
transform:rotate(45deg);
margin:15px auto 5px auto !important;
}

div#mobile-menu div.y {
transform:rotate(-45deg);	
margin:-25px auto 5px auto !important;
}
div#mobile-menu div.z {
opacity:0;	
}	

div#mobile-menu.on {
position:fixed;	
}

header nav {
float:none;
position:fixed;
z-index:5;
top:0;
right:0;
padding:100px 0px !important;
width:0%;
height:100vh;
overflow:hidden;	
background-color:#1a1a1a;
}

header nav a.btn {
display:block !important;
width:80%;
text-align:center;
margin:10px auto;	
}

header nav.on {
width:100%;	
}

iframe {
height:300px;
width:100%;	
}

.hero-img {
width:80%;	
}

div.faq::after {
display:none !important;
}

div.faq p.answer {
padding-left:10px;	
}

}