body{
	background-color: #ededed;
	/* ededed;f4fbff*/
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}
p, div {
    font-family: 'Open Sans', sans-serif;
}



@media (min-width: 1200px) {
  .container {
    width: 75%;
  }
}




/***************** NavBar CSS ********************/
#NavBarContainer{
	
	background: rgba(0,0,0,1);
	border-radius:0px;
	border-bottom: 5px solid #00c6ff; 
	min-height:65px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
	
}



@media (max-width: 767px) {

	#NavBarContainer {

	min-height:40px;
		
	}

}



#NavBarContainer:hover{
	
	background: rgba(0,0,0,1);
	transition: all 0.5s ease-in-out; /* text has 0.1ms delay when hovering out */
}




.navbar-brand{
    position: absolute;
    width: 120px;
    transform:translatex(-50%);
    text-align: center;
	left:50%;
}

#black{
	
	background:rgba(0,0,0,1);
	position: absolute;
	height:41px;
	width:23px;
	display:block;
    transform:translatex(-50%);
	left:50%;
	margin-top:45px;
	padding:0px;
	border-radius:50%;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
}


@media (max-width: 767px) {

	#black {

	margin-top:18px;
	opacity:0.85;
	height:40px;
	width:16px;
		
	}

}



.navbar-brand >img{
    position: absolute;
    transform:translatex(-50%);
	left:50%;
	margin-top:-10px;
	filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.3));
	width:65px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
	
	
}

@media (max-width: 767px) {

	.navbar-brand >img {

	width:45px;
	margin-top:-15px;

	}
}


#LeftNavLinks{
	
	position:absolute;
	text-align: center;
	right:50%;
	margin-right:30px;
	float:left;
	font-weight:bold;
}

#LeftNavLinks li > a {
	padding-top:20px;
    padding-left: 20px;
    padding-right: 20px;
	color:white;
}

#LeftNavLinks li > a:hover {
	color:#00c6ff;
}


#RightNavLinks {
	
	position:absolute;
	text-align: center;
	left:50%;
	margin-left:30px;
	float:right;
	font-weight:bold;
}

#RightNavLinks li > a {
	padding-top:20px;
    padding-left: 20px;
    padding-right: 20px;
	color:white;
}

#RightNavLinks li > a:hover {
	color:#00c6ff;
}



@media (max-width: 767px) {
	
	#LeftNavLinks{
		
		position:relative;
		text-align: center;
		right:inherit;
		margin-left:20px;
		margin-top:10px;
		float:left;
		font-weight:bold;
	}

	#LeftNavLinks li > a {
		color:white;
	}

	#LeftNavLinks li > a:hover {
		color:#00c6ff;
	}


	#RightNavLinks {
		
		position:relative;
		text-align: center;
		left:inherit;
		margin-right:20px;
		margin-top:10px;
		float:right;
		font-weight:bold;
	}


	#RightNavLinks li > a {
		color:white;
	}

	#RightNavLinks li > a:hover {
		color:#00c6ff;
	}

}

@media (max-width: 375px) {
	
	#LeftNavLinks{
		
	margin:inherit;
		
	}
	
	#RightNavLinks{
		
	margin:inherit;
		
	}
	
}


/**************** End Of NavBar CSS ******************/



/************* Collapsible NavBar CSS **************/

#NavBarContainer .navbar-toggle {
	
	padding: 10px;
	margin: 10px 15px 5px 10px; /* Top Right Bottom Left */
	border-color: transparent; /*changes burger bar outside border*/
	/*changes burger bar background border*/

  
}

.navbar-collapse{
	padding-left:10px;
	padding-right:10px;
}

#NavBarCollapse{
	
	border: none;
	box-shadow: none;
	
}

#NavBarContainer .navbar-toggle:hover,
#NavBarContainer .navbar-toggle:focus {
	
	background: transparent;
	/* Stops changing colour on hover/focus */
  
}


#NavBarContainer .navbar-toggle .icon-bar {
  
	background: rgba(255,255,255,0.7);
	/* Collapsible NavBar Burger Bar Colour*/
  
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
  
}

/********** End Of Collapsible NavBar CSS ************/





/********** Start Of DropDown CSS ************/

@media only screen and (min-width : 768px) {
    /* Make Navigation Toggle on Desktop Hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/********** End Of DropDown CSS ************/




/************* Search NavBar CSS **************/

#SearchButton{
	
	position:absolute;
	color:white;
	text-decoration:none;
	left:1%;
	margin-top:17px;
	display:inline-block;
	border-radius:0%;
	padding: 3px 6px 3px 6px;
	
}

.glyphicon.glyphicon-search {
    font-size: 16px;
	font-weight:bold;
}

#SearchIcon{
	
	color:white;
	text-decoration:none;

}

#SearchIcon:hover{
	
	color:#00c6ff;
	
}

/************* End Of Search NavBar CSS **************/




/**************** Start Of Section CSS ******************/

#Section{
	
	padding:0px;
	margin:0 auto;
}

#Section h1{
	background:#00c6ff;
	width:50%;
	padding:15px;
	font-size:30px;
	font-weight: bold;
	color:#ffffff;
	text-align:center;
	margin:0 auto;
	margin-top:35px;


}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	
	#Section h1{
		
	width:80%;
	
	}

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

	#Section h1{
		
	width:70%;
	
	}
}




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

	#Section h1{
		
	width:90%;
	
	}

}




/**************** End Of Section CSS ******************/




/********** Start Of Carousel CSS ************/

#CarouselContainer{
	
	width:100%;
	padding:0px; /* Ensures full width */
	margin-top:65px;	
}
	
#HotCarouselInner{
	
	/* Carousel height is default auto*/
	height:auto;

}	





.carousel-indicators {
	bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
	background-image: none;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.3s ease;  /* Safari and Chrome */
	-moz-transition: all 0.3s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.3s ease;    /* Edge */
	-o-transition: all 0.3s ease;    /* Opera */
	transition: all 0.3s ease;	    /* Standard */
	
}
.carousel .item {
	height: 100%;
	width:100%; 
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption #button {
	background-color: #00c6ff;
}

.carousel-caption h3 {
	padding: .5em;
	font-weight:bold;
}
.carousel .icon-container {
	display: inline-block;
	font-size: 25px;
	line-height: 25px;
	padding: 1em;
	text-align: center;
	border-radius: 50%;
}
.carousel-caption #button {
	border-color: #00bfff;
	border-radius:0%;
}
  
  
  /*Delays for the animations*/
.carousel-caption h3:first-child {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.carousel-caption #button {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
}



/****** Carousel Control CSS ******/
#CarouselControls{
	background-color: #000;
	color:#00c6ff;
	border-radius:0px;
	padding:9px;
}

.carousel-control span {
        top:45%;
        font-size: 40px;
}


.carousel-control {
	height:10px;
	top:10px;
}



#CarouselIndicators{
	
	top:90%;
	
}

@media (max-width: 767px) {
	
	#CarouselIndicators{
	
		visibility:hidden;
	
	}
}

/****** End Of Carousel Control CSS ******/

