/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/*
	"Un bon site Web est toujours “en construction” !" Anonyme.
*/

/*
	Cursor
*/

.cursor {
	z-index : 2000;
    width: 40px;
    height: 40px;
	background-color : white;
	border: solid 5px #31B1CC;
    border-radius: 50%;
    position: fixed; 
    transition-timing-function: ease-out;
    pointer-events: none;
	transform: translate(-50%, -50%);
}

.expand {
	background-color : #31B1CC;
	border: solid 5px white;
	width: 40px;
    height: 40px;
}

body{
	cursor : none; 
}

/*
	Fin Cursor
*/

::-moz-selection {
    background: black;
    color: #31B1CC;
    text-shadow: none;
}

::selection {
    background: black;
    color: #31B1CC;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.centered {
	text-align: center
}

.mt {
	margin-top: 80px;
}

.mb {
	margin-bottom: 80px;
}

/* ==========================================================================
   General styles
   ========================================================================== */
   
p{
	text-align: left;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
    color: #31B1CC;
}

.navbar-brand {
	font-weight: 700;
}

.navbar-default .navbar-brand {
	color: #31B1CC;
}

.navbar-default .navbar-brand:hover {
	color: white;
}

.navbar-default {
	border-color: transparent;
	background-color: rgba(0,0,0,0.5) ;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #31B1CC;
	background-color: transparent;
	border-bottom: 2px solid #31B1CC;
}

.navbar-default .navbar-nav > li > a {
	font-weight : bold;
	color: white;
}

.navbar-default .navbar-nav > li > a:hover {
	color: #31B1CC;
	font-weight : bold;
}

.navbar-default .navbar-toggle {
  border: none;
  border-color: white;
}

.navbar-default .navbar-toggle:hover {
  background: white;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #31B1CC;
}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	background: url(../img/cover/lac_rocca_italie_voyage.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 60px;
	font-weight: bold;
}

#headerwrap h4 {
	font-weight: 400;
	color: #ffffff
}

#social {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #f2f2f2;
}

#social-content {	
	padding-top: 25px;
	padding-bottom: 25px;
}

#social i {
	font-size: 40px;
	color: #4a4a4a ;
}

#social i:hover {
	color: #31B1CC ;
}

#footerwrap {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #31B1CC;
}

#footer-content {
	padding-top : 15px;
	padding-bottom : 15px;
}

#footerwrap p {
	color: white;
	margin-top : 10px;
	margin-bottom : 10px;
}

a.mail-cgu {
	color: white;
	font-weight: bold;
}

a.mail-contact {
	font-size: 20px;
	color: #333333;
	font-weight: bold;
}

/* ==========================================================================
   Workwrap 
   ========================================================================== */

/* Gare à la Bête */
   
#workwrap {	
	background: url(../img/cover/equipe_jeu_gare_a_la_bete.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
	/* background-color : #31B1CC ;
	border-radius : 10px; */
}

#workwrap h4 {
	font-weight: 400;
	color: #ffffff ;
	/* background-color : #31B1CC ;
	border-radius : 10px;
	padding-top : 5px;
	padding-bottom : 5px; */
}

/* La Semaine */

#workwrap2 {	
	background: url(../img/cover/bureau_journal_la_semaine_metz.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap2 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 65px;
	font-weight: bold;
}

#workwrap2 h4 {
	font-weight: 400;
	color: #ffffff ;
}

/* MOLTES PROD. */

#workwrap3 {	
	background: url(../img/cover/tournage_tunnel_abandonne_moltes_prod_nuit.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap3 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 70px;
	font-weight: bold;
}

#workwrap3 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Le Spawn */

#workwrap4 {	
	background-color : #FF8800;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap4 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
}

#workwrap4 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Crew Paper */

#workwrap6 {	
	background-color : #AB9C94;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap6 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
}

#workwrap6 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Otak'tu */

#workwrap7 {	
	background-color : #C8311F;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap7 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
}

#workwrap7 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Acad'MMI 2016 */

#workwrap8 {	
	background: url(../img/cover/participants_acad_mmi_challenge_etudiant.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap8 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 60px;
	font-weight: bold;
}

