/* =============================================================================
   CONTENT
   ========================================================================== */
#community {
	position: relative;
	float: left;
	width:100%;
	color:#fff;
	padding:10px 0px 50px 0px;
}

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

#community .bloc {	
	position: relative;
	float:left;	
	display: inline-block;
	margin-bottom:20px;	
	background: rgba(0,0,0,0.8);
}
   
#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 {
	min-height:38px;
	z-index:10;
	padding:9px 0px 0px 12px;
	font-family: 'fuji-reg', Arial, "Helvetica CY", Helvetica, sans-serif;
	font-size:20px;
	line-height:1.1em;
	font-weight: normal;
	font-style: normal;		
	text-transform:uppercase;	
}
#community .bloc-title a {
	position:relative;
	width:100%;
	display:block;
	color:#fff;
	text-decoration:none;
	opacity:1;
}
#community .bloc-title a:hover {
	opacity:0.8;
}

#community .bloc-title i {
	font-size:24px;
	color:#fff;
	margin-right:3px;
}

#community .bloc-content {
	width:100%;
	position:relative;
	overflow:hidden;
	padding:15px;
	font-size:13px;	
}

#community .bloc:before,
#community .bloc:after {
	content:'';
	display:block;
	width:126px;
	height:61px;
	position: absolute;
	top:0;
	z-index:1;
}
#community .bloc:before {
	left:0;
	background: url(../img/deco-block-left.png) no-repeat center center;
}
#community .bloc:after {
	right:0;
	background: url(../img/deco-block-right.png) no-repeat center center;
}



/* =============================================================================
   BLOC FACEBOOK & TWITTER
   ========================================================================== */
#community .bloc#community_facebook, 
#community .bloc#community_twitter {
	width:48.5%;
}
#community .bloc#community_facebook {
	margin-right:1%;
}
#community .bloc#community_twitter {
	margin-left:1%;
}
#community_facebook .bloc-content, 
#community_twitter .bloc-content {
	height:340px;
	padding:0px 10px 10px 10px;
}

/* =============================================================================
   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;
}

/* =====================================================================
   BLOC YOUTUBE
   ================================================================== */
#community .bloc#community_youtube {
	width:48.5%;
	margin-right:1%;
	height:220px;
}
#community_youtube .bloc-content {	
	/* border-top:1px solid rgba(255,255,255,0.8); */
	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%;
}
.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 {
    width:45px;
    height:30px;
	top:0;
	bottom:15px;
    left:0;
    right:0;
    margin:auto;
    position:absolute;  
    z-index:2;
    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: 'fuji-reg', Arial, "Helvetica CY", Helvetica, sans-serif;
  text-transform:uppercase;
  background:rgba(255,255,255,0.7);
  color: #000;
  font-size: 14px;
  line-height:16px;
  text-align:center;	
  padding:8px 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_forum {
	width:23.5%;
	height:180px;
	margin-left:1%;
}
#community .bloc#community_steam, #community .bloc#community_fankit {
	 width:23.5%; 
	/*width:48.5%;*/
	height:180px;
	margin-left:1%;
}
#community_forum .bloc-content,
#community_fankit .bloc-content,
#community_steam .bloc-content {
	position: relative;
  overflow:hidden;
	/* border-top:1px solid rgba(255,255,255,0.8); */
	height:182px;
	padding:0px;
}
#community_fankit .bloc-content img, 
#community_forum .bloc-content img, 
#community_steam .bloc-content img {
	position: absolute;
	top:50%;
	left:0px;
	transform:translateY(-50%);
	min-width:101%;
	min-height:101%;
	opacity:1;
	transition: all 0.3s ease;
}
#community_fankit .bloc-content img{
	left: -58%;
}
#community_fankit.bloc-content:hover img,
#community_forum .bloc-content:hover img,
#community_steam .bloc-content:hover img {
	opacity:0.6;
}





/* =============================================================================
   MEDIAQUERIES 
   ========================================================================== */
@media screen and (max-width: 1220px) {   
	#community {
		padding:0 20px;
	}
}
@media screen and (max-width: 1000px) {   
	.community_youtube_play {
    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: 768px) and (max-width: 1220px) {   
	#community .bloc#community_facebook {
		width:47.5%;
		margin-left:1%;
	}
}
@media screen and (min-width: 768px) and (max-width: 1000px) {   
  #community .bloc-title a {
		font-size:15px;
	}
	#community .bloc-title i {
		font-size:15px;
	}	
	#community .bloc#community_forum,  
	#community .bloc#community_fankit,  
	#community .bloc#community_steam	{
		height:160px;
	}
}
	 
	 
@media screen and (max-width: 767px) {   
	#community .bloc#community_facebook, 
	#community .bloc#community_twitter, 
	#community .bloc#community_youtube, 
	#community .bloc#community_forum,  
	#community .bloc#community_fankit,  
	#community .bloc#community_steam	{
		width:48%;
		margin:1%;
	}
	#community .bloc#community_youtube, 
	#community .bloc#community_forum,  
	#community .bloc#community_fankit,  
	#community .bloc#community_steam	{
		height:220px;
	}
}

@media screen and (max-width:580px) {
	
	#community_forum .bloc-content, 
	#community_steam .bloc-content {
		height:180px !important;
	}
	#community .bloc#community_facebook, 
	#community .bloc#community_twitter, 
	#community .bloc#community_youtube, 
	#community .bloc#community_forum,  
	#community .bloc#community_fankit,  
	#community .bloc#community_steam	{
		width:96%;
		margin:2%;
	}
	#community .bloc#community_forum,
	#community .bloc#community_fankit,
	#community .bloc#community_steam {
		height:auto;
	}
	
}