/**
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: styles.css 1 2013-01-14 10:30:16Z loops $
 */

/*-------------------------------------------------
	DEFAULTS
---------------------------------------------------*/

html, body { height: 100%; }
html { font-size: 10px; font-size: 62.5% /* = 10px */; }
/* Hack for google chrome with .rem units */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 body > * {
  font-size: 1.3rem;
 }
}
body { background-color: #656465; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 13px; font-size: 1.3rem; color: #656465; }
.sitewidth { width: 960px; margin: 0 auto; }

/* Fonts & colors */
.font-0 { font-family: 'oswaldlight', "Lucida Grande", "Lucida Sans Unicode", sans-serif; text-transform: uppercase; }
.font-1 { font-family: 'oswaldregular', "Lucida Grande", "Lucida Sans Unicode", sans-serif; text-transform: uppercase; }
.font-2 { font-family: 'pt_serifregular', Georgia, "Times New Roman", Times, serif; }
.font-3 { font-family: 'pt_serifitalic', Georgia, "Times New Roman", Times, serif; }

.cl-0 { color: #656465; }
.cl-1 { color: #b0ac9c; }

/* Links */
a { text-decoration: underline; color: #b0ac9c; }
a:hover { text-decoration: none; }

/* Buttons */
.btn { background-color: #b0ac9c; padding: 5px 13px; color: white; text-decoration: none; display: inline-block; border-radius: 20px; position: relative;  -webkit-transition: background-color 100ms ease-in-out;  -moz-transition: background-color 100ms ease-in-out; transition: background-color 100ms ease-in-out; }
.btn:hover { background-color: #656465; }

.btn-icn { padding-left: 25px; }
.btn-icn:before { content: ""; display: block; background-image: url(images/sprite.png); background-repeat: none; position: absolute; -moz-transition: background-position 100ms ease-in-out; -webkit-transition: background-position 100ms ease-in-out; transition: background-position 100ms ease-in-out; }

.btn-plan:before { background-position: right top; left: 8px; top: 5px; height: 15px; width: 11px;  }
.btn-plan:hover:before { background-position: right -15px; }

.btn-contact:before { background-position: right -30px; left: 8px; top: 8px; height: 8px; width: 11px;  }
.btn-contact:hover:before { background-position: right -38px; }

.btn-close:before { background-position: right -46px; left: 8px; top: 8px; height: 11px; width: 11px;  }
.btn-close:hover:before { background-position: right -57px; }

/* Headings */
h1, .h1 { font-family: 'oswaldlight', "Lucida Grande", "Lucida Sans Unicode", sans-serif; text-transform: uppercase; margin: 0; padding: 0; font-weight: normal; font-size: 33px; font-size: 3.3rem; }
h2, .h2 { font-family: 'pt_serifitalic', Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0; font-weight: normal; color: #b0ac9c; font-size: 16px; font-size: 1.6rem; }
h3, .h3 { font-family: 'pt_serifitalic', Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0; font-weight: normal; color: #b0ac9c; font-size: 16px; font-size: 1.6rem; }
h3 + p, .h3 + p  { margin-top: 0; }

/* Paragraph */
p { line-height: 17px; line-height: 1.7rem; }
.alt-p { /*font-family: 'pt_serifregular', Georgia, "Times New Roman", Times, serif; */color: #b0ac9c; font-size: 17px; font-size: 1.7rem; line-height: 22px; line-height: 2.2rem; }

/* tables */
table { width: 100%; }
table caption { caption-side: top; padding: 10px 0; background: #656465 url(images/sprite.png) left -157px repeat-x; color: white; font-family: 'pt_serifitalic', Georgia, "Times New Roman", Times, serif; font-size: 16px; font-size: 1.6rem; }
th, td { padding: 10px 15px; text-align: left; border-bottom: 1px solid #b0ac9c; vertical-align: middle; }
thead th, thead td { background: #b0ac9c; color: white; text-align: left; font-weight: normal; padding: 10px 15px; }
tbody tr:nth-child(2n+1) th, tbody tr:nth-child(2n+1) td { background: #eae8e3; }
.level th, .level td { border-top: 3px solid #b0ac9c; }
tbody tr:hover td, tbody tr:hover th { background: white !important; }

/* selected text */
::selection { background-color: #656465; color: white; }
::-moz-selection { background-color: #656465; color: white;} 

/* tables */
address { font-style: normal; margin: 25px 0; }

abbr[title] { border: 0; }

/*-------------------------------------------------
	Forms
---------------------------------------------------*/

#form-container { background: #fafafa; padding: 25px 50px 0px 0px; max-width: 500px; }
form { margin-top: 20px; }
label { font-family: 'pt_serifitalic', Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0; font-weight: normal; color: #b0ac9c; font-size: 14px; font-size: 1.4rem; display: block; }
input[type=text], textarea { width: 100%; border: 1px solid #ccc; border-radius: 2px; padding: 5px; }
.form-row + .form-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e1e1; }
button { border: none; margin-top: 15px; }
.form-row:hover label { color: #656465 }
.form-row:hover input[type=text], .form-row input[type=text]:focus { border-color: #656465 }

/* error (by default #c22b2b) */
.form-row-error label, .form-row-error select[name], .form-row-error textarea[name], .form-row-error input[type="text"], .form-row-error input[type="password"], .form-row-error input[type="email"], .form-row-error input[type="url"], .form-row-error input[type="date"] { border-color: #c22b2b; color: #c22b2b; }

/* message */
.msg { padding: 15px 20px;  }
.msg-error { color: #c22b2b; background: #f3e9e9; }
.msg-success { color: #379c14; background: #eaf2e7; }
.msg-notice { color: #557a94; background: #e6eef3; }

/*-------------------------------------------------
	Layout
---------------------------------------------------*/

/* Container */
#container { max-width: 1450px; margin: 0 auto; position: relative; height: 100%; background-color: #fafafa; box-shadow: 0 0 10px rgba(0,0,0,.5); padding-top: 100px; z-index: 10; }

/* Header */
#header { height: 100px; position: fixed; width: 100%; top: 0; left: 0; right: 0; z-index: 10; min-width: 960px; }
	#header-container { background-color: white; position: relative; max-width: 1450px; margin: 0 auto; box-shadow: 0 5px 5px rgba(0,0,0,.15); }
	#logo { float: left; }
	
	#nav { float: right; position: absolute; right: 10px; bottom: 0; }
	.nav-item { float: left; }
	.nav-item + .nav-item { border-left: 1px solid #dcdcdc; }
	.nav-link { text-decoration: none; padding: 10px 16px 32px 16px; display: block; letter-spacing: 1px; }
	.nav-link:hover, .nav-link.current { color: #656465; }
	
		
/* Banner */
.banner { background: #eee; text-align: center; overflow: hidden; }
	
	/* Banner homepage */
	.banner-project { height: 100%; background: #b0ac9c; position: relative; }
	.banner-project-img { position: relative; top: 0; width: 100%; min-width: 960px; }
	
	#scroll-invite-container { position: relative; height: 100px; width: 100%; margin-top: -210px; }
	#scroll-invite { display: block; position: absolute; width: 72px; padding: 10px 0; left: 50%; bottom: 0; margin-left: -36px; background: #fafafa; text-decoration: none; text-align: center; box-shadow: 0 -5px 5px rgba(0,0,0,.15); }
		#scroll-invite:before { content: ""; display: block; margin: 0 auto 5px auto; width: 46px; height: 45px; background: url(images/sprite.png) left -41px no-repeat; }
	

/* Section */
.section { padding: 100px 0; background-color: #fafafa; position: relative; }
	.section.alt { background-color: #f4f3ef; }
	
	.section-intro { width: 320px; }
	.section-intro-img { position: relative; width: 444px; overflow: hidden; }
	.section-intro-legend { background: #fafafa; padding: 10px; position: absolute; padding-left: 40px; left: 0; right: 0; bottom: -36px; font-size: 13px; font-size: 1.3rem; -moz-transition: bottom 300ms ease-in-out; -webkit-transition: bottom 300ms ease-in-out; transition: bottom 300ms ease-in-out; }
	.section-intro-legend:before { content: ""; display: block; width: 30px; height: 1px; background: #b0ac9c; left: 0; position: absolute; top: 50%; margin-top: -1px; }
	.section-intro-img:hover .section-intro-legend { bottom: 0; }
	
	.section-content { width: 577px; }
	.section-content-col { float: left; width: 100%; padding-right: 50px; }
	
	.col-2 .section-content-col { width: 50%; }
	.col-3 .section-content-col { width: 33.333%; }
	.col-4 .section-content-col { width: 25%; }
	
	.section-heading { height: 165px; }
	.section-subtitle { position: relative; margin-top: 8px; }
	.section-subtitle:before { display: block; content: ""; background: url(images/sprite.png) left top no-repeat; width: 47px; height: 41px; position: absolute; top: 0; }
	.section-subtitle:after { display: block; content: ""; background-color: #b0ac9c; width: 2px; height: 80px; position: absolute; top: 0; }
	
	.left .section-intro-img { left: -127px; }
	.left .section-title { text-align: left; }
	.left .section-subtitle { padding-left: 50px; text-align: left; }
	.left .section-subtitle:before { left: -25px; }
	.left .section-subtitle:after { left: 34px; }
	
	.right .section-intro-img { left: 0; }
	.right .section-title { text-align: right; }
	.right .section-subtitle { padding-right: 50px; text-align: right; }
	.right .section-subtitle:before { right: -25px; }
	.right .section-subtitle:after { right: 34px; }
	
	#map-canvas { width: 766px; height: 512px; position: relative; left: -130px; }
	.map-legend { text-align: right; }
	.map-legend-item + .map-legend-item { margin-top: 20px; }
	.map-legend span { display: block; margin-top: 5px; }


/* Footer */
#footer { background: #b0ac9c url(images/sprite.png) left -200px repeat-x; padding: 130px 0 23px 0; color: white; }

	#footer a { color: white; }
	
	.footer-col { width: 320px; float: left; padding: 30px 0 0 30px; position: relative; }
	.footer-col:before { content: ""; display: block; width: 1px; height: 80px; background: white; position: absolute; left: 0; top: 0; }
	
	.footer-title { margin-bottom: 10px; color: white; }
	.footer-address { font-style: normal; }
	.footer-address + .footer-address { margin-top: 20px; }
	.footer-address .org { font-weight: bold; }
	
	.legals { font-size: 11px; font-size: 1.1rem; margin-top: 73px; }


/* Overlay */
  .js-mask{ background: #777777; opacity: 0.7; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; overflow: hidden; cursor: pointer; }
    .js-overlay-content { box-shadow: 0 0 50px rgba(0,0,0,.5); position: absolute; top: 10%; left: 0; right: 0; bottom: auto; margin: auto; max-width: 500px; z-index: 100; }
        .js-content-wrapper{ background: #fff; padding: 30px; padding: 3rem; -webkit-box-shadow: 0 0 100px rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; }
		.js-overlay-close { position: absolute; right: 0; top: -35px; }
        .js-loader{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: url('./images/ajax-loader.gif') no-repeat center center transparent; z-index: 101; }
  
	
/*** Media queries ***/
/* these media queries are just samples */
/* use appropriate queries to fit the design */

@media screen and (max-width: 1400px) {
	
	#logo { display: block; width: 297px; overflow: hidden; position: relative; }
	#logo img { position: relative; left: -445px; }
	
}