/* ARTICLE */
.article-home {
    background: url('../jpg/home-intro.jpg') no-repeat bottom center #0a1946;
    padding-bottom: 15px;
}

/* BANNERS */
.banners-home {
	width: 100%;
}
	.banners-home.benevolat {
	    background: url('../png/benevolat.png') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
  	}
	.banners-home.shop {
	    background: url('../png/shop.png') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
  	}
	.banners-home.rs-facebook {
	    background: url('../jpg/rs-facebook.jpg') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
  	}
	.banners-home.rs-instagram {
	    background: url('../jpg/rs-instagram.jpg') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
  	}

.banners-home .container {
	text-align: center;
	padding: 30px 0;
}
	.banners-home .container a {
		display: inline-block;
		font-size: 15px;
		font-family: 'Trade Hv';
		text-transform: uppercase;
		margin-top: 5px;
		padding: 8px 50px;
		text-shadow: 0px 1px 2px rgba(150, 150, 150, 1);
	}
		.banners-home.benevolat .container a {
			background: #009de2;
			color: #FFF;
		}
		.banners-home.shop .container a {
			background: #009de2;
			color: #FFF;
		}

.banners-home-rs {
	width: 100%;
	display: flex; display: -webkit-flex; 
	flex-flow: row wrap; -webkit-flex-flow: row wrap;
	justify-content: flex-start; -webkit-justify-content: flex-start;
}
	.banners-home-rs .banners-home {
		width: 50%;
	}
		.banners-home-rs .banners-home .container {
			text-align: center;
			padding: 15px 0;
			display: block;
		}

/* FEEDS COMMUNITY WALL */
.feeds-home {
	width: 100%;
	display: flex; display: -webkit-flex; 
	flex-flow: row wrap; -webkit-flex-flow: row wrap;
	justify-content: space-around; -webkit-justify-content: space-around;
}
	.feeds-home .feeds-col {
		margin: 7px 0;
		width: 33%;
		display: flex; display: -webkit-flex; 
		flex-flow: row nowrap; -webkit-flex-flow: row nowrap;
		justify-content: space-around; -webkit-justify-content: space-around;
	}

/* MODULE */
.mod-wrapper {
	width: 100%;
}
	.mod-wrapper .title-wrapper .title {
		font-size: 44px;
		line-height: 1.0;
		font-family: 'Trade HvCn';
		color: #FFF;
		padding: 14px 65px;
		text-transform: uppercase;
	/*	text-shadow: 0px 1px 2px rgba(150, 150, 150, 1); */
	}
		.mod-wrapper .title-wrapper .title span {
			font-family: 'Trade Cn';
		}
	.mod-wrapper .content-wrapper {
		min-height: 500px;
	}

	.mod-wrapper .title-wrapper.tickets {
        background: url('../png/tickets-title.png') no-repeat top center #0289c5;
	}
	.mod-wrapper .content-wrapper.tickets {
        background: #009de2;
	}
	.mod-wrapper .title-wrapper.community {
        background: url('../png/community-title.png') no-repeat top center #c40211;
	}
	.mod-wrapper .content-wrapper.community {
        background: #0a1946;
	}
	.mod-wrapper .title-wrapper.medias {
        background: url('../png/medias-title.png') no-repeat top center #ffffff;
	}
		.mod-wrapper .title-wrapper.medias .title {
	        color: #009de2;			
		}
	.mod-wrapper .content-wrapper.medias {
        background: #ffffff;
        padding: 0px;
	}