/**** Hide icons on carousel when on small mobile width ****/
@media (max-width: 374px) {

	.icon-container {
		visibility: hidden;
	}

}

@media (max-width: 767px) {

	.carousel .icon-container {
		display: inline-block;
		font-size: 15px;
		line-height: 15px;
		padding: 1em;
		text-align: center;	
		border-radius: 50%;
	}


	.carousel-caption h3{
		font-size: 15px;
		margin-top:5px; /* Sets the distance between icon and caption */
	}

	.carousel-caption button {
		font-size: 15px;
	}


	.carousel-caption {
		position: absolute;
		right: 15%;
		bottom: 0%; /* Can be used to position caption */
		left: 15%;
		padding-top: 10px;
		padding-bottom: 10px;
	}

}


@media only screen and (min-width : 1920px) {

	.carousel-caption {
		position: absolute;
		right: 15%;
		bottom: 20%;
		left: 15%;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@media only screen and (min-width : 2560px) {

	.carousel-caption {
		position: absolute;
		right: 15%;
		bottom: 15%;
		left: 15%;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}




/********** Start Of News CSS ************/


.NewsSection{
	
	background: white;
	position: relative; /* Allows content to be positioned */
	overflow: hidden;  /* Hide content that overflows */
	z-index:1; /* Higher the z index the further in front it will be */
 	margin-top:20px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
	box-shadow: 0px 5px 5px #bbbbbb;

}

.News-img{
	
	position: relative;

}



.News-img img {
	position: relative;	
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;

}


.NewsSection:hover .News-img img { /* If hovering over the image or the container scale by 0.10 */
	-webkit-transform: scale(1.10);
	-moz-transform: scale(1.10);
	-ms-transform: scale(1.10);
	-o-transform: scale(1.10);
	transform: scale(1.10);
 	/* filter:blur(2px); */

}


.NewsTitle{
	
	padding: 0px 10px 0px 10px; /* Top, right, bottom, left. Sets padding for when mobile. */
	position: absolute; /*	The element is positioned relative to the element */
	left: 0;
	background: white;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	

}

.NewsTitleSmall{
	
	padding: 0px 30px; /* Top, right, bottom, left. Sets padding for when mobile. */
	position: absolute; /*	The element is positioned relative to the element */
	left: 0;
	background: white;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	

}





.NewsTitle h1 {
	
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	color:#353c47;
	
	
}

.NewsTitleSmall h1 {
	
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	margin-bottom:10px;
	color:#353c47;
}





.NewsSection:hover .NewsTitle  { /* If hovering over the container push title fix up by 60px */
	margin-top: -60px;  /* Distance between title and text */
	background: white;

}

.NewsSection:hover .NewsTitleSmall  { /* If hovering over the container push title fix up by 60px */
	margin-top: -60px;  /* Distance between title and text */
	background: white;
}




.NewsSection  p.NewsDescription {
	
	position: relative;
	font-weight: normal;
	line-height: 22px;
	opacity: 0;		/* Hides the new description text */
	text-align: center;
	padding: 40px 30px 20px 30px; /* Sets padding for when mobile. */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all .1s ease-in-out; /* text has 0.1ms delay when hovering out */
	color:#353c47;
}



.NewsSection  a:link {
    text-decoration: none;
}


.NewsSection  p.NewsDescriptionSmall {
	
	position: relative;
	font-weight: normal;
	line-height: 22px;
	opacity: 0;		/* Hides the new description text */
	text-align: center;
	padding: 10px 30px 0px 30px; /* Sets padding for when mobile. */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all .1s ease-in-out; /* text has 0.1ms delay when hovering out */
	margin-bottom:20px;
	color:#353c47;
}

.NewsSection:hover p.NewsDescription  { /* If hovering over the news container reveal text */
	
	opacity: 1;
	transition: 0.5s ease-in-out 0s;	/* 0.5ms transtion time when hovering on */

}


.NewsSection:hover p.NewsDescriptionSmall  { /* If hovering over the news container reveal text */
	
	opacity: 1;
	transition: 0.5s ease-in-out 0s;	/* 0.5ms transtion time when hovering on */

}




.Tagline {
	/* background: #00c6ff; */
	background-color:rgba(0, 198, 255, 1);
	font-weight:bold;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	left: 0;
	top: 10px;
	z-index: 1;
	padding: 3px 15px;
	background-color: #00bfff;
	
	
}

.TaglineSmall {
	/* background: #00c6ff; */
	background-color:rgba(0, 198, 255, 1);
	font-weight:bold;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	left: 0;
	top: 10px;
	z-index: 1;
	padding: 3px 15px;
	background-color: #00bfff;
	
}

#NewButtonContainer{
	
	text-align:center; /* Ensures button is centred at varying resolutions */
	
}


#NewsButton{
	
	background-color: transparent;
	color: #353c47;
	font-weight: bold;
	border-color: #8e8e8e;
	border-width: 2px;
	border-radius:0%;
	margin: auto 0px;
	padding: 8px;
	font-size: 17px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
}

#NewsButton:hover{
	
	background-color: #00c6ff;
	color: white;
	border-color: #00bfff;	
}



@media (max-width: 768px) {


	.NewsSection  p.NewsDescriptionSmall {
	
		padding: 20px 30px 20px 30px; /* Sets padding for when mobile. */
		min-height: 100px;			  /* Ensures whitespace round news highlights are consistent on mobile */
	
	}
	
	.NewsSection:hover .NewsTitle  { /* Stop movement on hover at low resolution */
	
		margin-top: -0px;  
		
	}

	.NewsSection:hover .NewsTitleSmall  { /* Stop movement on hover at low resolution */
	
		margin-top: -0px;  
		
	}
	
	.NewsSection p.NewsDescription  { /* Description no longer displayed at low res */
	
		opacity: 0;
		display: none;

	}


	.NewsSection p.NewsDescriptionSmall  { /* Description no longer displayed at low res */
		
		opacity: 0;
		display: none;

	}
		
}

@media (max-width: 1920px) {
	
	.NewsSection  p.NewsDescriptionSmall {
	
		min-height: 100px;			  /* Ensures whitespace round news highlights are consistent at HD */
		padding: 30px 5px 5px 5px; 	  /* Sets padding on HD screens top, right, left, bottom*/

	}

	#ModdingNews {
	
		min-height: 100px;			  /* Ensures whitespace round news highlights are consistent at HD */
		padding: 20px 5px 5px 5px; 	  /* Sets padding on HD screens top, right, left, bottom*/

	}
}
@media (max-width: 1440px) {
	
	.col-sm-4 .NewsSection {

		min-height:300px;
	}

	.col-sm-6 .NewsSection {

		min-height:300px;
	}
	
	.col-sm-6 .NewsSection h1{

		font-size: 20px;
	}
	
	.col-sm-6 .NewsSection p{

		font-size: 12px;
	}
	
	.col-sm-4 .NewsSection h1{

		font-size: 16px;
	}
	
	.col-sm-4 .NewsSection p{

		font-size: 12px;
	}		
	
}


