body {
	background-color: black;
	background-image: url(./assets/noisebg.gif);
	background-repeat: repeat;
	margin:0;
	padding:0;
}

.body-wrapper { 
background-image: linear-gradient(to bottom, rgba(10,29,41,.5) 40%, rgba(0,0,0,.75) 60%);
background-repeat: repeat-y;
height: 100%;
}

.body-wrapper-top-image { 
background-image: url(./assets/bg-galaxy-nofade.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center top; 
}

.container {
	width: 1000px;
}

.TopRow{
	padding-top: 40px;
}

.ButtonRow div{
    display: inline-block;
	padding-right:10px;
	padding-left:10px;
	padding-bottom:20px;
}

.CastraLogo{
	height: 200px;
}

.CloudFlareLogo img{
	height: 50px;
}

.SpectrumLogo img{
	height: 25px;
}

.StarCitizenLogo img{
	height: 80px;
}

.YouTubeLogo img{
	height: 50px;
}

.WhammersLogo img{
	height: 80px;
}

.Moto{
	color: #ffffff;
	text-align: center;
	font-family: "Quicksand", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 22px;
	line-height: 20px;
	padding-bottom: 20px; 
}

.CastraButton > a > button {
	border-radius: 4px;
	border: none;
	width: 180px;
	margin-top: 0px;
	height: 55px;
	color: #ffffff;
	text-align: center;
	font-family: "Quicksand", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 20px;
	line-height: 19px;
	background: #29568C;/* Dark Blue */
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.CastraButton > a > button:hover {
  background-color: #54adf7; /* RSI Button Website Hover Color */
}

.DocumentRow, .BottomRow{
	width: 100%;
	display: flex;
	flex-direction: row;
}

.BottomRow div{
	margin: auto;
	justify-content: center;
	align-items: center;
}

.BannerLogos{
	width: 90%;
	display: flex;
	flex-direction: row;
	padding:20px 20px 20px 20px; /* Top Right Bottom Left */
}

.BannerLogos div{
	padding:0px 20px 0px 20px; /* Top Right Bottom Left */
}

.LeftCard, .RightCard{
	width: 50%;
}

.WideCard{
	width: 100%;
	justify-content: left;
	align-items: left;
}

.LeftCard, .RightCard, .WideCard{
	margin:0;
	background-color: rgba(36, 38, 40, 0.5);
	border: 3px solid #54adf7;
	border-radius: 10px;
}

.SpaceBetweenCards{
	width: 20px;
	height: 20px;
}

.ImgBottomCornersCurved{
	border-radius: 0px 0px 10px 10px; /* topright, topleft, bottomright, bottomleft */	
}

.CastraCardImage{
	border-radius: 10px 10px 10px 10px; /* topright, topleft, bottomright, bottomleft */	
}

.DiscordCardImage{
	float: left;
	padding: 20px 20px 0px 20px; /* top right bottom left */
	height: 150px;
}

.DiscordCardRegularImage{
height:30px;	
}

.CastraCardRegularImage{
height:30px;	
}


.CastraCardImage, .ImgBottomCornersCurved{
	display: block;
	width: 100%;
	margin:0;
	padding:0;
}

.CastraCardText{
	display: block;
	margin:0;
	color: #ffffff;
	text-align: left;
	font-family: "Quicksand", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1.1em;
	line-height: 1.2em;
	padding: 20px 20px 20px 20px; /* top right bottom left */
}

.CastraCardText ul{
	line-height: 1.5em;
	padding-left: 10px;
}

.CastraCardText li{
	list-style-type: none;
}

.CastraCardText a:link {
	color: #ffffff;
	text-decoration: none;
}

.CastraCardText a:visited {
  	color: #ffffff;
	text-decoration: none;
}

.CastraCardText a:hover {
	color: #54adf7;
	text-decoration: underline;
}

.CastraCardText a:active {
	text-decoration: underline;
}

.Space{
	height: 30px;
}

#DiscordBoxBackground{
	background-image: linear-gradient(to bottom right, rgba(106, 26, 121, 0.7),rgba(74, 19, 115, 9));
}

#JoinBoxBackground{
	background-image: linear-gradient(to bottom right, rgba(8, 137, 76, 0.5),rgba(8, 137, 76, 0.7));
}

@media screen and (max-width: 1500px) {
    .container {
		width:800px;
    }
	.TopRow{
		padding-top: 20px;
	}
}

@media screen and (max-width: 1024px) {
	.TopRow{
		padding-top: 10px;
	}
}

@media screen and (max-width: 800px) {
	.container{
		width:600px;
    }
	.BannerLogos{
		width: 90%;
		display: inline-block;
	}
	.DocumentRow, .BottomRow{
		width: 90%;
		display: inline-block;
	}
	.LeftCard, .RightCard{
		width: 100%;
		margin:0;
		padding:0px; /* Top Right Bottom Left */
	}
	.TopRow{
		padding-top: 5px;
	}
}

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

	.container{
		width:500px;
    }
	.TopRow{
		padding-top: 1px;
	}
}