/* CSS Document */

/* =General
-------------------------------------------------------------- */
html,
body {
	margin: 0;
	padding: 0;
	background: #171717;
	color: #f7f7f7;	
}
a,
a:hover{
	color: #f7f7f7;	
}
a:hover{
	text-decoration: none;	
}
a img {
	border: 0;
}
#header-in,
#content-in,
#bandeau-in,
#footer-in{
	width: 100%;
	max-width: 925px;
	margin: 0 auto;	
}
h2{
	font-family: myriad pro, Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-style: italic;
    font-weight: normal;
    margin: 35px 0 15px;
}
.clear{
	clear: both;	
}

/* =Header
-------------------------------------------------------------- */
#header{
	background: url(../images/fondTop.jpg) repeat-x top left;	
	overflow: hidden;
}
#header-in h1{
	float: left;
	margin: 0;	
	width: 60%;
}
#logo{
	margin-left: -55px;
	max-width: 440px;
    width: 100%;
}
#flag{
	background: url("../images/flag.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    color: #010101;
    display: block;
    float: right;
    height: 248px;
    text-align: center;
    width: 301px;
	font-family: myriad pro, Helvetica, Arial, sans-serif;
	font-size: 26px;
}
#flag .bande{
	padding-bottom: 10px;
	background: url('../images/ligne.png') no-repeat bottom center;	
}
#flag span{
	display: block;
	color: #811010;
	font-weight: bold;
}


/* =Footer
-------------------------------------------------------------- */
#bandeau{
	background: none repeat scroll 0 0 #811010;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 45px 0;
    text-align: center;
    text-transform: uppercase;
}
#bandeau-in{
	overflow: hidden;	
}
#bandeau p{
	margin: 25px 0;
}
#footer-in{
	overflow: hidden;	
}
#partenaire{
	float: left;
	width: 100%;
	max-width: 670px;
}
#bt_gaz, #bt_apchq,
#bt_abritat, #bt_desjardins{
	display: inline-block;
	margin: 0 15px;
	vertical-align: middle;
}
#bt_gaz{
	background: url('../images/gaz.png') no-repeat top center;	
	width: 134px;
	height: 55px;
}
#bt_apchq{
	background: url('../images/apchq.png') no-repeat top center;
	width: 135px;
	height: 59px;	
}
#bt_abritat{
	background: url('../images/abritat.png') no-repeat top center;
	width: 111px;
	height: 68px;	
}
#bt_desjardins{
	background: url('../images/desjardins.png') no-repeat top center;
	width: 151px;
	height: 32px;	
}
#bt_gaz:hover, #bt_apchq:hover,
#bt_abritat:hover, #bt_desjardins:hover{
	background-position: bottom;	
}
#media{
	float: right;
	width: 100%;
	max-width: 245px;	
}
#rbq{
	margin: 20px 0 8px;
    padding-left: 20px;
    text-align: center;
}
#rbq span{
	font-weight: bold;
	color: 	#811010;
}
#reseau{
	background: url("../images/mediaLigne.png") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);
    padding: 4px 0 0 70px;
}
#bt_facebook{
	background: url('../images/facebook.png') no-repeat top center;
}
#bt_twiter{
	background: url('../images/twitter.png') no-repeat top center;
}
#bt_linkedIn{
	background: url('../images/linkedin.png') no-repeat top center;
}
#bt_google{
	background: url('../images/google.png') no-repeat top center;
}
#bt_facebook, #bt_twiter,
#bt_linkedIn, #bt_google{
	opacity: 0.5;
	display: inline-block;
	width: 30px;
	height: 39px;
}
#bt_facebook:hover, #bt_twiter:hover,
#bt_linkedIn:hover, #bt_google:hover{
	opacity: 1;
}
#copyright{
	clear: both;
    color: #757575;
    display: block;
    margin: 15px 0;
}

/* =Contenu
-------------------------------------------------------------- */

