@charset "UTF-8";
/* CSS Document */



body {
	font-family: 'Roboto Slab', serif;
	}

.content_bg h2 {
	font-size: 1.9em;
	color: #FFF;
	}

h2 {}

h4 {
	font-family: 'Dancing Script', cursive;}
	
.col_1_1 {
	width: 100%;}
	
.col_1_2 {
	width: 50%;
	float: left;}

.col_1_3 {
	width: 33.333%;
	float: left;}

.col_1_4 {
	width: 25%;
	float: left;}

.col_1_5 {
	width: 20%;
	float: left;}
	
	.col_1_6 {
		width:16.666%;
		float: left;}
	
.col_2_3 {
	width: 66.6666%;
	float: left;}
	
.col_3_4 {
	width: 75%;
	float: left;
	}
	
.col_1_40 {
	width: 40%;
	float: left;}

.col_1_60 {
	width: 60%;
	float: left;}
	
	.col_1_60 h2 {
		margin-top: 25px;
		float: right;}
	
	.col_1_60 iframe {
		float: right;}
.clear {
	clear:both;}
	
.story { 
	padding: 0; margin: 0; width: 100%; max-width: 2000px; position: relative; margin: 0 auto;box-shadow: 0 0 5px rgba(0,0,0,0.2);
	background-position: fixed;
	}	

.content {
	max-width:900px;
	margin: auto;}
	
	.invisible, .invisible:focus, .invisible:hover, .invisible:active {
		color: #000;}
		
		
	.btn_cookie {
		-moz-user-select: none;
		background-image: none;
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		margin-bottom: 0;
		border-radius: 4px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		background-color: #FFF;
		border: 1px solid #DDD;
		color: #000;
		font-size: 13px;
		min-width: 5px;
		width: auto;
		line-height: 1.8;
		padding: 0 6px;
		margin-left:4px;
		margin-top:0;
		}	
		
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																				  INTRO BG IMAGE				
																																							****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/	

.container_voeux {
	display:flex;
	width:100%;
	top:-9999px;
	opacity:0;
	z-index:100000;
	justify-content:center;
	align-content:center;
	position:fixed;
		transition:all 2s ease-in-out;
	animation:voeux 2.1s forwards;
	}
.voeux {
	width: 321px;
	height:502px;
	z-index:100000;}
	
	
	.close {
		background:url(../img/button-close-voeux.png);
		width:27px;cursor: pointer;
    margin-top: 479px;
    position: absolute;
    z-index: 10000000;
    margin-left: 147px;
    height: 27px;}
		
		.voeux img {
			z-index:1;}
	
	
@-webkit-keyframes voeux {
	20% { 
		top:-9999px;}
	80% { 
	opacity:1;
		top:-1000px;}	
	100% {
		top:0;}
}

@keyframes voeux {
	20% { 
		top:-9999px;}
	70% { 
	opacity:1;
		top:-1000px;}	
	100% {
	opacity:1;
		top:0;}
}

	.remove-voeux .voeux{
		margin-top:-9999px !important;
		opacity:0;
		transition:all 2s ease-in-out;}
#container_bg {
	height: 600px;}
.bg_labelcom {
	background:url(../img/bg_agence_label_communication_nantes_v2.jpg) no-repeat transparent;
	background-position: right 0px top 0px;
	background-size: cover;
	top: 0;
	position: fixed;
	max-width: 1900px;
	max-height: 936px;
	height: 600px;
	width: 100%;
	}
	
	.bg_labelcom .content_bg {
		width: 100%;
		margin: auto;
		padding-top: 125px;
		text-align: center;}
		
		.bg_labelcom .content_bg img {
			margin-bottom:60px;}
			
			.red {
				color: #f1252c;
				}
	
	
	#serbotel {
		z-index:10000000;
		position: fixed;
		top: 2%;
		left: 2%;
		}
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																				  HEADER HEADER				
																																							****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

