@import url("https://fonts.googleapis.com/css?family=Inter&display=swap");

/*Setup*/
html {
	background-color: #000;
	background: url("images/background-nav4.webp") top repeat-x,
		url("images/stars-tile.webp") top repeat-y;
	background-size: contain;
	object-fit: contain;
	width: auto;
	height: auto;
}
body {
	font-family: "Inter", sans-serif;
	color: #fff;
	margin: auto;
	max-width: 1240px;
	overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
	font-family: "Inter", serif;
	margin-bottom: 0;
	background: url("images/text-bg1.webp") repeat;
	background-size: contain;
	background-clip: text;
	object-fit: contain;
	width: auto;
	height: auto;
	-webkit-background-clip: text;
	color: rgba(125, 209, 255, 0.6);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.1),
		0 0 10px rgba(0, 92, 143, 0.1), 0 0 10px rgba(0, 92, 143, 0.1),
		0 0 20px rgba(0, 92, 143, 0.1), 0 0 20px rgba(0, 92, 143, 0.1),
		0 0 30px rgba(0, 92, 143, 0.8), 0 0 30px rgba(0, 92, 143, 0.1);
}
h1,
h2 {
	font-size: 3rem;
	margin: 2rem 0;
	letter-spacing: 4px;
}
p,
label {
	line-height: 2.2rem;
	font-size: 18px;
	background: url("images/text-bg1.5.webp") repeat;
	background-size: contain;
	background-clip: text;
	object-fit: contain;
	width: auto;
	height: auto;
	-webkit-background-clip: text;
	color: rgba(125, 209, 255, 0.6);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.1),
		0 0 10px rgba(0, 92, 143, 0.1), 0 0 10px rgba(0, 92, 143, 0.1),
		0 0 20px rgba(0, 92, 143, 0.1), 0 0 20px rgba(0, 92, 143, 0.1),
		0 0 30px rgba(0, 92, 143, 0.8), 0 0 30px rgba(0, 92, 143, 0.1);
}
li {
	display: inline-block;
	list-style-type: none;
	padding: 0 1rem;
	text-transform: uppercase;
}
li a {
	text-decoration: none;
	color: #fff;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.section {
	margin: 5rem 3rem;
}
.mb-off {
	margin-bottom: 0px;
}
.mt-off {
	margin-top: 0px;
}
img {
	height: auto;
	width: auto;
}
.link {
	color: rgba(125, 209, 255, 0.6);
}
/*Button*/
.primary-button {
	background-color: #65c8f1;
	color: #000;
	border-radius: 50px;
	padding: 1rem;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	border: none;
}
.primary-button:hover {
	background-color: #fff;
	color: #000;
	cursor: pointer;
}
.primary-button a,
.nav-menu .primary-button,
.nav-menu .primary-button:hover {
	color: #000;
}
/*Nav*/
.nav-menu {
	display: inline;
	font-size: 12px;
	font-weight: 700;
}
.nav-menu .nav-logo {
	padding: 0;
}
.nav-menu li a {
	color: #65c8f1;
}
.nav-menu li a:hover {
	color: #fff;
}
.inner-menu {
	float: right;
	padding: 0 1rem;
	letter-spacing: 3px;
	font-size: 14px;
}
nav {
	margin-top: 30px;
}
.logo-white {
	max-width: 100px;
}
/*Logo*/
.rt-logo {
	max-height: 223px;
}
/*Social*/
.socials {
	margin-top: 0.75rem;
}