@media (min-width: 2560px) {
	
	.NewsSection  p.NewsDescriptionSmall {
		padding: 30px 30px 20px 30px; /* Sets padding for when 2k+ */
		min-height: 100px;
		font-size: 16px;
	
	}
	
	.NewsSection  p.NewsDescription {
		font-size: 16px;
	
	}
	
	.NewsSection  p.NewsDescription {
		padding: 30px 30px 20px 30px; /* Sets padding for when 2k+ */
		min-height: 100px;
	
	}	
}


/********** End Of News CSS ************/










/********** Start Of Recommended Mods CSS ************/


#RecommendedModsInner > .item  img{
    width: 100%;
	height:auto;

}

#RecommendedModsInner .caption {
	
	background-color:grey;

}


#RecommendedModsInner  a:link, p{
    text-decoration: none;
	color:#353c47;
}

#RecommendedModsInner h4{
	
	font-size:25px;
	font-weight:bold;
	
	
}


#RecommendedModsInner p{
	
	font-size:15px;
}



.TaglineMods {
	background-color:rgba(0, 198, 255, 1);
	font-weight:bold;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	left: 10;
	top: 10px;
	z-index: 1;
	padding: 3px 15px;
	background-color: #00bfff;
	
}


@media (max-width: 767px) {

	#RecommendedModsInner > .item > .row > .col-sm-6{
		
		padding-bottom:20px;
		
	}
}


/********** End Of Recommended Mods CSS ************/










/********** Start Of Archive CSS ************/
#ArchiveCarouselInner > .item  img{
    width: 100%;
	height:auto;

}

#ArchiveCarouselInner .col-sm-4{
	
	padding-top:10px;
	padding-bottom:10px;
	
}

.caption{
	background-color:white;
	padding:10px;
}



.TaglineArchive {
	background-color:rgba(0, 198, 255, 1);
	font-weight:bold;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	left: 10;
	top: 10px;
	z-index: 1;
	padding: 3px 15px;
	background-color: #00bfff;
	
}

#ArchiveCarouselInner > .item {

	padding-left:10px;
	padding-right:10px;

}

@media (max-width: 768px) {


	#ArchiveCarouselControls{
		
		width:auto;	
	}
	
}

@media (max-width: 1920px) {


	.caption{
		
		min-height:150px;	
	}
	
}

@media (min-width: 1200px) {


	#ArchiveCarouselControls{
		
		width:400px;		
	}

	
}


.carousel-controls{
	position:relative; 
	width:400px;
	margin:0 auto;
	top:9px;
}

.fa{
	
	background-color: #000;
	color:#00c6ff;
	border-radius:0px;
	padding:10px;

}

.carousel-indicators{
	top:20px; 
	
}

ol.carousel-indicators li,
ol.carousel-indicators li.active {
  height: 10px; /* Height of indicators */
  width: 25%; /* Width of indicators */
  margin: 0;
  border-radius: 0;
  border: 0;
  background: black;
}

ol.carousel-indicators li.active {
  background: #00c6ff;
}

#ArchiveCarouselInner  a:link, p{
    text-decoration: none;
	color:#353c47;
}

/********** End Of Archive CSS ************/








/********** Start Of ReviewThumbnail  CSS ************/


.ReviewSection{
	
	background: #212121;
	position: relative; /* Allows content to be positioned */
	overflow: hidden;  /* Hide content that overflows */
	z-index:1; /* Higher the z index the further in front it will be */
 	margin-top:20px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
	box-shadow: 0px 5px 5px #8c8c8c;
	

}


.Review-img{
	
	position: relative;
}



.Review-img img {
	position: relative;	
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.ReviewSection:hover .Review-img img { /* If hovering over the image or the container scale by 0.10 */
	-webkit-transform: scale(1.10);
	-moz-transform: scale(1.10);
	-ms-transform: scale(1.10);
	-o-transform: scale(1.10);
	transform: scale(1.10);
	filter:blur(2px);
}

.ReviewTitle{
	
	padding: 0px 0px; /* Top, right, bottom, left. Sets padding for when mobile. */
	position: absolute; /*	The element is positioned relative to the element */
	left: 0;
	background: white;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	
	background-color:#212121;

}

.ReviewTitleSmall{
	
	padding: 0px 30px; /* Top, right, bottom, left. Sets padding for when mobile. */
	position: absolute; /*	The element is positioned relative to the element */
	left: 0;
	background: white;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	
	background-color:#212121;

}

.ReviewTitle h1 {
	
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	color:White;
}

.ReviewTitleSmall h1 {
	
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	color:white;
}


.ReviewSection:hover .ReviewTitle  { /* If hovering over the container push title fix up by 90px */
	margin-top: -60px;  /* Distance between title and text */
	background:White;
}

.ReviewSection:hover .ReviewTitle h1  { /* If hovering over the container push title fix up by 90px */
	color:#353c47;
}


.ReviewSection:hover .ReviewTitleSmall  { /* If hovering over the container push title fix up by 90px */
	margin-top: -60px;  /* Distance between title and text */
	background: white;
}

.ReviewSection:hover .ReviewTitleSmall h1  { /* If hovering over the container push title fix up by 90px */
	color:#353c47;
}




.ReviewSection  a:link {
    text-decoration: none;
}


.ReviewSection  p.ReviewDescription {
	
	position: relative;
	font-weight: normal;
	line-height: 22px;
	opacity: 0;		/* Hides the new description text */
	text-align: center;
	padding: 0px 30px 20px 30px; /* Sets padding for when mobile. */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all .1s ease-in-out; /* text has 0.1ms delay when hovering out */
	color:#353c47;
}


.ReviewSection  p.ReviewDescriptionSmall {
	
	position: relative;
	font-weight: normal;
	line-height: 22px;
	opacity: 0;		/* Hides the new description text */
	text-align: center;
	padding: 0px 10px 0px 30px; /* Sets padding for when mobile. */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all .1s ease-in-out; /* text has 0.1ms delay when hovering out */
	margin-bottom:20px;
	color:#353c47;
}

.ReviewSection:hover p.ReviewDescription  { /* If hovering over the news container reveal text */
	opacity: 1;
	transition: 0.5s ease-in-out 0s;	/* 0.5ms transtion time when hovering on */
}

.ReviewSection:hover p.ReviewDescriptionSmall  { /* If hovering over the news container reveal text */
	
	opacity: 1;
	transition: 0.5s ease-in-out 0s;	/* 0.5ms transtion time when hovering on */

}


@media (max-width: 768px) {


	.ReviewSection p.ReviewDescription {

		padding: 0px 30px 0px 30px; /* More padding to separate title from description */

	}

	.ReviewSection p.ReviewDescriptionSmall {

		padding: 0px 30px 0px 30px; /* More padding to separate title from description */

	}
	

	
	
}

@media (max-width: 1200px) {
	
	.col-sm-4 .ReviewSection{

		min-height:230px;
	}
	

	.col-sm-4 .ReviewSection h1{

		font-size: 15px;
	}
	
	.col-sm-4 .ReviewSection p{

		font-size: 10px;
	}	
	
}


@media (min-width: 2560px) {


	.ReviewSection p.ReviewDescription {

		padding: 20px 30px 20px 30px; /* More padding to separate title from description */

	}

	
}

/********** End Of ReviewThumbnail CSS ************/







/********** Start Of ScreenshotThumbnail CSS ************/

#ScreenshotContainer{
	
	margin-top:140px;
	
	
}