.header_accueil {
	background-color:#2C2C2C;
	height: 50px;
	}
	
	.header {
		top:0;
	position: fixed;
	z-index: 100000;
	background-color:#2C2C2C;
	height: 95px;
	}
	
	.header img {
	margin-top: 15px;
	}
			
		nav {
			display: table;
			height: 50px;
			margin: auto;}
		
		nav ul {
			width: 100%;
			text-align: center;
			margin: auto;}
		
			nav ul li {
				font-size: 1em;
				padding: 0 5px;
				height: 50px;
				display: table-cell;
				text-align: center;
				text-transform: uppercase;
				line-height: 50px;
				float: left;}
				
				
				.header nav ul li {
				height: 95px;
				line-height: 95px;}
				
				.header nav ul li:first-child {
				margin-right: 10px;}
			nav ul li a {
					color:  #FFF;}
			nav ul li:first-child {
				padding-left:0px;
				}
				
			nav ul li:last-child {
				padding-right: 0px;}
				
			/* Effect 1: Brackets */
			.cl-effect-1 a::before,
			.cl-effect-1 a::after {
				display: inline-block;
				opacity: 0;
				-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
				-moz-transition: -moz-transform 0.3s, opacity 0.2s;
				transition: transform 0.3s, opacity 0.2s;
			}
			
			.cl-effect-1 a::before {
				margin-right: 10px;
				content: '[';
				color: #f1252c;
				-webkit-transform: translateX(20px);
				-moz-transform: translateX(20px);
				transform: translateX(20px);
			}
			
			.cl-effect-1 a::after {
				margin-left: 10px;
				content: ']';
				color: #f1252c;
				-webkit-transform: translateX(-20px);
				-moz-transform: translateX(-20px);
				transform: translateX(-20px);
			}
			
			.header .cl-effect-1 ul li:first-child a:hover::before,
			.header .cl-effect-1 ul li:first-child a:hover::after,
			.header .cl-effect-1 ul li:first-child a:focus::before,
			.header .cl-effect-1 ul li:first-child a:focus::after
			{
				opacity: 0;}
			
			.cl-effect-1 a:hover::before,
			.cl-effect-1 a:hover::after,
			.cl-effect-1 a:focus::before,
			.cl-effect-1 a:focus::after {
				opacity: 1;
				-webkit-transform: translateX(0px);
				-moz-transform: translateX(0px);
				transform: translateX(0px);
			}
			
			.cl-effect-1 .none:hover::before,
			.cl-effect-1 .none:hover::after,
			.cl-effect-1 .none:focus::before,
			.cl-effect-1 .none:focus::after {
				opacity: 0;
				}
				
			.active::before {
				margin-right: 10px;
				content: '[';
				color: #f1252c;
			}
			
			.active::after {
				margin-left: 10px;
				content: ']';
				color: #f1252c;
			}
			
			.active {
				color: #F1252C;}
				
				/* **********************
------------------------
	MENU RESPONSIVE
------------------------
********************** */
#nav-trigger {
  display: none;
  text-align: center;
  box-sizing: border-box; }
  #nav-trigger span {
	  box-sizing: border-box;
    display: inline-block;
    padding: 10px 20px;
    background-color: #2C2C2C;
    color: white;
	letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase; }
    #nav-trigger span:after {
	  box-sizing: border-box;
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 10px;
      content: "";
      border-left: solid 10px transparent;
      border-top: solid 10px #fff;
      border-right: solid 10px transparent; }
    #nav-trigger span:hover {
		box-sizing: border-box;
      background-color: #F1252C; }
    #nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
	  box-sizing: border-box;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent; }
	 

nav#nav-mobile {
  display: none; }
  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
	width: 300px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #2C2C2C; }
  nav#nav-mobile li {
    display: block;
	width: 300px;
	font-size: 13px;
	text-align: center;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
    border-bottom: solid 1px #2C2C2C; }
    nav#nav-mobile li:last-child {
      border-bottom: none; }
  nav#nav-mobile a {
    display: block;
    color: white;
	text-align: center; }
    nav#nav-mobile li:hover a{
      background-color: #fff;
      color: #F1252C; }
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																	ACCUEIL CHIFFRES CHIFFRES				
																																							****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/	


#numbers {
	height: 200px;
	width: 100%;
	background:#f1252c;}
	
	#numbers h3 {
		text-align: center;
		font-size: 2.938em;
		margin-top: 50px;
		font-weight: 300;
		color: #FFF;}
		
	#numbers p {
		text-align: center;
		font-size: 1.188em;
		color: #000;}

/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																			ACCUEIL TEXTE TEXTE				
																																							****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

#texte {
	background: #FFF;
	height: auto;
	width: 100%;
	padding: 60px 0 0 0;}
	
	.padding_right h2, .padding_right p {
		padding-right: 20px;}
		.col_1_3 h4 {
			font-size:1.5em;
			
	font-family: 'Roboto Slab', serif;
			color:#000;}
	#texte h5 {
		font-size: 30px;
		font-family: 'Dancing Script', cursive;
		font-weight: 300;
		letter-spacing: 1px;
		text-align: center;
		padding-top: 60px;}
		
	.frise {
		background:url(../img/frise_nantes_label_communication_2.png);
		background-size: cover;
		width: 100%;
		margin-top: 40px;
		max-height: 242px;
		height: 242px;
		opacity: 0.2;
		}
		
	.petit_beurre {
		z-index: 999;
		position: absolute;
		margin-top: 43px;
		background:url(../img/petit_beurre_lu_nantes.png);
		width: 350px;
		max-height: 257px;
		height:257Px;
		right: 4%;}
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																		ACCUEIL LA TEAM LA TEAM				
																																							****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

