/****** HTML 5 fix ********/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* ********************   RESET  ***************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1.5em;
}
ol, ul {
	list-style:none;
	margin:10px 0 20px 0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/************************* GENERAL  ***************************************/

body{
	font-size:13px;
	font-family: BebasNeueRegular;
	font-weight:normal;
	background-color:white;
	color:#333;
}
div, header, footer{
	border: 0px solid black;
}
h1{
	font-size:32px;
	margin:20px 0 20px 0;
}
h2{
	font-size:26px;
	margin:30px 0 20px 0;
}
h3{
	font-size:20px;
	margin:20px 0px 15px 0;
}
.white{
	color:white;
}
.black{
	color:#353535;
}
p{
	margin-top:15px;
	margin-bottom:15px;
}
p.success{
	color:green;
	padding:20px 10px;
	background-color:#DEDEDE;
}
p.error{
	color:red;
	padding:20px 10px;
	background-color:#DEDEDE;
}
.nowrap{
	white-space:nowrap;
}
img.preload{
	display:none;
}
.separator{
	margin:0 10px;
}
.horizontal-separator{
	margin:10px 0px;
	background:url('../img/structure/horizontal-separator.png') top center no-repeat;
}
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
	height:1px;
}

/******* links ***********/
a{
	color:#333;
	text-decoration:none;
}
a:visited{
	color:#333;
	text-decoration:none;
}
a:hover{
	color:#555;
	text-decoration:none;
}
a:active{
	color:#555;
	text-decoration:none;
}

.mail a:hover{
	text-decoration:underline;
}


a.custom-button{
	display:inline-block;
	*display:block;
	*zoom:1;
	font-family: 'BebasNeueRegular';
	height: 32px;
	line-height: 32px;
	font-size: 18px;
	background-color: #009BC9;
	padding: 0 15px;
	color:#fff;
}
a.custom-button:hover {
	background-color: #22ABE9;
	color:ddd;
}


/* TRANSPARENCY */
.alpha50 {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0) transparent;
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.5);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

/******* GRID ***********/

.column{
	float:left;
	/*background-color: #444;*/
	padding:0 14px;
}
.grid2{
	width:110px;
}
.grid3{
	width:190px;
}
.grid4{
	width:310px;
}
.grid8{
	width:640px;
}


/************************** STRUCTURE  ***********************************/

.wrapper{
	width:100%;
	text-align:center;
}
.container{
	width:940px; /* 960 - 10*2 (padding) */  /* or start from 960 */
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	padding:0 10px;
}


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

#header-wrapper{
	/*background-color:#14313F;*/
	background-color:#000;
}
#header-container{
	text-align:right;
	height:80px;
}

#logo{
	text-align:left;
	float:left;
	/*width: px;*/
	/*height: px;*/
	margin:15px 0 0 0px;
}


/************  MAIN MENU  *************/

#main-menu{
	height:45px;
	font-size:23px;
	color:#FFF;
}
#main-menu ul{
	line-height:80px;
	margin:0;
}
#main-menu ul img{
	vertical-align: middle;
}
#main-menu ul a{
	color:#FFF;
}
#main-menu ul a:hover{
	color: #DDD;
}
#main-menu li.menu-item{
	display:inline-block;
	margin:0 2.5%;
}
#main-menu li.menu-item.first{
	margin-left:0px;
}
#main-menu li.menu-item.last{
	margin-right:0;
}
#main-menu li.menu-item.active{

}




/***********************  SLIDER  ************************* */

/*
 * for more see slider.js
 *
 */


/****  slider-wrapper ******************* */


#slider-wrapper{

}

#slider-container{
	width:100%;
	overflow:hidden;
}

.homepage #slider-container{
	/*background: url('../images/slider/homepage/image1.png') top center no-repeat;*/
}

.homme #slider-container{

}
.femme #slider-container{

}
.jeans #slider-container{

}


/***************************  CONTENT  *********************************** */

/****  middle-wrapper ******************* */

#middle-wrapper{

}
#middle-container{
	min-height:300px;
	text-align:left;
	font-size:13px;
	margin-bottom:30px;
}

/*** HOMEPAGE ************/