/* SLIDESHOW */
#menuSlideshow{
	margin: -100px 35px 20px;
    overflow: hidden;
    width: 578px;
	position: relative;
	height: 76px;
}
#menuSlideshow-in{
	width: 5000px;	
	position: absolute;
}
#menuSlideshow-in a{
	border: 2px solid #ccc;
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	width: 84px;
	height: 50px;
	position: relative;
	overflow: hidden;
}
#menuSlideshow-in a:hover,
#menuSlideshow-in a.current{
	border: 2px solid #811010;
}
#menuSlideshow-in img{
	position: absolute;
		top: -50px;	
}
#menuSlideshow-in a:hover img,
#menuSlideshow-in a.current img{
		top: 0px;	
}
.prev, .next{
	display: block;
	width: 22px;
	height: 17px;	
	opacity: 0.3;
	margin-top: 60px;
}
.prev{
	background: url("../images/back.png") no-repeat scroll left top rgba(0, 0, 0, 0);
	float: left;
}
.next{
	background: url("../images/next.png") no-repeat scroll left top rgba(0, 0, 0, 0);
	float: right;
}
.prev:hover, 
.next:hover{
	opacity: 1;
}
#slideshow{
	width: 100%;
	max-width: 925px;
	text-align: center;
}
#slideshow img{
	border: 5px solid #f1f1f1;	
	width: 100%;
	height: auto;
}

/* SPÉCIALE */
#special{
	background: url("../images/special.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    height: 70px;
    margin: 45px auto 15px;
    padding: 0 50px;
    width: 828px;	
}
#special p{
	color: #171717;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 13px 0;
    text-align: center;
}

/* FOMRULAIRE CONTACT */
#formulaireContact{
	overflow: hidden;	
}
.gauche,.droite{
	float: left;
	width: 50%;	
}
.gauche input{
	border: 2px solid #ccc;
    display: block;
    margin: 10px;
    padding: 4px;
    width: 93%;	
}
.droite textarea{
	border: 2px solid #ccc;
    display: block;
    height: 93px;
    margin: 10px;
    padding: 4px;
    width: 90%;	
}
.droite input[type="submit"]{
	background: none repeat scroll 0 0 #811010;
    border: medium none;
    color: #f1f1f1;
    cursor: pointer;
    float: right;
    font-family: times new roman;
    font-size: 17px;
    margin-right: 23px;
    padding: 3px 25px;
    text-transform: uppercase;
}

/* MEDIA QUERY! FUN TO DO RESPONSIVE DESIGN! =D */
@media screen and (max-width: 961px){
	#logo {
		margin: 0;	
	}
	#slideshow img{
		width: 95%;	
	}
	#texte{
		margin: 0 25px;	
		text-align: justify;
	}
	#special{
		background: url("../images/special.png") no-repeat scroll left top / 100% 100% rgba(0, 0, 0, 0);
		height: auto;
		margin: 45px 25px 15px;
		padding: 0 50px;
		width: auto;
	}
}
@media screen and (max-width: 940px){
	#menuSlideshow{
		width: 382px;
	}
	#partenaire {
		float: none;
		margin: 0 auto;
		max-width: 670px;
		width: 100%;
		text-align: center;
	}
	#media {
		clear: both;
		display: block;
		float: none;
		margin: 12px auto;
	}
}
@media screen and (max-width: 860px){
	#bandeau {
		font-size: 17px;
	}		
}
@media screen and (max-width: 780px){
	#header{
		overflow: inherit;	
	}
	#header-in h1{
		float: none;
		width: 100%;	
	}
	#flag{
		background-color: #ccc;
		background-image: none;
		border: 3px solid #811010;
		float: none;
		height: auto;
		margin: 0 25px;
		outline: 3px solid #ccc;
		padding: 8px 10px;
		width: auto;	
	}
	#flag p, #flag p span,
	#flag .bande{
		display: inline;	
		margin: 8px 0;
		background: none;
		padding: 0;
	}
	#menuSlideshow {
		margin: 20px auto;
    	max-width: 685px;
    	width: 96%;
	}
}
@media screen and (max-width: 635px){
	#special{
		background-image: none;
		background-color: #ccc;
		border: 3px solid #811010;
		padding: 0 10px;
		outline: 3px solid #ccc;
	}
}
@media screen and (max-width: 535px){
	#bandeau {
		font-size: 12px;
	}
}
@media screen and (max-width: 400px){
	#menuSlideshow{
		display: none;	
	}
	#slideshow{
		margin-top: 25px;	
	}
	#flag .bande {
		display: block;
		background: url("../images/ligne.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
		padding-bottom: 10px;
	}
	#flag p span{
		display: block;
	}
	.gauche, .droite {
		float: none;
		width: 95%;
	}
	.droite textarea {
		width: 93%;
	}
	.droite input[type="submit"] {
		background: none repeat scroll 0 0 #811010;
		border: medium none;
		color: #f1f1f1;
		cursor: pointer;
		float: none;
		font-family: times new roman;
		font-size: 17px;
		margin: 0 10px;
		padding: 3px 25px;
		text-transform: uppercase;
		width: 98%;
	}
}