.socials .twitter {
	display: inline-block;
	background: url("images/twitter-icon.webp") no-repeat;
	background-size: cover;
	background-position: center;
	width: 60px;
	height: 60px;
}
.socials .twitter:hover {
	background: url("images/twitter-icon-white.webp") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #65c8f1;
	border-radius: 50px;
}
.socials .bluesky a {
	width: 60px;
	height: 60px;
	display: inline-block;
}
.socials .bluesky {
	display: inline-block;
	background: url("images/bluesky.svg") no-repeat;
	fill: #65c8f1;
	background-size: 40px 35px;
	background-position: center;
}
.socials .bluesky:hover {
	background: url("images/bluesky-white.svg") no-repeat;
	background-size: 40px 35px;
	background-position: center;
	background-color: #65c8f1;
	fill: #fff;
	border-radius: 50px;
}
.socials .fb {
	display: inline-block;
	background: url("images/fb-icon.webp") no-repeat;
	background-size: cover;
	background-position: center;
	height: 60px;
	width: 60px;
}
.socials .fb:hover {
	background: url("images/fb-icon-white.webp") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #65c8f1;
	border-radius: 50px;
}
.socials .fb a {
	width: 60px;
	height: 60px;
	display: inline-block;
}
.socials .twitter a {
	width: 60px;
	height: 60px;
	display: inline-block;
}
/*Image*/
.rt-hero-img {
	background: url(images/first-images/RT_039_RNB_0110_Comicon_comp_v107_uhd_rec709_grade.0001004.webp)
		top/cover no-repeat;
	object-fit: cover;
	width: auto;
	/* max-width: 900px; */
	min-height: 640px;
	height: auto;
	margin: auto;
	border-radius: 16px;
}
/*About section*/
#about {
	margin: 6rem auto;
	max-width: 800px;
}

.about-btn {
	margin-top: 2rem;
}

#about .link {
	-webkit-text-decoration: none;
}

/*Newsletter section*/
.section-three {
	display: block;
	position: relative;
	background: url(images/desktop-rogue-newsletter.webp) top/cover no-repeat;
	width: auto;
	height: auto;
	object-fit: cover;
	padding: 4rem;
	border-radius: 24px;
}
.col-6 {
	width: 49%;
	display: inline-block;
	margin: auto;
}
/*Email container*/
.grecaptcha-badge {
	visibility: hidden;
}
.section-three .newsletterFormContainer {
	position: absolute;
	max-width: 500px;
	left: 50%;
	top: 15%;
}
.section-three h2 {
	text-transform: none;
	letter-spacing: 0px;
	background: url("images/text-bg1.5.webp") repeat;
	background-size: contain;
	background-clip: text;
	object-fit: contain;
	width: auto;
	height: auto;
	-webkit-background-clip: text;
	color: rgba(125, 209, 255, 0.6);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.1),
		0 0 10px rgba(0, 92, 143, 0.1), 0 0 10px rgba(0, 92, 143, 0.1),
		0 0 20px rgba(0, 92, 143, 0.1), 0 0 20px rgba(0, 92, 143, 0.1),
		0 0 30px rgba(0, 92, 143, 0.8), 0 0 30px rgba(0, 92, 143, 0.1);
}
.section-three .emailAddressContainer {
	display: block;
	position: relative;
	width: 100%;
}
.section-three .emailAddressContainer .emailIcon {
	display: block;
	position: absolute;
	background: url("images/email_icon.webp") center/cover no-repeat;
	object-fit: cover;
	height: 20px;
	width: 30px;
	top: 33px;
	left: 20px;
	z-index: 200;
}
.section-three .emailAddressContainer #emailAddress {
	display: inline-block;
	position: relative;
	width: 65%;
	box-sizing: border-box;
	outline: none;
	background-color: transparent;
	height: 50px;
	border: 2px solid #65c8f1;
	border-radius: 50px;
	padding-left: 60px;
	line-height: 20px;
	font-size: 16px;
	font-weight: 400;
	color: #65c8f1;
	margin-top: 20px;
	margin-bottom: 20px;
}
.section-three .emailAddressContainer #emailAddress:-webkit-autofill,
#emailAddress:autofill {
	background-color: transparent !important;
	color: #65c8f1;
}
.section-three .emailAddressContainer input::placeholder {
	color: #65c8f1;
	font-family: "Inter", sans-serif;
	font-style: italic;
}
.section-three .emailAddressContainer .primary-button {
	position: relative;
	display: inline-block;
	height: 50px;
	width: 24%;
	margin-left: 3%;
	border: none;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 1.1rem;
}
.successMessage {
	display: none;
	color: #fff;
	font-size: 1.2rem;
	padding: 10px;
	font-size: 1.2rem;
	border: 1px solid #3adb76;
	margin-top: 10px;
	background: rgba(58, 219, 118, 0.1);
}
.errorMessage {
	display: none;
	color: red;
	padding-top: 10px;
	font-size: 1.2rem;
}
/*News*/
#news {
	margin-top: 6rem;
	margin-bottom: 7rem;
}
.news-title {
	margin-bottom: 1rem;
}
.news-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2rem 0 4rem 0;

	.primary-button {
		display: flex;
		flex-flow: row;
		align-items: center;
	}
}
.news-socials a {
	margin: 0.5rem;
}
.btn-icon-twitter {
	background: url("images/twitter-blue.webp") no-repeat;
	background-size: cover;
	width: 60px;
	height: 60px;
	display: inline-block;
}
.btn-icon-fb {
	background: url("images/fb-blue.webp") no-repeat;
	background-size: cover;
	width: 60px;
	height: 60px;
	display: inline-block;
}
.news-socials .fb a,
.news-socials .twitter a {
	width: 40px;
	height: 40px;
}
.social-btn-icon {
	filter: brightness(0%);
	height: 40px;
	width: 40px;
	position: relative;

	&.--bluesky {
		padding: 5px;
		height: 25px;
		width: 25px;
	}
}