/*	MEDIAS 	*/
.medias-row {
	width: 100%;
	display: flex; display: -webkit-flex; 
	flex-flow: row nowrap; -webkit-flex-flow: row nowrap;
	justify-content: space-around; -webkit-justify-content: space-around;
}
	.medias-row .medias-item {
		display: block;
		width: 100%;
		height: 250px;
		position: relative;
		margin: 0;
		display: flex; display: -webkit-flex; 
		flex-flow: row wrap; -webkit-flex-flow: row wrap;
		justify-content: space-around; -webkit-justify-content: space-around;
	}
		/* HEAD > Première vignette */
		.medias-row .medias-item.head-video {
	        background: #9b0d10; 
/*	        background: url('../../_img/medias-wall/home-videos.png') no-repeat center center;  */
	        background-size: cover;
		}
		.medias-row .medias-item.head-album {
	        background: #009de2; 
/*	        background: url('../../_img/medias-wall/home-albums.png') no-repeat center center; */
	        background-size: cover;
		}
		.medias-row .medias-item.head-instagram {
	        background: url('../jpg/home-instagram.jpg') no-repeat center center; 
	        background-size: cover;
		}
		.medias-row .medias-item .logo {
			height: 120px;
			width: 120px;
			margin: auto;
		}
			.medias-row .medias-item .logo img {
				height: 120px;
				width: 120px;
			}
		.medias-row .medias-item .link {
			width: 100%;
			display: block;
			text-align: center;
			font-size: 14px;
			line-height: 1.0;
			padding: 10px 0;
			font-family: 'Trade Regular';
			color: #FFF;
			text-transform: uppercase;
			text-decoration: underline;
			position: absolute;
			bottom: 20px;
		}

	/*	ITEM > no hover */
	.medias-row .medias-item .inside {
		-webkit-animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		-moz-animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 10;
	}

	/* 	ITEM > hover */
	.medias-row .medias-item .inside-hover {
		display: none;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 10;
	}

		.medias-item .picture-wrapper {
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			z-index: 10;
			opacity: 1.0;
			overflow: hidden;
			text-align: center;
			display: flex; display: -webkit-flex; 
			flex-flow: column; -webkit-flex-flow: column;
			justify-content: space-around; -webkit-justify-content: space-around;
		}
			.medias-item .picture-wrapper img {
				height: auto;
				width: 100%;
			}

		.medias-row .medias-item .small-icon {
			position: absolute;
			bottom: 20px;
			right: 20px;
			width: 30px;
			height: 30px;
			z-index: 12;
		}
			.medias-row .medias-item .small-icon img {
				height: 30px;
				width: 30px;
			}

		.medias-row .medias-item .date {
			position: relative;
			margin: auto;
			margin-bottom: 0px;
			width: 100%;
			font-family: 'Trade Bold';
			font-size: 14px;
			text-transform: uppercase;
			color: #FFF;
			text-align: center;
			line-height: 1.0;
			z-index: 12;
			padding-bottom: 7px;
		}
			.medias-row .medias-item .date.red {
				color: #db0011;
			}
			.medias-row .medias-item .date.green {
				color: #047cb1;
			}
			.medias-row .medias-item .date.yellow {
				color: #fff;
			}
		.medias-row .medias-item .name {
			position: relative;
			margin: 0 auto;
			width: 100%;
			font-family: 'Trade Bold';
			font-size: 16px;
			text-transform: uppercase;
			color: #FFF;
			text-align: center;
			line-height: 1.0;
			z-index: 12;
			padding: 0 20px 30px;
		}
			.medias-row .medias-item .name img {
				height: 16px;
				width: 16px;
				margin: 0 4px;
			}
		.medias-row .medias-item .large-icon {
			position: relative;
			margin: auto;
			margin-top: 0px;
			width: 90px;
			height: 90px;
			z-index: 12;
		}
			.medias-row .medias-item .large-icon img {
				margin: auto;
				height: 90px;
				width: 90px;
			}

		.medias-item .picture-overlay {
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			z-index: 11;
			opacity: 0.4;
			background: #000;
		}

	.medias-item:hover .inside {
		-webkit-animation: flip-out-diag-1-bl 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		-moz-animation: flip-out-diag-1-bl 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: flip-out-diag-1-bl 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	}
	.medias-item:hover .inside-hover {
		display: block;
		-webkit-animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		-moz-animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}	