#workwrap8 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Affiches&Flyers */

#workwrap10 {	
	background-color : #FFDD0C; 
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap10 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 70px;
	font-weight: bold;
}

#workwrap10 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Photographies */

#workwrap11 {	
	background: url(../img/cover/photographies.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap11 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 35px;
	font-weight: bold;
}

#workwrap11 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Clip Musée */

#workwrap12 {	
	background-color : grey; 
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap12 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
}

#workwrap12 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* CCPB */

#workwrap13 {
	/* background: url(../img/cover/siege_communaute_communes_pays_boulageois.jpg) no-repeat center top; */
	background-color : #6EB13E; 
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap13 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#workwrap13 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Ligne Verte */

#workwrap14 {
	/* background: url(../img/cover/#.jpg) no-repeat center top; */
	background-color : #8F8D1B; 
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap14 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#workwrap14 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Camping La Croix du Bois Sacker */

#workwrap15 {
	background: url(../img/cover/camping_croix_bois_sacker_burtoncourt_video_presentation.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap15 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#workwrap15 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Plugandcom */

#workwrap16 {
	background: url(../img/cover/openspace_plugandcom.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap16 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 40px;
	font-weight: bold;
}

#workwrap16 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* DIY */

#workwrap17 {
	background: url(../img/cover/diy.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap17 h1 {
	color:black;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 60px;
	font-weight: bold;
}

#workwrap17 h4 {
	font-weight: 400;
	color: black;
}

/* La Chouette */

#workwrap18 {
	background: url(../img/cover/la_chouette.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap18 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 60px;
	font-weight: bold;
}

#workwrap18 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Piranha et Petits Poissons Rouges */

#workwrap19 {
	background: url(../img/cover/piranha.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap19 h1 {
	color:black;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 40px;
	font-weight: bold;
}

#workwrap19 h4 {
	font-weight: 400;
	color: black;
}

/* Teddy & le monde des ténèbres */

#workwrap20 {
	background: url(../img/cover/teddy_&_le_monde_des_tenebres.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap20 h1 {
	color:black;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 40px;
	font-weight: bold;
}

#workwrap20 h4 {
	font-weight: 400;
	color: black;
}

/* TER */

#workwrap21 {
	background: url(../img/cover/ter.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap21 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 35px;
	font-weight: bold;
}

#workwrap21 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Webdesign */

#workwrap22 {
	background: url(../img/cover/webdesign.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap22 h1 {
	color:black;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#workwrap22 h4 {
	font-weight: 400;
	color: black;
}

/* 2K Studio */

#workwrap23 {
	background: url(../img/cover/2k_studio.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap23 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 60px;
	font-weight: bold;
}

#workwrap23 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Audit de sites web */

#workwrap24 {
	background: url(../img/cover/audit_web.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap24 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#workwrap24 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Community Management CPN */

#workwrap25 {
	background: url(../img/cover/cm_master_cpn.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap25 h1 {
	color: grey;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 30px;
	font-weight: bold;
}

#workwrap25 h4 {
	font-weight: 400;
	color: grey;
}

/* Dev Web */

#workwrap26 {
	background: url(../img/cover/developpement_web.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap26 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 35px;
	font-weight: bold;
}

#workwrap26 h4 {
	font-weight: 400;
	color: #ffffff;
}

/* eGo App */
   
#workwrap27 {	
	background: url(../img/cover/eGO_app_mobile.jpg) no-repeat center top; 
	background-color: red;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap27 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
	/* background-color : #31B1CC ;
	border-radius : 10px; */
}

#workwrap27 h4 {
	font-weight: 400;
	color: #ffffff ;
	/* background-color : #31B1CC ;
	border-radius : 10px;
	padding-top : 5px;
	padding-bottom : 5px; */
}

/* MVA YouTube Channel */
   
#workwrap28 {	
	background: url(../img/cover/mva_youtube_channel_background.jpg) no-repeat center top;
	/* background-color: red; */
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap28 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
	/* background-color : #31B1CC ;
	border-radius : 10px; */
}

