/* =============================================================================
   CONTENT
   ========================================================================== */
#community-content {
	position: relative;
	width:100%;	
}
   
/* =============================================================================
   BLOCS : STYLES GENERIQUES
   ========================================================================== */

#community .bloc {
	display: inline-block;
	position: relative;
	width:50%;
	padding-right:15px;
}
   
#community .separateur {
	position:relative;
	float: left;
	width:100%;
	display:none;
	padding:0;	
}

#community .bloc-title, 
#community .bloc-content {
  display:    inline-block;
  float:      left;
  position:   relative;
  width:      100%;
}

#community .bloc-title {
	position:relative;
	height:38px;
	padding:6px 0px 0px 7px;
	font-family: 'dark11', Arial, "Helvetica CY", Helvetica, sans-serif;
	font-size:20px;
	line-height:1.1em;
	font-weight: normal;
  font-style: normal;		
	text-transform:uppercase;		
	/* background: transparent url(../img/community/title.jpg) top left repeat-x; */
	background: rgba(12,51,69,0.8);
	background: -moz-linear-gradient(left, rgba(12,51,69,0.8) 57%, rgba(12,51,69,0.02) 99%, rgba(12,51,69,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(57%, rgba(12,51,69,0.8)), color-stop(99%, rgba(12,51,69,0.02)), color-stop(100%, rgba(12,51,69,0)));
	background: -webkit-linear-gradient(left, rgba(12,51,69,0.8) 57%, rgba(12,51,69,0.02) 99%, rgba(12,51,69,0) 100%);
	background: -o-linear-gradient(left, rgba(12,51,69,0.8) 57%, rgba(12,51,69,0.02) 99%, rgba(12,51,69,0) 100%);
	background: -ms-linear-gradient(left, rgba(12,51,69,0.8) 57%, rgba(12,51,69,0.02) 99%, rgba(12,51,69,0) 100%);
	background: linear-gradient(to right, rgba(12,51,69,0.8) 57%, rgba(12,51,69,0.02) 99%, rgba(12,51,69,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c3345', endColorstr='#0c3345', GradientType=1 );
	
}
#community .bloc-title:before {
	content:'';
	display:block;
	width:100%;
	height:1px;
	position: absolute;
	left:0;
	right:0;
	top:0px;
	background: rgba(230,183,30,0.8);
	background: -moz-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(57%, rgba(230,183,30,0.8)), color-stop(99%, rgba(230,183,30,0.02)), color-stop(100%, rgba(230,183,30,0)));
	background: -webkit-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: -o-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: -ms-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: linear-gradient(to right, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6b71e', endColorstr='#e6b71e', GradientType=1 );
}
#community .bloc-title:after {
	content:'';
	display:block;
	width:100%;
	height:1px;
	position: absolute;
	left:0;
	right:0;
	bottom:0px;
	background: rgba(230,183,30,0.8);
	background: -moz-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(57%, rgba(230,183,30,0.8)), color-stop(99%, rgba(230,183,30,0.02)), color-stop(100%, rgba(230,183,30,0)));
	background: -webkit-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: -o-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: -ms-linear-gradient(left, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	background: linear-gradient(to right, rgba(230,183,30,0.8) 57%, rgba(230,183,30,0.02) 99%, rgba(230,183,30,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6b71e', endColorstr='#e6b71e', GradientType=1 );
}

#community .bloc-title a {
	color:#ddd;
	text-decoration:none;
}
#community .bloc-title a:hover {
	color:#fff;
}

#community .bloc-title i {
	font-size:24px;
}

#community .bloc-content {
	width:100%;
	position:relative;
	overflow:hidden;
	background: rgba(0,0,0,0.8);
	padding:15px;
	margin-bottom:15px;
	font-size:13px;
}



/* =====================================================================
   BLOC YOUTUBE
   ================================================================== */
#community .bloc#community_youtube {
	width:29%;
}
#community_youtube .bloc-title i {
	color:#c6312b;
}
#community_youtube .bloc-content {
	padding:0;
	height:auto;
}

#community_youtube_playlist {
	position:relative;
	float:left;
	width:100%;
	height:180px;
	padding:10px;
}
#community_youtube_playlist a:hover {
	background-color: rgba(255,255,255,0.15);
	color:#363f5e;
}
#community_youtube_playlist a:hover img {
	zoom: 1;
	opacity: 1;
}
#community_youtube_playlist a:hover .fa-youtube-play  {
  color:#c6312b;
	opacity:1;
}
.screens_bloc:hover .community_youtube_play{
	background: #c6312b; 
}

#community_youtube_pages {
  position:relative;
  width:100%;
	margin-bottom:35px;
}
.community_youtube_bloc { 	
	position:relative;
	display:inline-block;
  float:left;  
  width:33%;
  height:auto;
}
.community_youtube_bloc a {
  display:block;
  float:left;
  position:relative;
  width:100%;
  height:auto;
  padding:8px;  
}
.community_youtube_img {
  position:relative;
	z-index:0;
	float:left;
  width:100%;
  overflow:hidden;
  background-color: #000000;
}
.community_youtube_img img {
  z-index:0;
	margin-top:-9%;
  width:100%;
}