.ScreenshotSection{
	
	position: relative; /* Allows content to be positioned */
	overflow: hidden;  /* Hide content that overflows */
	z-index:1; /* Higher the z index the further in front it will be */
 	margin-top:20px;
	box-shadow: 0px 5px 5px #8c8c8c;
	background:#212121;
	
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	

}

.ScreenshotSection:hover .ThumbTitleSmall h1{
	
	color:#00c6ff;
	transition: all 0.5s ease;

}


.Thumb-img{
	
	position: relative;
}


.Thumb-img img {
	
	position: relative;	
	overflow: hidden;
}



.ThumbTitleSmall{
	
	position: relative;
    font-weight: normal;
    line-height: 22px;
    opacity: 1;
    text-align: center;
    padding: 0px 30px 0px 30px;
    margin-bottom: 20px;
    color: #353c47;

}

.ThumbTitleSmall h1 {
	
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	color:white;
	
}


.ScreenshotSection  a:link {
	
    text-decoration: none;
}


@media (max-width: 1440px) {
	
	.col-sm-4 .ScreenshotSection {

		min-height:200px;
	}

	.col-sm-4 .ScreenshotSection h1{

		font-size: 15px;
	}
			
}
/********** End Of ScreenshotThumbnail CSS ************/








/********** Start Of Screenshot Lightbox CSS ************/

/* Stops scrolling background when modal is open */
body.modal-open, .modal-open .modal {
  overflow: hidden;
}

/* The Modal (dialog box itself) */
.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	padding-top: 75px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: black;
}

/* Modal Content i.e. the image */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	width: 90%;
	max-width: 1440px;
	border-radius:0px; 
}

.close /* Close button X */ {
	color: #00c6ff;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 55px;
    font-weight: bold;
	transition: 0.2s ease;
    transition-delay: .1s;
	text-shadow: 0 0px 0;
	
}

.close:hover,
.close:focus {
	color: #00c6ff;
	text-decoration: none;
	cursor: pointer;
	opacity: 1; 
	transform: rotate(90deg);
}

.ScreenshotImage {
	display: none;
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons */
#LightboxPrev,
#LightboxNext {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
  
	background-color: #000;
	color:#00c6ff;
	opacity: .5;
	border-radius:0px;
	padding:9px;
  
}

/* On hover, add a black background colour with a little bit see-through */
#LightboxPrev:hover,
#LightboxNext:hover {
	color:#00c6ff;
	background-color: rgba(0, 0, 0, 0.8);
	opacity:1;
	text-decoration: none;
}

#LightboxPrev:focus,
#LightboxNext:focus {
	color:#00c6ff;
	background-color: rgba(0, 0, 0, 0.8);
	opacity:1;
	text-decoration: none;
}

/* Number text (1/3 etc) */
.numbertext {
	color: white;
	font-size: 12px;
	font-weight:bold;
	padding: 8px 12px;
	position: absolute;
	top: 0;
  
}

img {
  margin-bottom: -4px;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}


/* Position the next button to the right and prev to left */
#LightboxNext {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#LightboxPrev{
  left: 0;
  border-radius: 3px 0 0 3px;
}



@media (min-width: 2560px) {
	
	/* Modal Content i.e. the image */
	.modal-content {
	
		max-width: 80%;
	
	}
			
}



/********** End Of Screenshot Lightbox CSS ************/



/********** Start Of Thumbnail CSS ************/


.thumbnail{
	position:relative;
    display:inline-block;
    text-align:center;	
	overflow: hidden;
	background-color: transparent;
	border: 0px;
    border-radius: 0px;
	padding: 0px;
}


.thumbnail:hover img { /* If hovering over the image or the container scale img by 0.10 */
	-webkit-transform: scale(1.10);
	-moz-transform: scale(1.10);
	-ms-transform: scale(1.10);
	-o-transform: scale(1.10);
	transform: scale(1.10);
 	/* filter:blur(2px); */

}


.thumbnail img { /* Transition phases for thumbnail hover */
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

/********** End Of Thumbnail CSS ************/





/********** Start Of Modal CSS ************/

.modal-dialog{
	width:90%;
}

@media (max-width: 767px) {

	.modal-dialog {
		margin:auto;
	}
}

#close:hover{
	
	opacity:1;
}


/********** End Of Modal CSS ************/






/****************************** Start Of Review Page CSS ********************************/


/********** Start Of ProgressBar CSS ************/
/* .progress {background: rgba(255, 255, 255, 1); border: 2px solid rgba(0, 0, 0, 1); border-radius: 7px; height: 23px;}
.progress-bar-custom {background: rgba(0, 196, 245, 1);}
 *//********** End Of ProgressBar CSS ************/

 

/********** Start Of Review Carousel CSS ************/


#ReviewCarouselContainer{
	
	margin-top:110px;
	padding:0px;	
}
 
@media (min-width: 1440px) {

	#ReviewCarouselContainer{
		
		width:60%;
	}

}
 
 #ReviewCaptionInner > .item > img{
	width:100%;
	display: block;
	height: auto;
	margin: auto;
}
 
 
 
/********** End Of Review Carousel CSS ************/

 
 
 


/********** Start Of Title CSS ************/
#Title{
	
	background-size: contain;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin-top:15px;
	padding:0;

}

@media (min-width: 1440px) {
	
	#Title{
		width:60%;
	}

	#NeedKnowContainer{
		
		width:60%;
	}
	
	#ReviewText{
		
		width:60%;
		
	}
	
	#iframeContainer{
		
		margin-top:15px;
	}
	
}

@media (min-width: 2560px) {
	
	#iframeContainer{
		
		float:none;
		margin-top:0px;
	}
	
}


#Overlay{
	background-color: rgba(71, 71, 71, 0.70);
}

#Title h1{
	color:white;
	font-weight:bold;
	font-size:50px;
	text-align:center;
}

#Title h3{
	color:white;
	font-weight:bold;
	text-align:center;
}

#Title h5{
	color:white;
	text-align:center;
}

#Title a{
	color:#00c6ff;
	text-align:center;
}

#NeedKnowContainer{
	background-color:white;
	padding-right:0px;
	padding-left:0px;
	
}

#NeedKnowButton{
	background-color:#00c6ff;
	position:center;
	color:white;
	font-weight:bold;
	font-size:25px;
	border-radius: 0%;
	border:none;
}

#drop p{
	
	padding: 15px;

}

@media (max-width: 768px) {

#Title{

	background-size: cover;
	background-position: center;
	width:95%;
}

#Title h1{
	color:white;
	font-weight:bold;
	font-size:30px;
	text-align:center;
}

#NeedKnowContainer{
	width:95%;
}

}


/********** End Of Title CSS ************/





/********** Start Of Review CSS ************/
#ReviewText p{
	
	font-family:Arial;
	font-size:17px;
}

