@font-face {
    font-family: "remixicon";
    src: url('../fonts/remixicon.eot?t=1606950632054'); /* IE9*/
    src: url('../fonts/remixicon.eot?t=1606950632054#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url("../fonts/remixicon.woff2?t=1606950632054") format("woff2"),
    url("../fonts/remixicon.woff?t=1606950632054") format("woff"),
    url('../fonts/remixicon.ttf?t=1606950632054') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../fonts/remixicon.svg?t=1606950632054#remixicon') format('svg'); /* iOS 4.1- */
    font-display: swap;
}

[class^="ri-"], [class*="ri-"] {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
.ri-xxs { font-size: .5em; }
.ri-xs { font-size: .75em; }
.ri-sm { font-size: .875em }
.ri-1x { font-size: 1em; }
.ri-2x { font-size: 2em; }
.ri-3x { font-size: 3em; }
.ri-4x { font-size: 4em; }
.ri-5x { font-size: 5em; }
.ri-6x { font-size: 6em; }
.ri-7x { font-size: 7em; }
.ri-8x { font-size: 8em; }
.ri-9x { font-size: 9em; }
.ri-10x { font-size: 10em; }
.ri-fw { text-align: center; width: 1.25em; }

.ri-arrow-right-line:before { content: "\ea6c"; }
* {
	padding: 0;
	margin: auto;
	font-family: 'Sora', sans-serif;
}
div, input, li, ul, textarea {
	box-sizing: border-box;
}
#clearfix { clear: both; }
a { color: inherit;text-decoration: inherit; }
a:hover { text-decoration: underline; }
body {
	background-image: url(../../bg.svg);
	background-repeat: no-repeat;
	background-position: 80% center;
	background-color: #111111;
	min-height: 100vh;
}
section.background {
	width: 100%;
	height: 100vh;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.bg {
	/* background-image: url(../../vector.png);
	background-repeat: no-repeat;
	background-position: 80% top; */
	width: 100%;
	height: 100vh;
	position: absolute;
	/* animation: opacity 10s infinite ease-in-out; */
}
@keyframes opacity {
	0% {
		opacity: 0.8;
		background-position: 77% -40px;
	} 23% {
		opacity: 0.5;
		background-position: 82% -80px;
	} 43% {
		opacity: 0.8;
		background-position: 87% -20px;
	} 100% {
		background-position: 80% top;
		opacity: 1;
	}
}
.bg .circle:nth-child(1) {
	background-color: red;
	width: 416px;
	height: 663px;
	position: absolute;
	border-radius: 100%;
	filter: blur(120px);
	margin-top: -418px;
	right: 20%;
	z-index:2;
	opacity: 0.8;
	animation: pulse 10s infinite ease-in-out;
}
.bg .circle:nth-child(2) {
	background: radial-gradient(108.52% 108.52% at 50% 50%, #6AFEEC 0%, rgba(0, 255, 255, 0) 100%);
	width: 500px;
	height: 500px;
	position: absolute;
	border-radius: 100%;
	filter: blur(120px);
	margin-top: -315px;
	right: 10%;
	opacity: 0.8;
	animation: pulse 5s infinite ease-in-out;
	animation-delay: 2.5s;
}
div.logo {
	margin-top: 32px;
	margin-bottom: 0;
	position: absolute;
	top: 0;
}
img.logo {
	width: 200px;
}
.container .row {
	align-items: center;
}
.container {
	position: relative;
	z-index: 3;
}
.container,
.container .row {
	min-height: 100vh;
}
span.tag {
	width: 100%;
	float: left;
	text-align: center;
	color: #F4F4F4;
	font-weight: 200;
	font-size: 8px;
	letter-spacing: 2em;
}
h1 {
	font-size: 48px;
	line-height: 58px;
	color: white;
	letter-spacing: -0.01em;
	font-weight: 200;
	margin-top: 57px;
	margin-bottom: 0;
}
h1 strong {
	font-weight: 700;
}
.newsletter {
	max-width: 552px;
	width: 100%;
	float: left;
	position: relative;
	margin-top: 75px;
}
.newsletter span.title {
	width: 100%;
	float: left;
	color: white;
	font-size: 14px;
	line-height: 21px;
	font-weight: 700;
}
.newsletter span.desc {
	width: 100%;
	float: left;
	color: #888888;
	font-size: 14px;
	line-height: 21px;
	font-weight: 200;
	margin-top: 2px;
}
.newsletter .form-group {
	position: relative;
	width: 100%;
	float: left;
	margin-top: 42px;
}
.newsletter label {
	background-color: #222229;
	padding: 0 4px;
	position: absolute;
	z-index: 2;
	color: #888888;
	font-size: 14px;
	line-height: 14px;
	left: 15px;
	top: -6px;
}
.newsletter input {
	background-color: transparent;
	color: white;
	width: 100%;
	height: 40px;
	border: 2px solid red;
	float: left;
	outline: 0;
	box-shadow: none;
	padding: 15px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
	-webkit-box-shadow: 0 0 0 30px #222229 inset !important;
	color: white !important;
}
.newsletter button {
	background: none;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	top: 0;
	border: 0;
	outline: 0;
	color: white;
	font-size: 24px;
	margin: 0;
	display: flex;
	align-items: center;
	transition: all 0.2s;
	visibility: hidden;
	opacity: 0;
	margin-top: 20px;
}
.newsletter.active button {
	visibility: visible;
	opacity: 1;
	margin-top: 0
}
@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	} 50% {
		transform: scale(1.3);
		opacity: 0.5;
	} 100% {
		transform: scale(1);
		opacity: 0.8;
	}
}
@media screen and (max-width: 992px){
	h1 {
		font-size: 22px;
		line-height: 35px;
		text-align: center;
		padding: 0 5px;
	}
	span.tag {
		line-height: 20px;
		text-align: center;
	}
	body {
		background-position: -190% 100px;
		background-size: cover;
	}
	div.logo {
		text-align: center;
	}
	.newsletter span.title {
		text-align: center;
		padding: 0 20px;
	}
	.newsletter span.desc {
		text-align: center;
		padding: 0 20px;
		margin-top: 5px;
	}
	.row > div:not(.logo) {
		margin-top: 170px;
	}
	.newsletter {
		margin-top: 50px;
	}
}