#team {
	background: #000;
	height: auto;
	width: 100%;
	padding: 60px 0;
	}
		
	#team p {
		color: #FFF;
		text-align: center;
	}
	#team h6 {
		font-size: 20px;
		font-weight: 300;
		color:#FFF;
		letter-spacing: 1px;
		text-align: center;
		margin-bottom: 40px;
		}
	
	.membre_2 {
		border-radius: 73.5px;
		height: 147px;
		width: 147px;
		text-align: center;
		margin: auto; }
		
		
	.membre_3 {
		margin: 60px;
		border-radius: 73.5px;
		height: 147px;
		width: 147px;
		text-align: center;
		margin: auto; }
		
		#stephane {
			background-image:url(../img/stephane_dirigeant_label_communication_nantes.jpg);
			margin-right: 13.333%;}
	
		#guillaume {
			background-image:url(../img/guillaume_graphiste_label_communication_nantes.jpg);
			margin-left: 13.333%;}	
			
		#laurie {
			background-image:url(../img/laurie_developpeur_nantes_label_communication.jpg)}
	
		#vanessa {
			background-image:url(../img/vanessa_conseil_client_label_communication_nantes.jpg);}
			
		#audrey {
			background-image:url(../img/audrey.jpg);}
			
		
		.metier {
			position: absolute;
			width: 77px;
			height: 77px;
			border-radius: 37.5px;
			background-color: #F1252C;
			margin-top: -30px;
			margin-left: -30px;
			text-align: center;
			color: #FFF;
			font-size: 12Px;
			font-weight: 400;
			}
			
		#sld_metier {
			line-height: 77px;}
			
			.two_lines p{
				margin-top: 20px;}
				
				
				/*** EFFET HOVER ***/
				
				.membre {
					cursor:pointer;
					background-size:100%;
					background-position: center;
					transition:all 0.5s ease-in-out;
				}
					
				.membre:hover {
					background-size:108%;
				 }
				
				
				#page_404 p {color:#FFF;}
				
				.twitter {
					margin: auto;
					text-align: center;}
				
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																				AGENCE AGENCE
																																			
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

.content_img {
	
	}
	
	#texte_agence {
	background: #FFF;
	height: auto;
	width: 100%;
	padding: 60px 0;} 
	
	#img_agence {
		background:url(../img/equipe_label_communication_vintage.jpg) no-repeat;
		background-position: 50% 80%;
		background-origin:padding-box;
		background-size: cover;
		max-width: 2200px;
		max-height: 400px;
		height:420px;
		width: 100%;
		}
		
		#img_agence h2 {
			font-size: 35px;
			text-shadow: 2px 2px 0 rgba(0,0,0,1);
			color: #FFF;
			text-align: center;
			padding-top: 280px;}

		.img_scotch {
			text-align: center;
			margin-top: -35px;
			padding-bottom: 30px;
			}
				
		#texte_2 {
		background: #DBDBDB;
		height: auto;
		width: 100%;
		padding: 60px 0 0 0;}
		
		#section_stephane {
			background: #000;
			height: auto;
			color: #FFF;
			width: 100%;
			padding: 60px 0;
			}
			
			.invisible_blanc {
				color: #FFF}
			
		#section_guillaume {
			background: #FFF;
			height: auto;
			color: #000;
			width: 100%;
			padding: 60px 0;
			}
		
		#section_laurie {
			background: #000;
			height: auto;
			color: #FFF;
			width: 100%;
			padding: 60px 0;
			}
		
		#section_audrey {
			background: #FFF;
			height: auto;
			color: #000;
			width: 100%;
			padding: 60px 0;
			}
		
		#section_vanessa {
			background: #000;
			height: auto;
			color: #FFF;
			width: 100%;
			padding: 60px 0;
			}
			
			
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																			COMMUNICATION GLOBALE
																																			
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/