#ReviewText > h1{
	
	font-weight:bold;
	-webkit-font-smoothing: antialiased;
	padding-top:20px;		
	padding-bottom:0px;	
}

#ReviewText h2{
	
	font-weight:bold;
	-webkit-font-smoothing: antialiased;
	padding-top:35px;		
}

#ReviewText h3{
	
	font-weight:bold;
	-webkit-font-smoothing: antialiased;
	padding-top:20px;
	font-size:28px;	
}

#ReviewText h4{
	
	font-weight:bold;
	-webkit-font-smoothing: antialiased;
	padding-top:20px;	
	font-size:20px;
}

#imgLine{
	
	width:50%;
	/* border:solid #00c6ff 3px; */

}

#imgAbove{
	
	width:60%;
	
}

#ReviewText{
	
	padding-top:30px;
	padding-left:0px;
	padding-right: 0px;
}

#ReviewText a:link{
	
	color:#00c6ff;
	text-decoration: none;
	
}

#ReviewText a{
	
	color:#00c6ff;
	text-decoration: none;
	font-weight:bold;
	
}

@media (max-width: 767px) {
	#ReviewText p{
		
		margin:15px;
		margin-top:0px;
		padding-top:0px;
	}
	
	#ReviewText h2{
		
		margin:15px;
	}
	
	#ReviewText h1{
		
		margin:15px;
	}
	
	#ReviewText h3{
		
		margin:15px;
	}
	
	#ReviewText h4{
		
		margin:15px;
	}
	
	#ReviewText > img{
	
	margin:15px;

	}

}


@media (min-width: 768px) {
	
	.ArticleSmall{
	
	width:60%;
	}
}

@media only screen and (min-width : 320px) {
    #iframeContainer{
	height:150px;
	padding:0px;
	width:80%;
}
}

@media only screen and (min-width : 480px) {
	#iframeContainer{
	height:350px;
	padding:0px;
	width:90%;
}
}

@media only screen and (max-width : 480px) {
	#iframeContainer{
	margin-left:15px;
}
}

@media only screen and (min-width : 992px) {

	#iframeContainer{
	height:380px;
	padding:0px;
	width:60%;
	}

}

/********** End Of Review CSS ************/






/********** Start Of Verdict CSS ************/
#VerdictTitle{
	
	margin-top:15px;
	padding:0;
	background-color:#00c6ff;
	
}

#VerdictTitle h4{

	color:white;
	font-weight:bold;
	font-size:20px;
	text-align:center;
	
}

#VerdictBody{

	width:100%;
	background-repeat: no-repeat;
	background-position: center;
}

#VerdictBody h2{

	color:white;
	font-weight:bold;
}

#VerdictBody  h3{

	color:white;
	font-size:20px;
}


@media (max-width: 768px) {

#VerdictTitle{

	width:95%;
	
}

#VerdictBody{

	width:100%;
	background-size: cover;
	background-position: center;
}
}

@media (min-width: 1024px) {
	
	#VerdictTitle{
		width:50%;
	}

}


@media (min-width: 1440px) {
	
	#VerdictTitle{
		width:35%;
	}

}

/********** End Of Verdict CSS ************/


/****************************** End Of Review Page CSS ********************************/







/****************************** Start Of News Page CSS ********************************/


#Article {
	margin-top:0px;
	padding-bottom: 5px;
	padding-top: 5px;
}

#Article .col-sm-6.col-md-6.col-lg-6{
	padding: 0px;
}

#ArticleContainer{
	padding-top:30px;
	margin-top:5px;
}


#ArticleContainer h1{
	font-weight: bold;
	text-align:center;
	border-bottom: 5px solid #00c6ff;
	padding-bottom:5px;
	font-size:50px;
	margin-top:110px;
}


@media (max-width : 767px){
	
	#ArticleContainer h3{
	font-size:18px;
	}
	
	#ArticleContainer h5{
	font-size:12px;
	}
}

.NewsArticleText{
	
	text-align:center;
	font-size:15px;
}


#ArticleContainer h2{
	font-weight: bold;
	text-align:center;
	margin-top:110px;
}


#ArticleContainer h3{
	color:#353c47;
	font-weight:bold;
	-webkit-font-smoothing: antialiased;
	text-align:center;
}

#Article h3{
	margin-top:10px;
	font-weight: bold;
	text-align: left;
	font-size: 20px;
}

#ArticleContainer h4{
	color:#353c47;
	text-align:center;
	-webkit-font-smoothing: antialiased;
	padding:5px;
}

#ArticleContainer h5{
	color:#353c47;
	text-align:center;
}

#ArticleContainer h5 a:link{
	color:#00c6ff;
}

#Article p{
	margin-top:20px;
	margin-bottom:20px;
	text-align: left;
}

#ArticleImg{
	padding: 15px 20px 10px 0px;
}

#ArticleContainer hr{
	margin: auto 0;
    border: 0;
    border-top: 1px solid #00c6ff;
	width:100%;
	
}

#ArticleContainer a:link{
	
	color:#353c47;
	text-decoration: none;
	
}

#ArticleContainer .row:hover{
	
	color:#00c6ff;
	
	
}

.categories{
	text-align:center;
	font-size:25px;
	
}	

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	
#ArticleContainer{
	padding-top:30px;
	padding-left:20px;
	padding-right:20px;
}

}


/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
#ArticleContainer{
	padding-left:20px;
	padding-right:20px;
}

#ArticleImg{
	margin-bottom:20px;
}

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
#ArticleContainer{
	padding-left:10px;
	padding-right:10px;
}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
#ArticleContainer{
	padding-left:10px;
	padding-right:10px;
}
}



/****************************** End Of News Page CSS ********************************/







/****************************** Start Of Coming Soon Page CSS ********************************/


/********* Start Of Timeline CSS ***************/

.timeline {
	
	overflow:hidden;	
}


.timeline ul{

	padding:0px;
}


.timeline ul li { /* Controls the how the text is displayed */
  list-style-type: none;
  position: relative;
  width: 10px;
  margin: 0 auto;
  padding-top: 90px; /* Distance between stops */
  background-color: white;	/* Color of the vertical line */
  color:white;
  font-size:19px;
  font-weight:bold;
  text-align:center;
}
 

 
 
.timeline ul li::after { /* Controls the how the circles are displayed. ::after shows after the text content */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%); /* Centers the circles */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}




.timeline ul li div { /* Styles the box for the timeline elements */
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 20px;
  background: #00c6ff;
}


.timeline ul li div::before { /* Styles the bullet point that was originally there. Without it removes the arrow. */
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}



.timeline ul li:nth-child(odd) div { /* Styles the odd timeline elements. Moving to the right side of the timeline.*/
  
  left: 45px; /* Spacing too, between the timeline and element*/

}
 
 

.timeline ul li:nth-child(odd) div::before { /* Turns the bullet point into an arrow for right elements */
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #00c6ff transparent transparent;
}



.timeline ul li:nth-child(even) div { /* Same again but for the even elements. Positioning on the left.*/

  left: -439px; /* Width of the div + spacing - Width of each list item = 400px + 45px - 6px = 439px */
  
}
 
 