.community_youtube_play {
	position:absolute;   
  z-index:2;
	top:25%;
  left:0;
	right:0;
	margin:auto;
  width:45px;
	height:30px;
	text-align:center;  
  opacity:0.8;
	transition: all 0.3s ease;
	background: rgba(30,30,30,0.95);
	border-radius: 7px;	
	padding:6px 0px 0px 2px;
}
.community_youtube_play i {	
  font-size: 18px;
	color: #fff;
}
.community_youtube_bloc:hover .community_youtube_play {
	opacity:0.95;
	background: #CC181E;
}

.community_youtube_title {
  position:relative;
	z-index:10;
  float:left;
	margin-top:-10.5%;
  width:100%;
	height:30px;
  font-family: 'helioscondregular', Arial, "Helvetica CY", Helvetica, sans-serif;
  text-transform:uppercase;
  background:rgba(12,51,69,0.8);
  color: #ddd;
  font-size: 13px;
  line-height:16px;
  text-align:center;	
  padding:7px 6px 0px 6px; 
  overflow:hidden;
}

#community_youtube_controls {
	position:absolute;
	display:block;
	z-index:25;
	bottom:15px;
	left:0px;
	width:100%;
	height:30px;
	text-align:center;
}

#community_youtube_next, #community_youtube_prev {
	position: absolute;
	z-index:4;
  bottom: 0px;
  cursor: pointer;
	font-size: 14px;
	vertical-align: top;
	text-align:center;
	padding: 6px 14px 4px 10px;	
	color:#fff;
	font-family: 'helioscondregular', Arial, "Helvetica CY", Helvetica, sans-serif;
	background:rgba(12,51,69,0.8);
	text-transform: uppercase;
}
#community_youtube_next {
    right: 22px;
}
#community_youtube_prev {
    left: 18px;
}
#community_youtube_prev:hover,
#community_youtube_next:hover {
  background: #ccc;
	color:#000;
}

#community_youtube_pagination {
	position:relative;
	margin:auto;
	width:auto;
}
#community_youtube_pagination div {
	position:relative;
	display:inline-block;
	padding:0 3px;
	font-style:normal;
	text-shadow: 0 -1px 0 rgba(0,0,0,.35);
	font-family:sans-serif;
	cursor:pointer;
	font-size:35px;
	color:rgba(12,51,69,0.8);
}
#community_youtube_pagination div.active {
	color:#fff;
}

/* =============================================================================
   BLOC FORUM & STEAM HUB
   ========================================================================== */
#community .bloc#community_steam, 
#community .bloc#community_guide, 
#community .bloc#community_fankit, 
#community .bloc#community_forum {
	width:17%;
}
#community_steam .bloc-content, 
#community_fankit .bloc-content, 
#community_guide .bloc-content, 
#community_forum .bloc-content {
	height:180px;
	padding:0px;
}
#community_steam .bloc-title i, 
#community_guide .bloc-title i, 
#community_fankit .bloc-title i, 
#community_forum .bloc-title i {
	color:#fff;
}
#community_steam .bloc-content img, 
#community_guide .bloc-content img, 
#community_fankit .bloc-content img, 
#community_forum .bloc-content img {
	position:absolute;
	left:50%;
	opacity:1;
	transform: translateX(-50%); 
	transition: all 0.3s ease;
}
#community_steam .bloc-content:hover img, 
#community_guide .bloc-content:hover img, 
#community_fankit .bloc-content:hover img, 
#community_forum .bloc-content:hover img {
	opacity:0.5;
}

/* =============================================================================
   BLOC FACEBOOK & TWITTER
   ========================================================================== */
#community .bloc#community_facebook, 
#community .bloc#community_twitter {
	width:49%;
}
#community_facebook .bloc-content, 
#community_twitter .bloc-content {
	height:340px;
	padding:10px;
}
#community_facebook .bloc-title i {
	color:#5f7cb6;
}
#community_twitter .bloc-title i {
	color:#4cb4d3;
}


/* =============================================================================
   SOCIAL FEED
   ========================================================================== */   
   