#img_communication {
		background:url(../img/clavier_communication_globale_label_nantes_label_communication.jpg) no-repeat;
		background-position: 50% 50%;
		background-origin:padding-box;
		background-size: cover;
		max-width: 2200px;
		max-height: 400px;
		height:420px;
		width: 100%;
		}
		
		#img_communication h2 {
			font-size: 100px;
			color: #333;
			text-shadow: 1px 1px 0 rgba(0,0,0,1);
			letter-spacing: 10px;
			text-align: center;
			padding-top: 130px;}
			
			
			.small {
				font-size: 55px;}
		#img_communication h4 {
			font-size: 30px;
			font-family: 'Roboto Slab', serif;
			color: #333;
			text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
			text-align: center;}


	#savoir {
		background: #F1252C;
		height: auto;
		width: 100%;
		padding: 30px 0;
		}

	
		#savoir h2 {
		text-align: center;
		font-size: 1.7em;
		font-weight: 300;
		color: #FFF;}
		
		#savoir p {
			text-align: center;
			font-size: 1em;
			color: #FFF;}
			
	#texte_comm {
		display: table;
		height: auto;
		width: 100%;
		padding: 50px 0;}
		
		.texte_mr {
			background:#E7E7E7;
			}
		
	.img_bs {
		background:url(../img/black_shelter_communicationglobale_nantes.jpg) no-repeat;
		background-size:contain;
		width: 100%;
		height: 508px;}
		
	.img_web_bs {
		background:url(../img/black_shelter_creation_site_web.jpg) no-repeat;
		background-size:contain;
		width: 100%;
		height: 320px;
		}
		
		
		.img_web_mr {
		background:url(../img/mutualite_retraite_site_web.png) no-repeat;
		background-size:contain;
		width: 100%;
		height: 320px;
		}
	.img_goodies_bs{
		background:url(../img/communication_globale_black_shelter_label_communication_nantes.jpg) no-repeat;
		background-size:contain;
		width: 100%;
		height: 200px;
		}
		
	.img_goodies_mr{
		background:url(../img/communication_globale_mutualite_retraite_label_communication_nantes.jpg) no-repeat;
		background-size:contain;
		width: 100%;
		height: 200px;
		}
	.bs_icon {
		font-size: 30px;
		color:#F1252C;
		margin-right: 10px;
		margin-top: 5px;
		}
		
		.identite_bs {
			margin: 40px 0;}
		
		.img_comm_globale {
			width: 160px;
			height: 160px;
			margin-bottom: 20px;
			margin-left:20px;
			}
			
			#cdv {
				background:url(../img/black_shelter/thumb_carte_visite_communication_globale_black_shelter.jpg) no-repeat;
				background-position: right;
				}
				
			#carte {
				background:url(../img/black_shelter/thumb_menu_a5_communication_globale_label_communication.jpg) no-repeat;
				background-position: right;
				}
				
			#flyer {
				background:url(../img/black_shelter/thumb_flyer_reduction_black_shelter.jpg) no-repeat;
				background-position: right;
				}
				
			#enseigne {
				background:url(../img/black_shelter/thumb_enseigne_communication_globale.jpg) no-repeat;
				background-position: right;
				}
				
			#affiche {
				background:url(../img/black_shelter/thumb_happyhour_black_shelter.jpg) no-repeat;
				background-position: right;
				}
			
			#affiche_noel {
				background:url(../img/black_shelter/thumb_black_shelter_noel_communication_globale.jpg) no-repeat;
				background-position: right;
				}
				
			.img_comm_globale .caption {
					opacity: 0;
					position: absolute;
					background:rgba(0,0,0,0.7);
					color: #FFF;
					font-size: 17px;
					font-weight: 400;
					text-transform:uppercase;
					text-align: center;
					line-height: 160px;
					max-width: 160px;
					width: 160px;
					height: 160px;
					transition:all .5s ease-out;}
					
			.img_comm_globale:hover .caption {
				opacity: 1;
			}
			
			
			#affiche_mr {
				background:url(../img/mutualite_retraite/thumb_affiche_mutualite_retraite.jpg) no-repeat;
				background-position: right;
				}
				
			#fiche_mr {
				background:url(../img/mutualite_retraite/thumb_fiche_etablissement_mutualite_retraite_nantes.jpg) no-repeat;
				background-position: right;
				}
			
			#kakemono_mr {
				background:url(../img/mutualite_retraite/thumb_kakemono_mutualite_retraite_nantes.jpg) no-repeat;
				background-position: right;
				}
			
			#pro_mr {
				background:url(../img/mutualite_retraite/thumb_plaquette_pro_mutualite_retraite_nantes.jpg) no-repeat;
				background-position: right;
				}
				
			#esa_mr {
				background:url(../img/mutualite_retraite/thumb_plaquette_esa_nantes.jpg) no-repeat;
				background-position: right;
				}
				
			#plaquette_mr {
				background:url(../img/mutualite_retraite/thumb_plaquette_structure_hebergements_nantes.jpg) no-repeat;
				background-position: right;
				}
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																			IDENTITE VISUELLE
																																			
***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************/

#img_identite {
		background:url(../img/dock_communication_globale_nantes_label_communication.jpg) no-repeat;
		background-position: 50% 50%;
		background-origin:padding-box;
		background-size: cover;
		max-width: 2200px;
		max-height: 400px;
		height:420px;
		width: 100%;
		}
		
		#img_identite h2 {
			font-size: 100px;
			color: #FFF;
			text-shadow: 1px 1px 0 rgba(0,0,0,1);
			letter-spacing: 10px;
			text-align: center;
			padding-top: 130px;}
			
		#img_identite h4 {
			font-size: 30px;
			color: #FFF;
			font-family: 'Roboto Slab', serif;
			text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
			text-align: center;}
	
			figure figcaption {
				backface-visibility: hidden;
				padding: 2em;
			}
			
			figure {
				height: 300px;
				position:relative;}
				
			figure figcaption:before, figure figcaption:after {
				pointer-events: none;
			}
			
			
			figure p {
				margin: 0;
			}
			figure p {
				font-size: 72%;
				color: #666;
				text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
				letter-spacing: 1px;
			}
			
			figcaption {
				text-align: center;
			}
			
			figcaption > div {
				bottom: 0;
				height: 18%;
				left: 0;
				position: absolute;
				width: 100%;
			}
		
		figure p{
			opacity: 0;}
			
		figure:hover p {
			opacity: 1;}
			
			
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																						PRINT
																																			
***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************/
#img_print{
		background:url(../img/pantone_communication_globale_nantes_label_communication.jpg) no-repeat;
		background-position: 50% 50%;
		background-origin:padding-box;
		background-size: cover;
		max-width: 2200px;
		max-height: 400px;
		height:420px;
		width: 100%;
		}
		
		#img_print h2 {
			font-size: 100px;
			color: #333;
			text-shadow: 1px 1px 0 rgba(0,0,0,1);
			letter-spacing: 10px;
			text-align: center;
			padding-top: 130px;}
			
		#img_print h4 {
			font-size: 30px;
			color: #333;
			font-family: 'Roboto Slab', serif;
			text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
			text-align: center;}
	

.listing {
			background: #000;
			height: auto;
			color: #FFF;
			width: 100%;
			padding: 30px 0;
			}

.listing .content p{
	text-align: center;}
	