.timeline ul li:nth-child(even) div::before { /* Turns the bullet point into an arrow for left elements */
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #00c6ff;
}


.timeline ul li::after { /* Starting color of the timeline stops when not in view, gives it an animation when in view*/
  background: #fff;
  transition: background .5s ease-in-out;
}


.timeline ul li.in-view::after { /* Changes the background of the timeline stops when in view */
  background-color: #00c6ff;
}




#DateUnknown.in-view::after { /* Changes the background of unconfirmed date elements */
  background-color: grey;
}





.timeline ul li div { /* Hides the elements when not in view */
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

 
.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px,0,0); /* Hides the odd elements off screen so they slide when appearing */
}
 

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px,0,0); /* Hides the even elements off screen so they slide when appearing */
}


.timeline ul li.in-view div { /* Reveals the elements when in view */
  transform: none;
  visibility: visible;
  opacity: 1;
}



/* On medium devices, the divs get smaller to fit on screen */
@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px; /*250+45-6*/
  }
}



/* Small screens up to 600px. Elements are on the right side of timeline*/
@media screen and (max-width: 600px) {
	
  .timeline ul li {
	  
    margin-left: 20px;
	
  }
   
  .timeline ul li div {
	  
    width: calc(100vw - 150px); /* Calculate the 100% of the viewport and minus 150px to set the width of the div */
	
  }
   
  .timeline ul li:nth-child(even) div {
	  
    left: 45px; /* Even elements are now on the right side, same position as odds*/

  }
   
   
  .timeline ul li:nth-child(even) div::before { /* Gives the even elements arrows on the left side rather than the right*/
	  
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #00c6ff transparent transparent;
	
  }
}

.timeline ul li time{
	
	color:black;

}

/********* End Of Timeline CSS ***************/




/********* Start Of ReviewTable CSS ***************/



#ReviewTable{
	
	text-align:center;
	font-size:15px;
}


#ReviewTable .NotCenter{
	
	text-align:left;
	
}


#ReviewTable th{
	
	background-color:#00bfff;
	border:3px solid white;
	color:white;
	font-size:18px;
	text-align:center;
	
}


#ReviewTable tr{
	
	background-color: #e0e0e0;    /* 40% opaque red */ 
	border:3px solid white;
	color:black;
	
}


#ReviewTable tr:hover{
	
	background-color:#00bfff;
	color:white;
	
	
}


#ReviewTable td{
	
	border:3px solid white;
	
	
}




/********* End Of ReviewTable CSS ***************/






/********** Start Of ScrollToTop CSS ************/


.scrollToTop{
	padding:10px; 
	text-align:center; 
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	bottom:20px;
	right:30px;
	display:none;
	z-index:99;
}
.scrollToTop:hover{
	text-decoration:none;
}


.scrollToTop .fa{
	
	font-size:40px;
	opacity:.5;

}

.scrollToTop .fa:hover{
	
	opacity:1;

}

/********** End Of ScrollToTop CSS ************/



/********** Start Of Emblem CSS ************/


@media (max-width: 425px) {
	
	#Emblem {
	
		width:75%;

	}
	
	
}


@media (min-width: 768px) {
	
	#Emblem {
	
		width:40%;

	}
		
}


@media (min-width: 1024px) {
	
	#Emblem {
	
		width:30%;

	}
		
}



/********** End Of Emblem CSS ************/


/********** Start Of Strap CSS ************/

/* #Strap{
	
	text-align:center;
	margin:auto;
	margin-top:150px;
	
}

#StrapColumn{
	
	background:red;
	margin:auto;

}


#Strap div{
	
	width:10%;
	display:inline-block;
	background:yellow;
	

}

#Strap img{
	
	width:200px;
	margin:auto;
	
} */


/********** End Of Strap CSS ************/



/********** Start Of Social CSS ************/


#SocialMiddle{
	
	text-align:center;
	
}

#SocialLeft{
	
	text-align:left;
	
}


/********** End Of Social CSS ************/



/********** Start Of Footer CSS ************/
.footer {

	width: 100%;
	/* Sets the fixed height of the footer here */
	max-height: 2000px;
	background-color: #202020;
	position:relative bottom: 0;
	left: 0;
	right: 0;
	margin-top:150px;
	text-align:center;
	padding-bottom:20px;

}

.FooterRow{
	padding: 20px 0px 20px 0px;
}

.FooterLogo{
	padding-top:5px;
	padding-bottom:5px;
	/* top right bottom left */
}

#LogoAbout{
	text-align: left;
	padding: 5px;
	padding-left:15px;
	font-size:15px;	
}

#LogoAbout p{
	padding: 0px 30px 0px 5px;
}

#LogoAbout{
	color:white;
}

#FooterLinks h5{
		
	display:inline-block;
	padding:50px;
	
}

#FooterLinks a{

	color:#00bfff;
}


.footer hr{
	width:100%;
	margin: 0 auto;
	text-align:center;
	border-color:#5b5b5b;
}


.footer p{
	padding-top:20px;
	padding-bottom:0px;
	color:white;
	font-size:12px;
}


.NavBottom{
	background-color: #000000;
	font-weight: bold;
}


#Notice p{
	padding-top:40px;
	padding-bottom:10px;
	font-size:13px;
}

.SocialMediabutton{
	
	float:left;
}


.SocialBar{
	
	display:inline-block;
	float:left;	
	font-size:40px;
	margin-left:80px;
}

.SocialIcon{
	
	width:10%;	
	display:inline-block;
	float:left;
	margin-right: 50px;
	/* top right bottom left */
	text-align: center;
}

.fa-twitter{
	
	background:white;
	color:#1da1f2;	
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.4s ease;  /* Safari and Chrome */
	-moz-transition: all 0.4s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.4s ease;    /* Edge */
	-o-transition: all 0.4s ease;    /* Opera */
	transition: all 0.4s ease;	    /* Standard */
}


.fa-twitter:hover{
	
	background:#1da1f2;
	color:white;	

	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
}


.fa-youtube{
	
	background:white;
	color:red;	
	width:57px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.4s ease;  /* Safari and Chrome */
	-moz-transition: all 0.4s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.4s ease;    /* Edge */
	-o-transition: all 0.4s ease;    /* Opera */
	transition: all 0.4s ease;	    /* Standard */
}


.fa-youtube:hover{
	
	background:red;
	color:white;	

	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
}


.fa-facebook{
	
	background:white;
	color:#3b579d;	
	width:57px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.4s ease;  /* Safari and Chrome */
	-moz-transition: all 0.4s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.4s ease;    /* Edge */
	-o-transition: all 0.4s ease;    /* Opera */
	transition: all 0.4s ease;	    /* Standard */
}


.fa-facebook:hover{
	
	background:#3b579d;
	color:white;	

	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
}

.fa-steam{
	
	background:white;
	color:black;	
	width:57px;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.4s ease;  /* Safari and Chrome */
	-moz-transition: all 0.4s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.4s ease;    /* Edge */
	-o-transition: all 0.4s ease;    /* Opera */
	transition: all 0.4s ease;	    /* Standard */
}


.fa-steam:hover{
	
	background:black;
	color:white;	

	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
}



