/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.navbar-wrapper.fixed {margin-top:0px;}

.navbar-wrapper.affix .navbar {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}


.navbar-wrapper.fixed .navbar {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

	/* Carousel base class */
    .carousel {
	  max-height: 250px;
	  overflow:hidden;
	 -webkit-box-shadow:  0px 3px 3px 2px rgba(20, 20, 20, 0.65);
      box-shadow:  0px 2px 2px 1px rgba(20, 20, 20, 0.25);
    }

	.carousel-control:focus,
	.carousel-control:active {
		outline: 0;
	}

/* Since positioning the image, we need to help out the caption */
    .carousel .container {
      position: relative;
	  width: 88%;
	  margin: auto;
	  padding-left:0;
	  padding-right:0;
      /*z-index: 10;*/
    }

	.carousel-indicators {
		left: 0;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
		right: 0;
		top: auto;
		bottom: 5px;
		max-width: 15%;	
		cursor: pointer;
		white-space:nowrap;
	}

	.carousel-indicators li {
		box-shadow: 0 1px 2px rgba(0,0,0,.8);
	}

	.carousel-control {width: 10%; color: #FFFFFF !important;}

	.carousel-inner {
		min-height: 280px;
		max-height: 280px;
	}

/* Declare heights because of positioning of img element */
    .carousel .item {
      height: 280px;
	  overflow:hidden;
    }

  .carousel img {
      position: absolute;
      top: 0;
      left: -225px;
	  min-width: 750px;
	  max-width: 100%;
      width: 100%;
      height: auto;
	  min-height: 280px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 760px;
      padding: 0 20px;
      margin-top: 75px;
	  text-align:left;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.75);
    }
	.carousel-caption h1 {
		font-weight:bold;
		font-size: 12px;
	}

	.carousel-caption .lead {
	  font-size: 12px;
	  max-width: 450px;
	  margin-top: 5px;
	}
    .carousel-caption .btn {
      margin-top: 15px;
	  font-size: 10px;
    }

	.carousel-caption .text-inverse {
		background-color: rgba(0,0,0,0.5);
		padding: 15px 15px 15px 15px;
		text-shadow: 3px 8px 3px rgba(0, 0, 0, 1);

	}

    .carousel-caption.pull-right {
		padding-left: 10px;
	}

	
	 .carousel-caption .text-inverse .lead {
		max-width: 100%;
		/*padding-left: 7%;*/
	 }

	.carousel .container .btn {z-index: 999;}



/* MARKETING CONTENT
-------------------------------------------------- */

	#btn-download-home > .dropdown-menu > li {
		min-width: 300px;
	}

	.socialstrip {
		white-space:nowrap;
	}

	.socialstrip > .row > div {
		text-align:center;
		margin-bottom: 15px;
	}

	.socialstrip .widget {
		display:inline-block;
		margin-left: 5px;
		margin-right: 5px;
		vertical-align: middle;
	}

	.socialstrip .widget label {
		display:none;
	}

	.socialstrip .widget > a {
		white-space:nowrap;
		display:inline-block;
		margin:2px 0;
	}

	.socialstrip .widget.steamgroup {
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		border-radius: 2px 2px 2px 2px;
		border-style: solid;
		border-width: 1px;
		background-color: #0E0E0E;
		background-image: linear-gradient(to bottom, #151515, #040404);
		background-repeat: repeat-x;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	}

	.socialstrip .widget.steamgroup a {
		display:block;
		color: #DDD;
		padding-left: 48px;
		background: url(img/steamwidget_logo.png) no-repeat scroll left center transparent;
		margin: 1px 6px;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.socialstrip .widget.steamgroup a:hover {
		text-decoration: none;
	}

	.socialstrip .widget.steamgroup .membercount {}
	.socialstrip .widget.steamgroup .onlinecount {color: #62A7E3;}

	.section {
		padding-top:30px;
		padding-bottom:30px;
	}

	.section.inverse {
		margin-left: -15px;
		padding-left: 15px;
		margin-right: -15px;
		padding-right: 15px;
	}

	.section h2 {
		margin-bottom: 20px;
	}

	.section h3 {
		margin-top: 15px;
	}

	.section .event {
		margin-bottom: 30px;
		font-size: 1.65rem;
	}

	.section .event br {
		
	}

	.section .event .bbc_u {
		display:block;
		font-size: 2.15rem;
		margin-bottom: 15px;
		border-bottom: 1px dashed #999;
	}

	.section .event .bbc_u strong {
		font-weight: 600;
	}

	.section .event .bbc_u span {
		margin-right: 8px;
		vertical-align: middle;
	}

	.section .event tt {
		font-weight: bold;
		font-family: inherit;
	}
	
	.section .gameicons {
		display:block;
		margin: 30px 0;
	}

	.section .gameicons a {
		display: inline-block;
		margin-left: 5px;
		margin-right: 5px;
		max-width: 96px;
		width: 15%;
	}

	.section .gameicons a img {
		width: 100%;
		box-shadow: 0px 0px 0px 2px rgba(100, 100, 100, 0.35);
	}

	.section .gameicons a:hover img {
		/*border: 1px solid rgba(200, 200, 200, 0.75);*/
		box-shadow: 0px 0px 0px 2px rgba(200, 200, 200, 0.35);
	}

	.section .download-set {
		display:block;
		font-size: 18px;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	.section .download-set > div:first-child {
		padding-top: 15px;
	}

	.news-item {
		margin-top: 15px;
		padding-top: 15px;
		margin-bottom: 30px;
		padding-bottom: 15px;
	}

	.home-widget table > thead {
		font-size: 1.4rem;
	}

	.home-widget table > tbody {
		font-size: 1.2rem;
	}


	.news-item h4 {
		font-size: 12px;
	}

	.news-item p {
		font-size: 16px;
		margin-bottom:30px;
	}

	.news-item:first-child {
	}

	.news-comments {
		position:absolute;
		bottom:0;
	}

	#home-changelog {
		margin-bottom: 35px;
	}


/* Pad the edges of the mobile views a bit */
/*
	.marketing {
	  padding-right: 15px;
	  padding-left: 15px;
	}
*/


	/* Featurettes
	------------------------- */

	.featurette-divider {
	  border-top: 1px solid #666666;
	  border-bottom: 1px solid #444444;
	}

	.featurette-divider {
	  margin: 30px 0 30px; /* Space out the Bootstrap <hr> more */
	}

	.featurette {
	  padding-top: 30px; /* Vertically center images part 1: add padding above and below text. */
	  overflow: hidden; /* Vertically center images part 2: clear their floats. */
	  text-align: center;
	}
	.featurette-image {
	  margin-top: -30px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
	  max-width:100%;
	  vertical-align:middle;
	}

	/* Give some space on the sides of the floated elements so text doesn't run right into it. */
	.featurette-image.pull-left {
	  margin-right: 40px;
	}
	.featurette-image.pull-right {
	  margin-left: 40px;
	}

	/* Thin out the marketing headings */
	.featurette-heading {
	  font-size: 3rem;
	  font-weight: 300;
	  line-height: 1;
	  letter-spacing: -1px;
	}

	.featurette-caption {
		margin-left: 25px;
		color: #F5F5F5;
		text-align:left;
	}

	.featurette-caption .muted {
		opacity: .5;
		filter:alpha(opacity=50);
	}


/*-------------------------------------------------- */
/* RESPONSIVE CSS
/*-------------------------------------------------- */


@media (min-width: 480px) {

	.carousel {
		max-height: 280px;
	}
	 
	.carousel-inner {
		min-height: 280px;
		max-height: 320px;
	}

	.carousel-indicators {
		bottom: 10px;
	}

	.carousel .item {
		height: 320px;
	}

	.carousel img {
		min-height: 320px;
		min-width: 860px;
		top: 0px;
		left: -100px;
	 }

	.carousel-caption {
		margin-top: 90px;
		min-width: 50%;
		max-width: 360px;
	}

	.carousel-caption h1 {
		font-size: 16px;
	}

	.carousel-caption .lead,
	.carousel-caption .btn {
		font-size: 11px;
	}

	.socialstrip .widget label {
		display:inline-block;
	}
}

@media (min-width: 768px) {

	.carousel {
		max-height: 360px;
	}

	.carousel-inner {
		min-height: 360px;
		max-height: 360px;
	}

	.carousel .item {
		height: 360px;
	}

	.carousel img {
		/*width: auto;*/
		min-height: 360px;
		left: 0;
	}
	
	.carousel-caption {
		margin-top: 100px;
		max-width: 640px;
	}
	
	.carousel-caption .lead {
		max-width: 450px;
		font-size: 16px;
		margin-top: 10px;
	}

	.carousel-caption h1 {
	   font-size: 22px;
	}

	.carousel-caption .lead,
	.carousel-caption .btn {
		font-size: 14px;
	}

	.socialstrip {
		padding-bottom: 15px;
	}
	
	.socialstrip > .row > div {
		display:inline-block;
	}

	.socialstrip > .row > div:first-child {
		text-align:left;
	}

	.socialstrip > .row > div:last-child {
		text-align:right;
	}

}

@media (min-width: 992px) {

	.news-item:first-child {
		border-bottom: 0;
	}

	.carousel-caption {
		margin-top: 120px;
	}
	
}

@media (min-width: 1024px) {

}

@media (min-width: 1200px) {

	.carousel {
		max-height: 480px;
	}

	.carousel-inner {
		min-height: 480px;
		max-height: 480px;
	}

	.carousel .item {
		height: 480px;
	}

	.carousel img {
		/*width: auto;*/
		min-height: 480px;
	}

	.carousel-caption {
		margin-top: 140px;
		max-width: 800px;
	}
	
	.carousel-caption .lead {
		max-width: 640px;
		font-size: 18px;
	}

	.carousel-caption h1 {
	   font-size: 32px;
	}

	.carousel-caption .lead,
	.carousel-caption .btn {
		font-size: 16px;
	}

	.featurette-heading {
		font-size: 4rem;
	}

	.flex-lg {display:flex;}	
}

@media (min-width: 1600px) {


}