.listing_print {
	max-width: 700px;
	margin:auto;}
.button {
	color:#FFF;
	background-color:rgba(255,255,255,0.2);
	padding: 5px 9px;
	font-size: 14px;
	line-height: 40px;
	margin-right:5px;
	border-radius: 8px;
	}


	#gallery {
		background: #FFF;
		height: auto;
		display: table;
		color: #000;
		width: 100%;
		padding: 30px 0;
		}
		
		#gallery h4 {
			font-weight: 300;
			font-size: 20px;
			font-family: 'Roboto Slab', serif;
			color:#000;}
		.img_print {
			display: table;
			height: 150px;
			text-align: center;
			margin: auto;}
			
		.img_print a {
			width: 90%;
			text-align: center;
			height:90%;
			margin: auto;}
			
		#texte_print {
			background: #EEE;
			height: auto;
			color: #000;
			width: 100%;
			padding: 50px 0;}
			
			#texte_print h4{
			font-family: 'Roboto Slab', serif;
				font-size: 25px;}
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																					MULTIMEDIA
																																			
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/



.listing_multimedia {
			background: #FFF;
			height: auto;
			color: #000;
			width: 100%;
			padding: 30px 0;
			}
			
	.listing_multimedia .content p{
		text-align: center;}	
	.multimedia {
	max-width: 700px;
	margin:auto;}
	
		.multimedia .button {
			color:#000;
			background-color:rgba(0,0,0,0.2);
			padding: 5px 9px;
			font-size: 14px;
			line-height: 40px;
			margin-right:5px;
			border-radius: 8px;
	}
	
	#img_multimedia {
		background:url(../img/multimedia_bg.jpg) no-repeat;
		background-position: 50% 50%;
		background-origin:padding-box;
		background-size: cover;
		max-width: 2200px;
		max-height: 400px;
		height:420px;
		width: 100%;
		}
		
		#img_multimedia h2 {
			font-size: 100px;
			color: #FFF;
			letter-spacing: 10px;
			text-align: center;
			padding-top: 130px;}
			
		#img_multimedia h4 {
			font-weight: 300;
			font-family: 'Roboto Slab', serif;
			font-size: 30px;
			color: #FFF;
			text-align: center;}
			
		#gallery_multimedia {
		background: #CCC;
		height: auto;
		display: table;
		width: 100%;
		padding: 30px 0;
		}
		
		
		
		#img_references {
		background:url(../img/dossier_client_references_nantes_label_communication.jpg) no-repeat;
		background-position: 50% 50%;
		background-origin:padding-box;
		background-size: cover;
		max-width: 2200px;
		max-height: 400px;
		height:420px;
		width: 100%;
		}
		
		#img_references h2 {
			font-size: 100px;
			color: #FFF;
			text-shadow: 1px 1px 0 rgba(0,0,0,1);
			letter-spacing: 10px;
			text-align: center;
			padding-top: 130px;}
			
			
			.small {
				font-size: 55px;}
		#img_references h4 {
			font-size: 30px;
			font-family: 'Roboto Slab', serif;
			color: #FFF;
			text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
			text-align: center;}

/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																				ENSEIGNE ENSEIGNE
																																			
***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************/

#label_enseigne {
	color:#90BF5E;}
	

/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																			CONTACT CONTACT
																																			
***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************/


#img_contact {
		background:url(../img/bg_contact_label_communication.jpg) no-repeat;
		background-position: 50% 50%;
		background-origin:padding-box;
		background-size: cover;
		max-width: 2200px;
		max-height: 400px;
		height:420px;
		width: 100%;
		}
		
		#img_contact h2 {
			color: #333;
			font-size: 100px;
			letter-spacing: 10px;
			padding-top: 130px;
			text-align: center;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
		}

		#img_contact h4 {
			color: #333;
			font-family: 'Roboto Slab', serif;
			font-size: 30px;
			text-align: center;
			text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
		}