/*Merch*/
.merch-block {
	display: flex;
	margin: 1rem 0 3rem 0;
}

.merch-block-columns {
	display: flex;
	margin: auto;
}

.product-text {
	text-align: left;
	max-width: 257px;
}

.merch-subtitle {
	margin: 1rem 0;
}

.merch-item {
	margin: auto;
}

.merch-block a {
	width: auto;
	height: auto;
	text-align: center;
	text-decoration: none;
}

.item-1,
.item-2,
.item-3,
.item-4 {
	width: 272px;
	height: 355px;
	border-radius: 16px;
	object-fit: cover;
	object-position: center;
}

.item-1,
.item-2,
.item-3 {
	margin-right: 1.5rem;
}

.img-container {
	min-height: 330px;
	margin: 1rem 0;
}

/*Footer*/
footer li a {
	color: #65c8f1;
}
footer li {
	display: inline-block;
}
footer p {
	line-height: 190%;
}
.logo {
	margin-left: 2%;
}
/*Media queries*/
@media (max-width: 1240px) {
	body {
		margin: 2rem;
	}
	.section-three .newsletterFormContainer {
		left: 50%;
	}
	.section-three {
		padding: 4rem;
	}
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 240px;
		height: 310px;
	}
	.product-text {
		max-width: 230px;
	}
}
@media (max-width: 1140px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 210px;
		height: 300px;
	}
	.product-text {
		max-width: 200px;
	}
}
@media (max-width: 1024px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 200px;
		height: 280px;
	}
	.rt-logo {
		max-height: 153px;
	}
	#news .col-8,
	#news .col-2 {
		width: 100%;
		display: block;
	}
	li {
		padding: 0 0.5rem;
	}
	.news-subtitle {
		margin-bottom: 1.2rem;
	}
	#about {
		max-width: 600px;
	}
	.col-6 {
		width: 100%;
	}
	.section-three .newsletterFormContainer {
		margin-top: 0px;
		top: 0;
		position: relative;
		max-width: 100%;
		width: 100%;
		left: 0;
	}
}
@media (max-width: 992px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 175px;
		height: 240px;
	}
	.item-1,
	.item-2,
	.item-3 {
		margin-right: 1rem;
	}
	.product-text {
		max-width: 160px;
	}
	.img-container {
		min-height: 0px;
	}
}
@media (max-width: 844px) {
	.news-socials .primary-button {
		margin: 2rem auto;
		max-width: 400px;
	}
	.social-btn-icon {
		height: 30px;
		width: 30px;

		&.--bluesky {
			padding: 5px;
			height: 15px;
			width: 15px;
		}
	}
}
@media (max-width: 840px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 160px;
		height: 230px;
	}
}
@media (max-width: 767px) {
	.col-6,
	.col-8,
	.col-2 {
		width: 100%;
	}
	body {
		margin: 0rem;
	}
	.rt-logo {
		max-height: 112px;
	}
	h1,
	h2 {
		font-size: 2rem;
	}
	.sect {
		margin: 2rem 1rem 3rem 1rem;
	}
	nav .primary-button {
		margin: 0 4rem;
	}
	ul {
		padding: 0;
	}
	.inner-menu .primary-button {
		margin: 1rem auto;
		display: block;
	}
	.logo-white {
		display: block;
		margin: auto auto 1rem auto;
	}
	.nav-menu li {
		display: block;
	}
	.inner-menu {
		padding-top: 0;
		margin: auto;
		text-align: center;
		float: none;
	}
	.inner-menu li {
		display: inline-block;
		margin: 0.3rem 0;
	}
	nav {
		margin-top: 15px;
	}
	.section-three,
	.nav-menu {
		display: block;
	}
	.section-three {
		padding: 1rem 2rem;
		background: url(images/mobile-rogue-newsletter.webp) top/cover no-repeat;
		object-fit: cover;
		width: auto;
		height: auto;
	}
	#about {
		max-width: 500px;
	}
	.merch-block-columns {
		flex-wrap: wrap;
	}
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 290px;
		height: 390px;
	}
	.logo-content {
		margin-top: 1rem;
	}
	.product-text {
		max-width: 250px;
	}
}
@media (max-width: 708px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 230px;
		height: 330px;
	}
}
@media (max-width: 600px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 190px;
		height: 290px;
	}
	.product-text {
		max-width: 160px;
	}
}
@media (max-width: 540px) {
	.inner-menu .primary-button {
		width: 90%;
		margin: 1rem auto;
	}
	#about {
		margin: 2rem;
		text-align: left;
	}
	li a,
	li {
		display: block;
		padding: 0.2rem;
		text-align: center;
	}
	.planet {
		left: 0%;
		max-width: 250px;
	}
	.section-three .emailAddressContainer #emailAddress {
		width: 100%;
		padding-left: 55px;
		font-size: 14px;
	}
	.section-three .emailAddressContainer .primary-button {
		width: 100%;
		margin-left: 0;
		font-size: 16px;
	}
	.section-three {
		margin: 5rem 2rem;
		min-height: 29rem;
	}
	#about .primary-button {
		display: block;
	}
	.primary-button {
		font-size: 14px;
	}
	p {
		font-size: 15px;
	}
	h1,
	h2 {
		font-size: 32px;
	}
	.inner-menu .primary-button {
		padding: 14px;
	}
	.section-three .emailAddressContainer .primary-button {
		height: auto;
		padding: 14px;
	}
	footer p,
	footer li a {
		font-size: 13px;
	}
	.rt-hero-img {
		min-height: 407px;
	}
	#about h2 {
		text-align: left;
	}
	.section {
		margin: 2rem;
	}
}
@media (max-width: 508px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 160px;
		height: 240px;
	}
	.product-text {
		max-width: 130px;
	}
}