.homepage #middle-container{
	width:960px;
	padding:0;
}
.homepage #middle-container .column.grid4{
	width:300px;
	padding:0;
	margin:10px;
}
.homepage .hot-item h2{
	font-size:24px;
	text-align:center;
	margin:15px 0 10px 0;
}


/* HOVER styles */

/* http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ */
/* see hover-style-homepage.css */


.homepage .titre-bienvenue{
	font-size: 50px;
	color: #CCC;
}
.homepage .chapeau{
	font-family:'Lato';
	font-size: 18px;
	color:#999999;
	line-height:28px;
}
.homepage .main-text .main-text{
	font-family:'Lato';
	font-size: 13px;
	color:#333333;
	line-height:22px;
}

.homepage #middle-container .column.grid4.news{
	width:270px;

}
.homepage .news{

}
.homepage .news h2{
	font-size:34px;
	text-align:center;
	border-bottom:1px solid #ccc;
	padding-bottom:20px;
	margin-bottom:30px;
}
.homepage .news-item h2{
	text-align:left;
	margin:10px 0 0px 0;
	font-size:20px;
	border:0;
	padding:0;

}
.homepage .news-item p{
	font-family:'Lato';
	margin:5px 0;
}

.homepage .all-news{
	margin:10px 0 20px 0;
}

.homepage .titre-audio{
	font-size: 35px;
	margin: 40px 0 20px 0;
	padding-top: 30px;
	color: #333;
	border-top: 1px solid #CCC;
}


/********************* AUTRES ******************/

.marques p{
	margin:30px 0 5px 0;
	font-size:28px;
	line-height: 40px;
}
.marques2 p{
	margin: 5px 0 20px 0;
	font-size:24px;
	line-height: 38px;
}
.texte-presentation{
	margin: 25px 0 60px 0;
}
.texte-presentation p{
	margin: 10px 0;
	font-size:14px;
	font-family:'Lato';
}

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

.contact h1{
	margin-top:30px;
}
.contact #middle-container{
	min-height:140px;
	margin-bottom:30px;
}

.contact .column{
	height: 140px;
}
.border-right{
	border-right:1px solid #999;
}
.contact #address h3{
	margin:30px 0 5px 0;
	font-size:24px;
}
.contact #address p{
	margin:0;
	font-family:'Lato';
	font-size:15px;
	line-height:22px;
}
.contact #horaire h3{
	margin:10px 0 10px 8px;
	font-size:22px;
	padding-left:20px;
	background: url('../images/icons/horaire.png') top left no-repeat;
}
.contact #horaire dl{
	font-family:'Lato';
	font-size:12px;
	margin-left:8px;
	padding:0;
}
.contact #horaire dt{
	float: left;
	clear: both;
	margin: 3px 4px 3px 0;
}
.contact #horaire dd{
	float: left;
	font-weight:bold;
	margin: 3px 0;
}
.contact #contact .phone{
	font-size: 28px;
	margin: 35px 0 10px 30px;
	padding-left: 30px;
	background: url('../images/icons/phone.png') center left no-repeat;
}
.contact #contact {
	width: 250px;
}
.contact #contact .mail{
	font-family:'Lato';
	font-size: 14px;
	margin: 10px 0 0 30px;
	padding-left: 30px;
	background: url('../images/icons/mail.png') center left no-repeat;
}
.contact #social{
	text-align:center;
}
.contact #social p{
	margin:10px 0 0 5px;
}
.contact #social a{
	margin-right:4px;
}
.contact #social .newsletter{
	margin: 15px 0 15px 0;

}
.contact #social .newsletter p:first-child{
	font-size:22px;
	margin-bottom: 5px;

}
.contact #social .newsletter p.slogan{
	font-size:28px;
}


.contact #map-container{
	width:100%;
	border-top:1px solid #999;
	/*-webkit-box-shadow: 0px -2px 3px rgba(150, 150, 150, 0.75);*/
	/*-moz-box-shadow:    0px -2px 3px rgba(150, 150, 150, 0.75);*/
	/*box-shadow:         0px -2px 3px rgba(150, 150, 150, 0.75);*/
}

a.icon:hover{
	opacity:0.7;
}