.contact {
	right: 0;
	position: fixed;
	z-index: 100000000;}
	
	
	.vite {
		background:url(../img/vite_foncez_contact_label_communication_nantes.png);
		position: fixed;
		width:72px;
		top: 178px;
		transition: all 1s ease-in-out 0s;
		right: 20px;
		height: 71px;}
	.contact .btn_contact {
		-moz-user-select: none;
		background-color: #F1252C;
		background-image: none;
		cursor: pointer;
		display: block;
		right: 0;
		color: #FFF;
		font-size: 38px;
		padding: 10px;
		opacity: 1;
		width: 50px;
		height: 70px;
		border-radius: 80px 0 0 80px;
		position: absolute;
		box-shadow: -3px 0px 1px rgba(2,2,2,0.3);
		top: 200px;
		transition: all 1s ease-in-out 0s;
		white-space: nowrap;
		z-index: 10000;
		}
		
		.contact .btn_contact .fa-envelope {
			margin-top: 12px;
			margin-left: 10px;
			}

	.content_contact {
		background:rgba(241,37,44,1.00);
		color: #FFF;
		display: block;
		max-height:1000px;
		height: 1000px;
		right: -400px;
		margin-bottom: 0;
		opacity: 1;
		box-shadow: -4px -1px 1px rgba(2,2,2,0.3);
		position: absolute;
		text-transform: uppercase;
		transition: all 1s ease-in-out 0s;
		width: 400px;
		z-index: 1000;
		}
		
			.content_contact_2 {
			color: #FFF;
			display: block;
			width: 100%;
			margin: auto;
			z-index: 1000;
		}
		
	.contact.clicked .content_contact{
		right:0;}
		
		.contact.clicked .btn_contact{
		right:400px;}
		
		.contact.clicked .vite{
		right:420px;}
		#map-canvas {
			bottom: 0;
			width: 100%;
			height: 300px;}
		
		.contact .content_contact .texte_contact {
			padding: 30px;
			text-transform:none;
			}
			
			.contact .content_contact .texte_contact h1{
				font-size: 26px;
				font-weight: 300;
			}
			
			.contact .content_contact .texte_contact p{
				font-size: 17px;
			}
			
			
			
			.content_contact_2 .texte_contact H4{
				color: #000;
				font-size: 26px;
			font-family: 'Roboto Slab', serif;
				font-weight: 300;
			}
			
			.content_contact_2 .texte_contact p{
				color: #000;
				font-size: 17px;
			}
			
			.contact input {
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
				color: #555;
				display: block;
				font-size: 14px;
				line-height: 1.42857;
				padding: 6px 12px;
				transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
				width: 270px;
				}
				
				.contact textarea {
					background-color: #fff;
					background-image: none;
					border: 1px solid #ccc;
					border-radius: 4px;
					box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
					color: #555;
					display: block;
					font-size: 14px;
					line-height: 1.42857;
					padding: 6px 12px;
					transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
					width: 270px;
					height: 80px;
					resize:none;
					}
					
					.contact textarea {
						background-color: #fff;
						background-image: none;
						border: 1px solid #ccc;
						border-radius: 4px;
						box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
						color: #555;
						display: block;
						font-size: 14px;
						line-height: 1.42857;
						padding: 6px 12px;
						transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
						width: 270px;
						height: 80px;
						resize:none;
					}
					
					.content_contact_2 table {
						width: 60%;}
					
				.content_contact_2 input {
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
				color: #555;
				display: block;
				font-size: 14px;
				line-height: 1.42857;
				padding: 6px 12px;
				transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
				width: 100%;
				margin-bottom: 6px;
				}
				
				.content_contact_2 textarea {
					background-color: #fff;
					background-image: none;
					border: 1px solid #ccc;
					border-radius: 4px;
					box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
					color: #555;
					display: block;
					font-size: 14px;
					line-height: 1.42857;
					padding: 6px 12px;
					transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
					width: 100%;
					margin-bottom: 6px;
					height: 80px;
					resize:none;
					}
					
					.content_contact_2 textarea {
						background-color: #fff;
						background-image: none;
						border: 1px solid #ccc;
						border-radius: 4px;
						box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
						color: #555;
						display: block;
						font-size: 14px;
						line-height: 1.42857;
						padding: 6px 12px;
						transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
						width: 100%;
						height: 80px;
						resize:none;
					}
					
					.content_contact_2 .submit {
						width: 100%;
						padding: 6px 12px;
					}
					
					.content_contact_2 #submit {
						width: 130px;
						margin-left: 0;
						float: right;
					}
			input:focus {
				border-color: #33BBFF;
				box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset, 0 0 8px rgba(0,156,204,0.3);
				outline: 0 none;}
				
					#submit {
						background-color: #222;
						background-image: none;
						border: 1px solid #000;
						border-radius: 4px;
						box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
						color: #FFF;
						display: block;
						font-size: 14px;
						line-height: 1.42857;
						padding: 6px 12px;
						transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
						width: 124px;
						margin-left: 170px;
					}
					
					
					#submit:hover {
						box-shadow:none;
						background-color: #353535;
						}
			
			
			.msgErreur {
				margin-bottom: 20px;
				line-height: 0;
				font-size: 12px;
				}



.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
	-webkit-animation-name: animScale;
	animation-name: animScale;
	-webkit-animation-duration: 0.25s;
	animation-duration: 0.25s;
}

@-webkit-keyframes animScale {
	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); }
}

@keyframes animScale {
	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1); }
}

.msg_send {
	z-index:1000000000;
	background:rgba(241,37,44,0.8);
	top:1%;
	right: 1%;
	position: absolute;
	padding: 20px;
	 opacity:0; 
	 border-radius: 4px;
	 box-shadow: 2px 2px 0px rgba(0,0,0,0.4);
-webkit-animation:fadeIn ease-in 1; 
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
animation-duration:3s;
transform-style:preserve-3d;
	}
	
	.msg_send_2 {
	z-index:1000000000;
	background:rgba(241,37,44,0.8);
	top:10%;
	right: 1%;
	position: absolute;
	padding: 20px;
	 opacity:0; 
	 border-radius: 4px;
	 box-shadow: 2px 2px 0px rgba(0,0,0,0.4);
-webkit-animation:fadeIn ease-in 1; 
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:6s;
-moz-animation-duration:6s;
animation-duration:6s;
transform-style:preserve-3d;
	}
	
	.msg_send p, .msg_send_2 p {
		color: #FFF;}
	
@-webkit-keyframes fadeIn { 0% { opacity:1;-webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); } 
20% { opacity:1;-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1); }
90% { opacity:1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1); }
100% { opacity:0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);} }
@-moz-keyframes fadeIn {0% { opacity:1;-webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);} 
20% { opacity:1;-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1); }
90% { opacity:1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1); }
100% { opacity:0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);} }
@keyframes fadeIn { 0% { opacity:1;-webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); } 
20% { opacity:1;-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1); }
90% { opacity:1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1); }
100% { opacity:0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);transform: translate3d(0,40px,0) scale3d(0.1,0.6,1);} }