@media (max-width: 456px) {
	#merch .btn-container {
		display: flex;
	}
	#merch .primary-button {
		text-align: center;
		margin: auto;
	}
}

@media (max-width: 416px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 130px;
		height: 200px;
	}
	.product-text {
		max-width: 100px;
	}
}
@media (max-width: 356px) {
	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		width: 100px;
		height: 140px;
	}
	.product-text {
		max-width: 100px;
	}
}

@media (max-width: 341px) {
	#news {
		margin-top: 13rem 2rem 5rem 2rem;
	}
	.section-three .emailAddressContainer #emailAddress {
		font-size: 12px;
	}
	#twitter-widget-0 {
		width: 200px;
	}
}

/***********************
    Media Carousel
***********************/

.media-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.media-body {
	height: min(477px, calc((80vw + 2em) / (1800 / 752)));
}
.media-slide {
	display: flex !important;
	justify-content: center;
}
.media-slide-image {
	max-width: 100%;
}
.media-controls {
	align-content: center;
}
.media-controls button {
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.1),
		0 0 10px rgba(0, 92, 143, 0.1), 0 0 10px rgba(0, 92, 143, 0.1),
		0 0 20px rgba(0, 92, 143, 0.1), 0 0 20px rgba(0, 92, 143, 0.1),
		0 0 30px rgba(0, 92, 143, 0.8), 0 0 30px rgba(0, 92, 143, 0.1);
}