@charset "UTF-8";

/* GABRIEL & Fils */



@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);



html, body { height:100%;}

body { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#111; background:#0060aa url(../images/bg/bg-image.jpg) no-repeat center top;}







/* --------------- / GLOBALS / --------------- */

.clear { clear:both; height:1px; line-height:1px; font-size:1px;}

.color { color:#0060aa;}

.yellow { color:#fbb016;}



a { color:#0060aa;}

a:hover { color:#0090ff;}



h1, h2, h3, h4, h5, h6 { margin:0 0 15px 0;}



h1 { font-family:'Roboto Condensed', serif; font-size:32px; line-height:32px; font-weight:400; text-shadow:0 1px 1px rgba(256, 256, 256, .9);}

h2 { font-size:17px; font-weight:normal;}

h3 { font-size:17px; line-height:19px; font-weight:bold; color:#0060aa; margin:0 0 10px 0;}

h4 {}

p { margin:0 0 15px 0; line-height:17px;}

hr { margin:15px 0; height:20px; border:0; background:url(../images/bg/hr.png) no-repeat 0 0; clear:both; display:block;}





img, a img { border:0;}

.img-left { float:left; margin:0 15px 15px 0; }

.img-right { float:right; margin:0 0 15px 15px; }













/* ----- TABLE ----- */

table { border-collapse:collapse; border-spacing:0;}

table tr th { padding:4px; text-align:left; font-weight:bold;}

table tr td { padding:4px; text-align:left; font-weight:normal;}











/* ----- CONTAINER ----- */

#container { width:940px; margin:0 auto; margin-top:15px; background:#fff url(../images/bg/container-bg.png) no-repeat top; position:relative; z-index:100;

	border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;

	box-shadow:0 0 10px rgba(0, 0, 0, .1); -moz-box-shadow:0 0 10px rgba(0, 0, 0, .1); -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .1);

}







/* ----- HEADER ----- */

#header { height:160px; position:relative; z-index:110; }





	/* ----- LOGO ----- */

	#logo { position:absolute; left:30px; top:5px; width:880px; height:120px; background:url(../images/bg/logo-gabriel-fils.png) no-repeat center center;}

	#logo a { display:block; width:100%; height:100%;}

	

	

	/* ----- MENU ----- */

	#menu { display:block; position:absolute; left:30px; bottom:-20px; width:880px; height:48px; background:url(../images/bg/menu-bg.png) no-repeat 0 0;}

	#menu ul { margin:0 20px; padding:0; list-style:none;}

	#menu ul li { display:block; float:left; font-size:18px; margin-right:1px; font-family:'Roboto Condensed', serif;}

	#menu ul li a { display:block; float:left; height:45px; line-height:45px; padding:0 15px; color:#fff; text-decoration:none; text-shadow:0 1px 1px rgba(0, 0, 0, .7);

		transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s;

	}

	#menu ul li.active a,

	#menu ul li.active a:hover { background:#fbb016;

		border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0;

	}

	#menu ul li a:hover { background:#0066b4;}

	#menu ul li.active a { color:#0060aa; text-shadow:0 1px 1px rgba(256, 256, 256, .75); margin-top:3px; line-height:40px;}









/* ----- ECRAN ----- */

#ecran { height:300px; background:#333; position:relative;}



	.ecran-title { position:absolute; left:0; top:0; width:940px; height:300px; background:url(../images/bg/ecran-title.png?v=2) no-repeat 0 0; z-index:100;}

	.ecran-title .btn {}

	

	.flexslider { position:relative; z-index:0;}

		.flexslider ul.slides { margin:0; padding:0; list-style:none; height:300px;}

		.flexslider ul.slides li { display:block; float:left; height:300px; width:940px;}

		

		.flexslider ul.slides li.img-1 { background:url(../images/bg/ecran-1.jpg) no-repeat 0 0;}

		.flexslider ul.slides li.img-2 { background:url(../images/bg/ecran-2.jpg) no-repeat 0 0;}

		.flexslider ul.slides li.img-3 { background:url(../images/bg/ecran-3.jpg) no-repeat 0 0;}

		

		.flexslider ul.slides > li {display: none;} 

		.flexslider ul.flex-direction-nav {display:none;}

		.flexslider ol.flex-control-nav { margin:0; padding:0; position:absolute; text-align:center; width:100%; height:16px; list-style:none; left:0; bottom:10px;}

		.flexslider ol.flex-control-nav li {display:inline-block; width:16px; height:16px; margin:0 2px;}

		.flexslider ol.flex-control-nav li a { display:inline-block; width:16px; height:16px; line-height:16px; text-decoration:none; text-align:center;  overflow:hidden; text-indent:-999px;

			background:#b2b2b2; color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, .1); cursor:pointer;

			border-radius:16px; -moz-border-radius:16px; -webkit-border-radius:16px;

			box-shadow:0 0 10px rgba(0, 0, 0, .3); -moz-box-shadow:0 0 10px rgba(0, 0, 0, .3); -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .3);

		}

		.flexslider ol.flex-control-nav li a.flex-active { background:#0060aa;}















/* ----- CONTENU ----- */

#contenu { padding:30px; padding-bottom:60px;}



	

	

	#left-colon { float:left; width:600px;}

	#right-colon { float:right; width:250px;}





	

	/* ----- LEFT-COLON ----- */

	#left-colon ul { margin:20px; padding:0; list-style:none;}

	#left-colon ul li { padding:0 0 0 20px; background:url(../images/bg/liste.png) no-repeat left 0; line-height:19px; margin-bottom:5px; }

	#left-colon ul li a {}

	#left-colon img { background:#eee; padding:3px;}



	

	

	

	/* ----- RIGHT-COLON ----- */

	#right-colon { position:relative; margin-top:-70px; position:relative;}

	#right-colon:after { display:block; position:absolute; width:15px; height:40px; left:-15px; top:0; content:""; background:url(../images/bg/colt.png) no-repeat 0 0;}























/* ----- BOX-CONTACT ----- */

#box-contact { position:relative; background:#fbb016 url(../images/bg/box-contact.png) no-repeat center bottom; height:100px; padding:20px; margin-bottom:20px;}

#box-contact:after { display:block; position:absolute; left:0; bottom:-10px; height:10px; width:100%; content:""; background:url(../images/bg/ombre-right.png) no-repeat center top;}

#box-contact a { display:block; height:100%; width:100%;}





/* ----- BOX-REFERENCE ----- */

#box-reference { position:relative; background:#ddd url(../images/bg/box-reference.png) no-repeat center bottom; padding:20px; padding-bottom:35px; }

#box-reference:after { display:none; position:absolute; left:0; bottom:-10px; height:10px; width:100%; content:""; background:url(../images/bg/ombre-right.png) no-repeat center top;}



#box-reference h3 { margin:0 0 10px 0; padding:0; }





/* ----- BOX-ADRSSE ----- */

#box-adresse { position:relative; background:#003f72; padding:20px; margin-bottom:20px; color:#fff;}

#box-adresse:after { display:block; position:absolute; left:0; bottom:-10px; height:10px; width:100%; content:""; background:url(../images/bg/ombre-right.png) no-repeat center top;}

	

	#box-adresse h3 { color:#fff;}

	#box-adresse p { font-size:12px; line-height:15px; color:rgba(256, 256, 256, .6);}



















/* --------------- / GALLERIE - (CAROUSEL) / --------------- */

#gallerie { width:230px;  height:173px; margin:0 -10px; background:url(../images/bg/box-ref-bg.png) no-repeat 0 0;}



	#carousel { width:202px; height:134px; margin:0; padding:19px 0 0 14px;}

	#carousel ul { margin:0; padding:0; list-style:none;}

	#carousel ul li { display:block; float:left; width:202px; height:134px; position:relative; }

	#carousel ul li img { position:absolute; left:0; top:0; z-index:0; width:202px; height:134px;}

	#carousel ul li a { display:block; width:202px; height:134px; position:absolute; left:0; top:0; z-index:10; background:url(../images/bg/zoom.png) no-repeat center center; opacity:0.5; 

		transition: all 0.3s ease-out 0s;

		-moz-transition: all 0.3s ease-out 0s;

		-webkit-transition: all 0.3s ease-out 0s;

	}

	#carousel ul li a:hover { opacity:1; }

	

	a.carousel-control { display:none;}

	.center-wrap { width:100%; text-align:center; margin:22px 0 0 0;}

	.center-wrap p {}

	.center-wrap p a { display:inline-block; width:16px; height:16px; line-height:16px; padding:0; margin:0 1px; background:url(../images/bg/center-wrap.png) no-repeat right top; overflow:hidden; text-indent:-999px;}

	.center-wrap p a.active { background-position:left top;}





















/* --------------- / FORMS / --------------- */

.formulaire { padding:20px; background:#eee; margin-bottom:24px;

	border-radius:12px;

	-moz-border-radius:12px;

	-webkit-border-radius:12px;

}

	form { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

	fieldset { margin:0; padding:10px; border:1px solid #ddd; margin-bottom:15px;}

	

	label {}

	label span {color:#df1500;}

	

	

	input[type=text],

	input[type="email"], 

	input[type="password"], 

	input[type="search"], 

	input[type="url"],

	input[type=submit],

	input[type=button],

	input.champ,

	input.champ-medium,

	input.champ-small,

	input.button,

	input.btn,

	button,

	select,

	textarea { margin:0; padding:5px; font-family:Arial, Helvetica, sans-serif; font-size:13px; border:1px solid #b2b2b2; display:inline-block; margin:0 2% 0 0; background:#fff; position:relative;

		border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; 

		box-sizing: border-box; -moz-box-sizing: border-box; webkit-box-sizing: border-box;

		box-shadow:0 5px 5px rgba(0, 0, 0, .05) inset; -moz-box-shadow:0 5px 5px rgba(0, 0, 0, .05) inset; -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, .05) inset;

		transition: all 0.3s ease-out 0s;

		-moz-transition: all 0.3s ease-out 0s;

		-webkit-transition: all 0.3s ease-out 0s;	

		}

	

	input[type=text]:focus,

	input[type="email"]:focus, 

	input[type="password"]:focus, 

	input[type="search"]:focus, 

	input[type="url"]:focus,

	input[type=submit]:focus,

	input[type=button]:focus,

	input.champ:focus,

	input.champ-medium:focus,

	input.champ-small:focus,

	input.button:focus,

	input.btn:focus,

	button:focus,

	select:focus,

	textarea:focus { border-color:#f2be00; outline:none;

		box-shadow:0 5px 5px rgba(0, 0, 0, .05) inset, 0 0 5px #f2be00;

		-moz-box-shadow:0 5px 5px rgba(0, 0, 0, .05) inset, 0 0 5px #f2be00;

		-webkit-box-shadow:0 5px 5px rgba(0, 0, 0, .05) inset, 0 0 5px #f2be00;

	}

		

	

	input[type=text], input.champ { width:78%;}

	input.champ-medium { width:58%;}

	input.champ-small { width:18%;}

	textarea { width:78%; height:120px;}

	p.legend { margin:0; padding:0; font-size:11px; color:#999;}

	p.legend span {color:#df1500;}

	

	

	input[type=submit],

	input[type=button],

	input.button { background:#fbb016; color:#000; font-size:15px; font-weight:bold; padding:6px 12px; cursor:pointer; border-color:#fbb016; text-shadow:1px 1px 1px rgba(256, 256, 256, .9);

		transition: all 0.3s ease-out 0s;

		-moz-transition: all 0.3s ease-out 0s;

		-webkit-transition: all 0.3s ease-out 0s;

	}

	input[type=submit]:hover,

	input[type=button]:hover,

	input.button:hover { background:#0060aa; border-color:#0060aa; color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, .9);}



















/* ----- GOOGLE-MAP ----- */

#google_map { overflow:hidden; background:#eee url(../images/bg/ajax-loader.gif) no-repeat center center;

	border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; 

	}













/* ----- PHOTOS ----- */

.photos {}

.photos ul { margin:10px !important; padding:0 !important; list-style:none;}

.photos ul li { display:block; float:left; margin:5px !important; background-image:none !important;}

.photos ul li a { display:block; float:left; margin:5px !important;}

.photos ul li a img { width:140px !important; height:100px !important;}

.photos ul li a:hover img { background:#fbb016 !important;}

























/* --------------- / FOOTER / --------------- */

#footer { padding:40px 0; background:#000; border-top:5px solid #fbb016; position:relative; z-index:0; margin-top:-30px; }

#footer_wrap { margin:0 auto; width:880px;}

#footer p { margin:0; padding:0; color:#fff;}

#foot_left { float:left;}

#foot_right { float:right;}