/* Plugin styles */
.social-feed-element.hidden{
    background-color:red !important;
}
.social-feed-element .pull-left{
    float:left;
    margin-right: 10px;
}
.social-feed-element .pull-right {
    margin-left: 10px;
}
.social-feed-element img {
    width: 100%;
    width: auto\9;
    height: auto;
    border: 0;  
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}
.social-feed-element .attachment {
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

/* Link styles */
.social-feed-element a {
    color: #0088cc;
    text-decoration: none;
}
.social-feed-element a:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.social-feed-element a:hover,
.social-feed-element a:active {
    outline: 0;
    color: #005580;
    text-decoration: underline;
}

/* Text styles */
.social-feed-element small {
    font-size: 85%;
}
.social-feed-element strong {
    font-weight: bold;
}
.social-feed-element em {
    font-style: italic;
}
.social-feed-element p {
    margin: 0 0 10px;
}
.social-feed-element .media-body > p{
    margin-bottom:4px;
    min-height:20px;
}
.social-feed-element p.social-feed-text {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* Message styles */
.social-feed-element,
.social-feed-element .media-body {
    overflow: hidden;
    zoom: 1;
    *overflow: visible;
}
.social-feed-element .media-body .social-network-icon{
    margin-top: -3px;
    margin-right:5px;
    width:16px;
}
.social-feed-element .media-body div{
    color:#666;
    line-height: 20px;
}
.social-feed-element:first-child {
    margin-top: 0;
}
.social-feed-element .media-object {
    display: block;
    width:48px;
    border-radius:50%;
}
.social-feed-element .media-heading {
    margin: 0 0 5px;
}
.social-feed-element .media-list {
    margin-left: 0;
    list-style: none;
}

.social-feed-element .muted {
    color: #999;
}
.social-feed-element a.muted:hover,
.social-feed-element a.muted:focus {
    color: #808080;
}

.social-feed-element{    
	display:inline-block;
	box-shadow: 0 0 10px 0 rgba(10, 10, 10, 0.2);
	transition: 0.25s;
	-webkit-backface-visibility: hidden;
	margin:-1px;
	margin-top:25px;
	background-color: #fff;
	color: #333;
	text-align:left;
	font-size: 14px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 16px;		
}
.social-feed-element:hover{
    box-shadow: 0 0 20px 0 rgba(10, 10, 10, 0.4);
}

.social-feed-element .content{
    padding:15px;
}
.social-feed-element .social-network-icon{
    opacity:0.7;
}


.social-feed-element .author-title{
    color: #444;
    line-height: 1.5em;
    font-weight: 500;  
}


/* =============================================================================
   SOCIAL FEED CUSTOM
   ========================================================================== */   
.social-feed-element{  
	width:100%;
	background-color: rgba(255,255,255,0.1);
	color: #fff;
}

.social-feed-element .fa-twitter {  
	font-size:25px;
}
.social-feed-element .pull-left{

}
.social-feed-element .author-title{
	color:#009de0;
	/*color:#bbb;*/
}
.social-feed-element .fa {  
	font-size:25px;
	display:none;
}
.social-feed-element .fa-facebook {
	/* padding: top right bottom left; */
	width:28px;
	font-size:20px;
	line-height:26px;
	padding:2px 0px 0px 8px;
	margin-left: 1.5%;
	background: #3C5998;	
}
.social-feed-element .fa-twitter {
	width:28px;
	font-size:19px;
	line-height:26px;
	padding:2px 0px 0px 6px;
	margin-left: 1.5%;
	background: #00ABF0;
}
.social-feed-element p.social-feed-text {
  color:#fff;
}





/* =============================================================================
   MEDIAQUERIES
   ========================================================================== */  
@media screen and (min-width: 769px) and (max-width: 1000px) {   
	.community_youtube_play {
		top:0;
		bottom:10px;
    width:35px;
    height:25px;
    padding:5px 0px 0px 2px;
	}
	.community_youtube_play i {	
		font-size: 15px;
	}
	.community_youtube_title {
		height:40px;
		font-size: 11px;
		padding:4px 6px 0px 6px; 
	}
}
@media screen and (min-width: 501px) and (max-width: 768px) {   
	#community #community-content .bloc {
			width:45%;
			padding-right:0;
			margin: 0 2%;
	}
	#community #community-content .bloc#community_youtube {
			width:96%;
			display:block;
			margin:auto;
			padding-right:0;
	}
	#community_youtube_playlist {
		height:220px;
	}

}
@media screen and (max-width:500px) {
    #community #community-content .bloc {
        width:90%;
        display:block;
        margin:auto;
        padding-right:0;
    }
    .bloc-content a {
        display:block;
    }
    .bloc-content img {
        width:100%;
    }   
		
		#community_steam .bloc-content, 
		#community_fankit .bloc-content, 
		#community_guide .bloc-content, 
		#community_forum .bloc-content {
			height:auto;
		}
		#community_steam .bloc-content img, 
		#community_guide .bloc-content img, 
		#community_fankit .bloc-content img, 
		#community_forum .bloc-content img {
			width:100%;
			position:relative;
			margin-bottom:-3px;
		}
		
		.community_youtube_play {
			top:0;
			bottom:10px;
			width:35px;
			height:25px;
			padding:5px 0px 0px 2px;
		}
		.community_youtube_play i {	
			font-size: 15px;
		}
		.community_youtube_title {
			height:40px;
			font-size: 11px;
			padding:4px 6px 0px 6px; 
		}
		
}