#workwrap28 h4 {
	font-weight: 400;
	color: #ffffff ;
	/* background-color : #31B1CC ;
	border-radius : 10px;
	padding-top : 5px;
	padding-bottom : 5px; */
}

/* Museum XXI */
   
#workwrap29 {	
	background: url(../img/cover/museum_xxi_theme.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap29 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 70px;
	font-weight: bold;
	/* background-color : #31B1CC ;
	border-radius : 10px; */
}

#workwrap29 h4 {
	font-weight: 400;
	color: #ffffff ;
	/* background-color : #31B1CC ;
	border-radius : 10px;
	padding-top : 5px;
	padding-bottom : 5px; */
}

/* MyAgency-Kideaz */
   
#workwrap30 {	
	background: url(../img/cover/myagency_theme.jpg) no-repeat center top; 
	/* background-color: red; */
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap30 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 60px;
	font-weight: bold;
	/* background-color : #31B1CC ;
	border-radius : 10px; */
}

#workwrap30 h4 {
	font-weight: 400;
	color: #ffffff ;
	/* background-color : #31B1CC ;
	border-radius : 10px;
	padding-top : 5px;
	padding-bottom : 5px; */
}

/* Cinétoscope */
   
#workwrap31 {	
	background: url(../img/cover/cinetoscope_cover.jpg) no-repeat center top; 
	/* background-color: red; */
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap31 h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 40px;
	font-weight: bold;
	/* background-color : #31B1CC ;
	border-radius : 10px; */
}

#workwrap31 h4 {
	font-weight: 400;
	color: #ffffff ;
	/* background-color : #31B1CC ;
	border-radius : 10px;
	padding-top : 5px;
	padding-bottom : 5px; */
}



/* Services Wrap */

#serviceswrap {	
	background: url(../img/cover/services.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 550px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#serviceswrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#serviceswrap h4 {
	font-weight: 400;
	color: #ffffff;
}


/* Portfolio Wrap */

#portfoliowrap {	
	background: url(../img/cover/portfolio.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 550px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#portfoliowrap h1 {
	color:black;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#portfoliowrap h4 {
	font-weight: 400;
	color: #ffffff;
}

/* Formation Wrap */

#formationwrap {	
	background: url(../img/cover/formation_universitaire.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 550px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#formationwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 40px;
	font-weight: bold;
}

#formationwrap h4 {
	font-weight: 400;
	color: #ffffff;
}

/* About Wrap */

#aboutwrap {	
	background: url(../img/cover/a_propos_quentin_MORES.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 550px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#aboutwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#aboutwrap h4 {
	font-weight: 400;
	color: #ffffff;
}

.link-about {
	color : #31B1CC;
}

.link-about:hover {
	color : #31B1CC;
}

/* Button */

a.btn.btn-primary.btn-lg.active{
	background-color : #4a4a4a;
	border-color: #4a4a4a;
	padding : 10px;
}

a.btn.btn-primary.btn-lg.active:hover{
	background-color : #31B1CC;
	border-color : #31B1CC;
	padding : 10px;
}

/* Gallery */
.gallery {
	margin-top: 30px;
}

.gallery img:hover {
	opacity: 0.4;
}

/* Contact Form */

#contactwrap {
	background: url(../img/cover/contact_phone.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
	background-size: 100%;
	background-size: cover;
}

#contactwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 50px;
	font-weight: bold;
}

#contactwrap h4 {
	font-weight: 400;
	color: #ffffff;
	font-size : 20px;
}

#contact {
  padding: 40px 0;
}

#contact h2 {
  font-size: 36px;
  margin-bottom: 30px;
}

.contact-form label {
   color: #999;
}

.contact-form input, .contact-form textarea {
  padding: 10px 12px;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  height: auto;
}

.contact-form .form-send {
  text-align: center;
}

/* Button Form */

.contact-form .form-send button {
	background-color : #4a4a4a;
	border-color: #4a4a4a;
	padding : 10px;
	color: white;
	font-size: 18px;
}

.contact-form .form-send button:hover{
	background-color : #31B1CC;
	border-color : #31B1CC;
	padding : 10px;
	font-size: 18px;
}