@media (max-width: 767px) {


.footer hr{
	width:100%;

}
}


@media (max-width: 425px) {

	#FooterLinks h5{
	
		padding:2px;
		padding-top:30px;
		font-size:8px;

	}
	
	.FooterLogo img{
		width:60%;
		margin:auto;
	}
	
	.FooterRow{
		padding: 2px 0px 2px 0px;
	}
}


@media (min-width: 425px) {
	
	#FooterLinks h5{
	
		padding:2px;
		padding-top:30px;
		font-size:12px;

	}
	
}


@media (min-width: 768px) {
	
	#FooterLinks h5{
	
		padding:30px;
		font-size:13px;

	}
	
	.FooterLogo img{
		width:50%;
	}
	
}


@media (min-width: 1024px) {
	
	#FooterLinks h5{
	
		padding:40px;
		font-size:15px;

	}
	
	.FooterLogo{
	width:60%;	
	}	
}




/********** End Of Footer CSS ************/






/********** Start Of Author CSS ************/


.AuthorSection{
	
	background: white;
	position: relative; /* Allows content to be positioned */
	overflow: hidden;  /* Hide content that overflows */
	z-index:1; /* Higher the z index the further in front it will be */
 	margin: 0px auto;
	margin-top:20px;
	width: 75%;
	text-decoration: none;
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
	box-shadow: 0px 5px 5px #bbbbbb;

}

.AuthorSection p, a:link{
	
	text-decoration: none;

}

.Author-img{
	
	position: relative;

}



.Author-img img {
	position: relative;	
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;

}

.Author-pp-img {

	position:relative;
	top:-75px; 
	width:150px; 
	margin: 0px auto;

}

.Author-pp-img > img {

	border-radius: 50%;
	border-style:solid;
	border-color:transparent;

}


.AuthorTitleSmall{
	
	padding: 0px 30px; /* Top, right, bottom, left. Sets padding for when mobile. */
	left: 0;
	background: white;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	

}



.AuthorTitleSmall h1 {
	
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	margin-bottom:10px;
	color:#353c47;
}


.AuthorTitleSmall h2 {
	
	font-weight: bold;
	font-size: 15px;
	text-align: center;
	display: table;
	color:white;
	border-radius: 0px;
	border-color: #00c6ff;
	border-style: solid;
	background-color: #00c6ff;
	margin: 0px auto;
	margin-bottom:10px;
	padding: 2px;
}


#AuthorLink{ 
	
	visibility: visible; /* Only shows on mobile to help users to see they click to go to author page */
	
}



.AuthorSection  a:link {
    text-decoration: none;
}


p.AuthorDescriptionSmall {
	
	position: relative;
	font-weight: normal;
	line-height: 22px;
	text-align: center;
	padding: 10px 30px 0px 30px; /* Sets padding for when mobile. */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	margin-bottom:20px;
	color:#353c47;
}

.AuthorDescriptionSmall span{
	
	position: relative;
	font-weight: normal;
	line-height: 22px;
	text-align: left;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	color:#353c47;
}




@media (max-width: 767px) {


	.AuthorSection  p.AuthorDescriptionSmall {
	
		padding: 20px 30px 20px 30px; /* Sets padding for when mobile. */
		min-height: 100px;			  /* Ensures whitespace round Author highlights are consistent on mobile */
	
	}
	
	.AuthorSection:hover .AuthorTitle  { /* Stop movement on hover at low resolution */
	
		margin-top: -0px;  
		
	}

	.AuthorSection:hover .AuthorTitleSmall  { /* Stop movement on hover at low resolution */
	
		margin-top: -0px;  
		
	}
	
	.AuthorSection p.AuthorDescription  { /* Description no longer displayed at low res */
	
		opacity: 0;
		display: none;

	}


	.AuthorSection p.AuthorDescriptionSmall  { /* Description no longer displayed at low res */
		
		opacity: 0;
		display: none;

	}
	
	.Author-pp-img {

		width:120px; /* Make PP smaller at low res */

	}
	

		
}

@media (max-width: 768px) {
	
	#AuthorLink{
		
		visibility: visible; /* Only shows up to tablet level, link to author's page */
		
	}	
	
}	
	
@media (max-width: 1920px) {
	
	.AuthorSection  p.AuthorDescriptionSmall {
	
		min-height: 100px;			  /* Ensures whitespace round Author highlights are consistent at HD */
		padding: 30px 5px 5px 5px; 	  /* Sets padding on HD screens top, right, left, bottom*/

	}

	#ModdingAuthor {
	
		min-height: 100px;			  /* Ensures whitespace round Author highlights are consistent at HD */
		padding: 20px 5px 5px 5px; 	  /* Sets padding on HD screens top, right, left, bottom*/

	}
}
@media (max-width: 1440px) {
	
	.col-sm-4 .AuthorSection {

		min-height:300px;
	}

	.col-sm-6 .AuthorSection {

		min-height:300px;
	}
	
	.col-sm-6 .AuthorSection h1{

		font-size: 20px;
	}
	
	.col-sm-6 .AuthorSection p{

		font-size: 12px;
	}
	
	.col-sm-4 .AuthorSection h1{

		font-size: 16px;
	}
	
	.col-sm-4 .AuthorSection p{

		font-size: 12px;
	}		
	
}


@media (min-width: 2560px) {
	
	.AuthorSection  p.AuthorDescriptionSmall {
		padding: 10px 10px 10px 10px; /* Sets padding for when 2k+ */
		min-height: 300px;
		font-size: 16px;
	
	}
	
	.AuthorSection  p.AuthorDescription {
		font-size: 16px;
	
	}
	
	.AuthorSection  p.AuthorDescription {
		padding: 30px 30px 20px 30px; /* Sets padding for when 2k+ */
		min-height: 100px;
	
	}	
}



/********** End Of Author CSS ************/








/********** Start Of PHP CSS ************/


/***Container***/
#MoreNews{
	width:100%;
}

#MoreNewsHeader{
	display:inline-block;
}

#MoreNewsHeader h1{
	background:#00c6ff;
	padding:10px;
	font-size:20px;
	font-weight: bold;
	color:#ffffff;
	text-align:left;
	margin:0px;
	text-decoration:none;
}

#ReviewText > hr{
	margin-top:100px;
    border: 0;
    border-top: 1px solid #00c6ff;
	width:50%;
}


#MoreNews .NewsTitleSmall h1{
	padding:0px;
}


.MoreNewsSection{
	
	background: white;
	position: relative; /* Allows content to be positioned */
	overflow: hidden;  /* Hide content that overflows */
	z-index:1; /* Higher the z index the further in front it will be */
	
	/* Will affect all contents of container with 0.5ms transition speed */
	-webkit-transition: all 0.5s ease;  /* Safari and Chrome */
	-moz-transition: all 0.5s ease;    /* Mozilla Firefox */
	-ms-transition: all 0.5s ease;    /* Edge */
	-o-transition: all 0.5s ease;    /* Opera */
	transition: all 0.5s ease;	    /* Standard */
	box-shadow: 0px 5px 5px #bbbbbb;

}