footer{
	background: #F1252C;
	width: 100%;
	padding: 10px 0 !important;
	height: auto;
	text-align: center;}
	
	footer p {
		font-size: 0.8em;
		color: #FFF;
		margin-bottom: 20px;}
	footer #labelcom_logo {
		width: 108px;
		height: 72px;
		margin: auto;
		margin-top: 30px;}
		
	footer .footer_nav {
			display: table;
			padding: 0 20px;
			margin: auto;}
		
		.footer_nav ul {
			width: 100%;
			text-align: center;
			margin: auto;}
		
			.footer_nav ul li {
				font-size: 0.8em;
				padding: 0 5px;
				color: #FFF;
				text-transform:none;
				display: table-cell;
				text-align: center;
				float: left;}
				
			.footer_nav ul li a {
					color:  #FFF;
					transition: all .5 ease-in-out;}
					
				.footer_nav ul li a:hover {
					border-bottom: 1px dotted #FFF;
					}
					
	.reseau_social {
		display: table;
		margin:auto;
		padding-bottom: 20px;}
		
		.reseau_social .social {
			width: 46px;
			height: 46px;
			opacity: 0.9;
			padding: 6px 10px;
			display: table-cell;
			text-align: center;}
			
			
		.reseau_social .social:hover {
			opacity: 1;}
		
		.feed {
			margin: auto;
			width: 900px;
			padding-bottom: 30px;
			max-width:900px;
			}
			
			.feed .btn_feeds {
				text-align:center;
				color: #FFF;}
		.feed .feeds, .feed_twitter .feeds {
			display:none;}
			
		#LabelCommunicationsFacebookWall1q7ld5se2douerldk70nl8dldg {
			width: 45%;
			float: left;
			color: #FFF;
			font-size: 14px;
			margin-right: 5%;
			text-align: right;
			}	
			#LabelCommunicationsFacebookWall1q7ld5se2douerldk70nl8dldg .headline{
			display:none;}
			
			#LabelCommunicationdn9mlei1hshsvarbeivs0inmf0 {
			width: 45%;
			float: left;
			color: #FFF;
			font-size: 14px;
			margin-left: 5%;
			text-align: left;
			}	
			
			
		.feedTitle a{
			font-size: 16px;
			color: #FFF;}
			
			#creditfooter {
				display: none;}
				
		.feed.display .feeds{
		display:block;}
		
		.feed_twitter.display .feeds{
		display:block;}
			
			
			
		#page_404 {
			height: auto;
			width: 100%;
			padding: 160px 0 100px 0;
			background-color:#000;}
			
			#page_404 h1 {
				color: rgba(241,37,44,1.00);
				font-size: 5em;}
			
			#page_404 h2 {
				color: #FFF;
				font-size: 2.1em;}
/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************

																																			RESPONSIVE RESPONSIVE				
																																							****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/		

	@media all and (max-width: 916px) {	  
			nav ul li {
				font-size:0.8em;
				padding: 0 3px}
				
			.feed {
			width: 800px;
			}
	}
	  
	@media all and (max-width: 800px) {
	
	#serbotel { display:none;}
	.petit_beurre {
		background-size:contain;
    height: 110px;
    max-height: 294px;
    position: absolute;
	margin-top: 20px;
    right: 3%;
    width: 150px;
    z-index: 999;
	}
	
#container_bg {
	height: 300px;}
.bg_labelcom {
	max-width: 800px;
	height: 300px;
	}
	
	.bg_labelcom .content_bg {
		padding-top: 40px;}
		
		.bg_labelcom .content_bg img {
			width: 170px;
			height: 113px;
			margin-bottom:20px;}
			
		h2 {
			font-size: 1em;}
				
	header {
		height: 50px;}
  #nav-trigger {
	   z-index: 10000;
    display: block; }

	ul {
		padding: 0}
  nav#nav-main {
    display: none; }

  nav#nav-mobile {
	  z-index: 10000;
    display: block; }
	
	.header {
		height: 50px;}
	.header nav ul li {
				height: 50px;
				line-height: 50px;}
				
			.header nav ul li:first-child {
				display:none !important;}	
				
	nav#nav-mobile ul{
	  z-index: 10000;}
	  
	.col_1_2, .col_1_3, .col_1_4, .col_1_40, .col_1_60,.col_3_4 {
	width: 100%;
	float: none;}

	.col_1_3 p, .col_1_3 h2, .col_1_40 p, .col_1_40 h2, .col_1_60 p, .col_1_60 h2, .col_1_2 p, .col_1_2 h2 {
		padding-left: 20px;
		}
		
		
	#section_stephane, #section_guillaume, #section_laurie, #section_vanessa,#section_audrey {
		text-align: center;}
		
		#section_stephane .content, #section_guillaume .content, #section_laurie .content, #section_vanessa .content,#section_audrey .content {
		padding: 0 20px;}
		
	#numbers {
		height: 150px;}
	#numbers h3 {
		margin-top: 20px;
		font-size: 6vw;
		}
		
	#numbers p {
		font-size: 3vw;
		}


	.frise {
		height: 100px;
		background-position:bottom;
		background-size:contain;
		background-repeat:no-repeat;
		margin-top: 20px;
	}
	
	#texte_print .content h4, #texte_print .content p, #texte_comm .content H2, #texte_comm .content p{
		padding-left: 20px;
		}

	.col_1_60 .col_1_3 {
		width: 33.333%;
		margin-left: 0;
		background-size: 90% !important;
		background-position:center !important;
		float: left; }
		
		.identite_bs {text-align: center; margin: 10px 0;}
		
		.img_comm_globale {
    		margin-bottom: 5px;
		}
		
		.img_goodies_bs {
			margin-top: 10px;
			height: 150px;}
			
		.img_web_bs {
			height: 180px;}
		.col_1_40 #logo_shelter {
			width: 100% !important;
			height: 100% !important;}
		.caption {
			display:none;}
	#stephane {
			margin: 0 auto;}
	
		#guillaume {
			margin:  0 auto;}	
			
	#team h2 {
		font-size: 20px;
		font-weight: 300;
		color:#FFF;
		letter-spacing: 1px;
		text-align: center;
		margin-bottom: 40px;
		}
	
	#team .col_1_2, #team .col_1_3 {
		margin-bottom: 30px;
		}
	
	#team .col_1_2 p, #team .col_1_3 p{
		padding-left:0;
		}
		
		.metier {
			position: absolute;
			width: 77px;
			height: 77px;
			border-radius: 37.5px;
			background-color: #F1252C;
			margin-top: -30px;
			margin-left: -30px;
			text-align: center;
			color: #FFF;
			font-size: 12Px;
			font-weight: 400;
			}
			
			
			.two_lines p{
				margin-top: 20px;}
				
				
				/*** EFFET HOVER ***/
				
				.membre {
					cursor:pointer;
					background-size:100%;
					background-position: center;
					transition:all 0.5s ease-in-out;
				}
					
				.membre:hover {
					background-size:108%;
				 }
				
				
				.feed {
			width: 700px;
			}
	}
	
	
	@media all and (max-width: 480px) { 
	
	.vite {
		display: none;}
	.contact .btn_contact {
		
		font-size: 24px;
		padding: 10px;
		opacity: 1;
		width: 25px;
		height: 35px;
		border-radius: 40px 0 0 40px;
		position: absolute;
		box-shadow: -4px 0px 1px rgba(2,2,2,0.6);
		top: 100px;
		transition: all 1s ease-in-out 0s;
		white-space: nowrap;
		z-index: 10000;
		}
		
		.contact .btn_contact .fa-envelope {
			margin-top: 1px;
			margin-left: 5px;
			}

	.content_contact {
		background:rgba(241,37,44,1.00);
		color: #FFF;
		display: block;
		max-height:1000px;
		height: 1000px;
		right: -270px;
		margin-bottom: 0;
		opacity: 1;
		box-shadow: -4px -1px 1px rgba(2,2,2,0.6);
		position: absolute;
		text-transform: uppercase;
		transition: all 1s ease-in-out 0s;
		width: 270px;
		z-index: 1000;
		}
		
	.contact.clicked .content_contact{
		right:0;}
		
		.contact.clicked .btn_contact{
		right:270px;}
		
		#map-canvas {
			bottom: 0;
			width: 100%;
			height: 150px;}
		
		.contact .content_contact .texte_contact {
			padding: 10px;
			text-transform:none;
			}
			
			.contact .content_contact .texte_contact h1{
				font-size: 22px;
				font-weight: 300;
			}
			
			.contact .content_contact .texte_contact p{
				font-size: 15px;
			}
			
			.contact input {
				
				width: 200px;
				}
				
				.contact textarea {
					width: 200px;
					height: 50px;
					}
					
		
				
					#submit {
						
						margin-left: 76px;
					}
					

		.col_1_5 {
			width:100%;
			float:none;
			overflow:auto;
			}
	#numbers {
		height: auto;}
		
		#numbers h4 {
			margin-top:10px;}
		#numbers p {
		font-size: 4vw;
		}	
	
	
	.col_1_60 iframe {
		width: 300px;
		float: none;
		padding-left: 20px;
		height: 169px;
			}

	.col_1_60 h2 {
    float: none;
	padding-left: 20px;
    margin-top: 15px;
}

	.img_scotch img {
		width: 290px;
		height: 363px;
		}
		
		.col_1_60 .col_1_3 {
		height: 80px; }
		
	.feed {
			width: 270px;
			}
			
			#LabelCommunicationsFacebookWall1q7ld5se2douerldk70nl8dldg, #LabelCommunicationdn9mlei1hshsvarbeivs0inmf0  {
			width: 90%;
			text-align: left;
			float: none;
			}	
			
	}