.News-img{
	
	position: relative;
}

.News-img img {
	position: relative;	
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;

}


.MoreNewsSection:hover .News-img img { /* If hovering over the image or the container scale by 0.10 */
	-webkit-transform: scale(1.10);
	-moz-transform: scale(1.10);
	-ms-transform: scale(1.10);
	-o-transform: scale(1.10);
	transform: scale(1.10);
 	/* filter:blur(2px); */

}


.MoreNewsTitleSmall{
	
	padding: 0px 30px; /* Top, right, bottom, left. Sets padding for when mobile. */
	position: relative; /*	The element is positioned relative to the element */
	left: 0;
	background: white;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	

}


.MoreNewsTitleSmall h1 {
	
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	margin-bottom:0px;
	margin-top:6px;
	padding: 10px;
	color:#353c47;
	
	display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	
}

.MoreNewsSection:hover .MoreNewsTitleSmall  { /* If hovering over the container push title fix up by 60px */
	margin-top: -60px;  /* Distance between title and text */
	background: white;
}


.MoreNewsSection  a:link {
    text-decoration: none;
}

#MoreNewsHR{
	
    margin-top: 10px;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #00c6ff;
	width:50%;
	
}

.MoreNewsSection  p.MoreNewsDescriptionSmall {
	
	position: relative;
	font-weight: normal;
	line-height: 22px;
	text-align: center;
	padding: 10px 30px 0px 30px; /* Sets padding for when mobile. */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all .1s ease-in-out; /* text has 0.1ms delay when hovering out */
	color:#353c47;
	opacity: 0;
	height: 0;
	margin: 0px;

}

.MoreNewsSection:hover p.MoreNewsDescriptionSmall  { /* If hovering over the news container reveal text */
	
	animation: reveal ease-in-out 0.5s forwards; /* calls animation reveal on hover */
	
}

@keyframes reveal {
  from {
    opacity: 0;
	height:0;
  }
  to {
    opacity: 1;
	height:120px;
  }
}

.TaglineSmall {
	/* background: #00c6ff; */
	background-color:rgba(0, 198, 255, 1);
	font-weight:bold;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	left: 0;
	top: 10px;
	z-index: 1;
	padding: 3px 15px;
	background-color: #00bfff;
	
}


@media (max-width: 767px) {
	
	.MoreNewsSection  { /* Stop movement on hover at low resolution */
	
		margin-top:20px;
	}	
	
	.MoreNewsSection {
		min-height: 350px;
	}
}


@media (min-width: 768px) {
	
	.MoreNewsTitleSmall  { /* Stop movement on hover at low resolution */
	
		padding: 0px;  
		height: auto;
	}	
	
	.MoreNewsTitleSmall h1 {
		
		max-height: 100px;
	}
	
	.MoreNewsSection {
		min-height: 350px;
	}
	
}


@media (min-width: 1920px) {
	
	.MoreNewsTitleSmall  { /* Stop movement on hover at low resolution */
	
		padding: 0px;  
		height: auto;
	}	
	
	.MoreNewsSection {
		min-height: 320px;
	}
}



@media (min-width: 2560px) {
	
	.MoreNewsSection  p.MoreNewsDescriptionSmall {
		padding: 15px 30px 20px 30px; /* Sets padding for when 2k+ */
		font-size: 16px;
	
	}	
	
	.MoreNewsSection {
		min-height: 370px;
	}
}

/********** End Of PHP CSS ************/







/********** Start Of Disqus CSS ************/

#disqus_thread{
	
	padding: 10px;
	
}


/********** End Of Disqus CSS ************/





/********** Start Of 404 CSS ************/

#ErrorBox img {
height:100%;
width:100%;
}



/* Large Devices, Wide Screens */
@media only screen and (min-width : 1920px) {
	
	#ErrorBox h1{
	position: absolute;
    top: 65%;
    left: 45%;
    width: 10%;
    text-align: center;
    font-size: 60px;
    color: white;
    font-weight: bold;
    background-color: rgba(0,198,255, 1);
}

	#ErrorBox h2{
	position: absolute;
    top: 75%;
    left: 20%;
    width: 60%;
    text-align: center;
    color: white;
    display: inline-block;
    padding: 10px;
    font-weight: bold;
    background-color: rgba(0,198,255, 1);
	}

}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1440px) {
	
	#ErrorBox h1{
	position: absolute;
    top: 45%;
    left: 45%;
    width: 10%;
    text-align: center;
    font-size: 40px;
    color: white;
    font-weight: bold;
    background-color: rgba(0,198,255, 1);
}

	#ErrorBox h2{
    position: absolute;
    top: 50%;
    left: 15%;
    width: 70%;
    text-align: center;
    color: white;
    display: inline-block;
    padding: 10px;
    font-weight: bold;
    background-color: rgba(0,198,255, 1);
    font-size: 25px;
	}

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 1024px) {
	
	#ErrorBox h1{
		position: absolute;
		top: 37%;
		left: 45%;
		width: 10%;
		text-align: center;
		color: white;
		display: inline-block;
		padding: 10px;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
		font-size: 35px;
}

	#ErrorBox h2{
		position: absolute;
		top: 45%;
		left: 15%;
		width: 70%;
		text-align: center;
		color: white;
		display: inline-block;
		padding: 10px;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
		font-size: 20px;
	}

}


@media only screen and (max-width : 768px) {
	
	#ErrorBoxRow{
		margin: 0 auto;
		position: relative;
		margin-top:50px;
	}
	
	#ErrorBox h1{
		position: absolute;
		top: 53%;
		left: 45%;
		width: 10%;
		text-align: center;
		font-size: 20px;
		color: white;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
	}

	#ErrorBox h2{
		position: absolute;
		top: 65%;
		left: 15%;
		width: 70%;
		text-align: center;
		color: white;
		display: inline-block;
		padding: 10px;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
		font-size: 15px;
	}


}

@media only screen and (max-width : 425px) {
	
	#ErrorBoxRow{
		margin: 0 auto;
		position: relative;
		margin-top:50px;
	}
	
	#ErrorBox h1{
		position: absolute;
		top: 40%;
		left: 45%;
		width: 10%;
		text-align: center;
		font-size: 14px;
		color: white;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
	}

	#ErrorBox h2{
		position: absolute;
		top: 55%;
		left: 15%;
		width: 70%;
		text-align: center;
		color: white;
		display: inline-block;
		padding: 10px;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
		font-size: 10px;
	}


}


@media only screen and (max-width : 320px) {
	
	#ErrorBoxRow{
		margin: 0 auto;
		position: relative;
		margin-top:50px;
	}
	
	#ErrorBox h1{
		position: absolute;
		top: 30%;
		left: 45%;
		width: 10%;
		text-align: center;
		font-size: 10px;
		color: white;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
	}

	#ErrorBox h2{
		position: absolute;
		top: 45%;
		left: 15%;
		width: 70%;
		text-align: center;
		color: white;
		display: inline-block;
		padding: 10px;
		font-weight: bold;
		background-color: rgba(0,198,255, 1);
		font-size: 8px;
	}


}



/********** End Of 404 CSS ************/