/* base rules :
 * text point size: 1em (16px browser default)
 * line spacing: 120%
 *
 */

@font-face {
    font-family: 'futura_lt';
    src: url('../../fonts/futura-lt-book-webfont.eot');
    src: local(''), 
		url('../../fonts/futura-lt-book-webfont.eot#iefix') format('embedded-opentype'),
		url('../../fonts/futura-lt-book-webfont.woff') format('woff2'),
		url('../../fonts/futura-lt-book-webfont.woff') format('woff'),
		url('../../fonts/futura-lt-book-webfont.ttf') format('truetype'),
		url('../../fonts/futura-lt-book-webfont.svg') format('svg');
    font-style: regular;
}

@font-face {
    font-family: 'bank-gothic-medium';
    src: url('../../fonts/bank-gothic-medium/bank_gothic_medium-webfont.eot');
    src: url('../../fonts/bank-gothic-medium/bank_gothic_medium-webfont.eot#iefix') format('embedded-opentype'),
         url('../../fonts/bank-gothic-medium/bank_gothic_medium-webfont.woff') format('woff2'),
         url('../../fonts/bank-gothic-medium/bank_gothic_medium-webfont.woff') format('woff'),
         url('../../fonts/bank-gothic-medium/bank_gothic_medium-webfont.ttf') format('truetype'),
         url('../../fonts/bank-gothic-medium/bank_gothic_medium-webfont.svg') format('svg');
    font-weight: medium;
    font-style: regular;
}

/* icon font */

@font-face {
    font-family: 'transit';
    src:
        url('../../fonts/transit_ljnguq.ttf') format('truetype'),
        url('../../fonts/transit_ljnguq.woff') format('woff'),
        url('../../fonts/transit_ljnguq.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"] {
    font-family: 'transit' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.icon-attention:before {content: "\e905 ";color:rgba(255,0,0,0.9);font-weight: normal;font-size: 2.4em;float:left;}
.icon-min:before {content: "\e904 ";}
.icon-e2:before {content: "\e900 ";}
.icon-i2:before {content: "\e901 ";}
.icon-i1:before {content: "\e902 ";}
.icon-e1:before {content: "\e903 ";}

/* svg properties */

.hidden {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
	overflow: hidden;
}

text {
	text-anchor: middle;
}

/* common */

* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding:0;
	margin:0;
}

a {
	text-decoration:none;
}

html {
	font-size:100%;
}

body {
	text-rendering: optimizeLegibility;
	background: url(../../img/bg.jpg) no-repeat center fixed;
	background-size: cover;
	-webkit-background-size: cover;
	//color:white;
	color:rgba(255, 255, 255, 0.7);
}

/* header */

header {
	height: 100vh;
	font-family: 'bank-gothic-medium';
	text-transform: uppercase;
	text-align: center;
	filter: drop-shadow( 1px 1px 2px #000000 );
	-webkit-filter: drop-shadow( 1px 1px 2px #000000 );
}

div#hgroup {
	width:90%;
	margin:0 auto;
	height:auto;
	padding-top:6%;
	font-size:0;
}

header h1, header h2 {
  line-height:0.1;
  font-weight: normal;
}

.svg-separator-container {
	display: inline-block;
	position: relative;
	width: 98%;
	padding-bottom:0.9%;
	vertical-align: middle;
	margin: 2% auto;
}

.svg-h1-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom:9.3%;
	vertical-align: middle;
}

.svg-h2-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom:10.8%;
	vertical-align: middle;
}

.svg-content {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

header > nav {
	position: absolute;
	bottom: 4%;
	left:0;
	right:0;
	//font-size: 1.2vw;
	text-align: center;
	text-transform: uppercase;
	filter: drop-shadow( 1px 1px 2px #000000 );
	-webkit-filter: drop-shadow( 1px 1px 2px #000000 );
	color:rgba(255,255,255,0.7);
}

header > nav a {
	display:block;
	width:100%;
	line-height:1;
	padding:0.6em 0;
	color:rgba(255,255,255,0.7);
}
header > nav a:hover {
	color:rgba(255,255,255,1);
}

header > nav ul {
	list-style:none;
}

/* main content section */

section {
	background-color:rgba(0, 0, 0, 0.5);
}

article {
	max-width:600px;
	margin:0 auto;
	//border:1px solid white;
	padding-top:14vh;
}

article, footer, article h1, article h2, input, select, th {
	font-family:'futura_lt';
	font-weight:normal;
}

article {
	min-height:100vh;
}

article p {
	line-height:1.2;
	margin-top:1.2em;
}

article h2 {
	font-size:1.5em;
	font-weight:bold;
}

article > ul {
	line-height:1.2;
	margin-top:1.2em;
	list-style-position: inside;
}

#media a {
	color:white;
	background-color:rgba(102, 204, 255, 0.8);
	font-weight:600;
	padding:0 0.6em;
	border-radius:2px;
	font-size:0.8em;
}

#media a[rel="license"] {
	font-weight:normal;
	background-color:inherit;
	padding:0;
	font-size:1em;
	color:rgba(102, 204, 255, 0.8);
}

.sc {
	font-variant:small-caps;
}

/*
article h2 {
	font-size:1.2em;
	margin-top:1.2em;
}
*/

figure {
	margin-top:1.2em;
}

figcaption {
	text-align:center;
	font-size:0.9em;
}

img {
	width:100%;
	height:auto;
}

/* main content user panes (form and result) */

.c1 {
	background-color:rgba(20, 20, 20, 0.9);
	padding:1.2em;
	margin:1.2em 0;
}

.result {
	margin-top:1.2em;
}

.c2 > form > div+div {
	margin-top:1.2em;
}

#play .c1 {
	margin-bottom:0;
}

#map {
	height: 30vh;
}

fieldset {
	border:none;
	background-color:inherit;
	margin-bottom: 1.2em;
	padding-top: 0.8em;
}

input, select {
    height: 48px;
	font-size:1em;
	background-color:inherit;
	color:inherit;
	
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	
	//border:none;
	//border-bottom:2px solid transparent;
	
	border-color: rgba(255, 255, 255, 0.38);
	border-style: solid;
	
	padding-left: 0.3em;
}

input[type=number] {
	-moz-appearance: textfield;
}

.c1 input, .c1 select {
	width:calc(100%/4);
}

#instant input {
	width:calc(100%/3);
}

input.full {
	width:100%;
	border-width:thin;
	border-radius:2px;
}

input.l {
	border-width:thin 0 thin thin;
	border-radius:2px 0 0 2px;
}

input.m {
	border-width:thin 0;
}

input.r, select.r {
	border-width:thin thin thin 0;
	border-radius:0 2px 2px 0;
}

button[type=submit] {
	height:36px;
	font-size:1em;
	font-weight:600;
	width:auto;
	min-width:64px;
	text-align:center;
	padding:0 1em;
	background-color:rgba(102, 204, 255, 0.8);
	color:rgba(255, 255, 255, 0.8);
	border-radius:2px;
	border:none;
	display:block;
	margin:1.2em auto 0 auto;
	cursor:pointer;
}

/* main content table */

table {
	width:100%;
	border-collapse:collapse;
	text-align:center;
}

th {
	font-weight:bold;
}

.unit th {
	font-weight:normal;
}

td {
	padding:0.3em;
}

td.img {
	width:1.2em;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}

td.e1 { background-image:url('../../img/contact_1.svg'); }
td.i1 { background-image:url('../../img/contact_2.svg'); }
td.min { background-image:url('../../img/min.svg'); }
td.i2 { background-image:url('../../img/contact_3.svg'); }
td.e2 { background-image:url('../../img/contact_4.svg'); }

caption {
	margin-top: 1.2em;
	caption-side: bottom;
	font-size:0.8em;
}
caption ul {list-style:none;}
caption li {display:inline;padding: 0 0.3em;}
caption li:after {content:",";}
caption li:last-child:after {content:".";}

/* footer */

footer {
	padding-top:14vh;
	padding-bottom:3vh;
	background-color:rgba(25,35,50,0.8);
	text-align:center;
}

footer > div {
	max-width:600px;
	margin:0 auto;
}

footer p > img {
	height:5vh;
	width:auto;
	display:block;
	margin:0 auto;
}

footer ul {
	margin:1.2em 0;
	list-style:none;
}

/* fixed navbar */

nav.fixed {
	display:none;
	position:fixed;
	top:0;
	width:100%;
	height:7vh;
	padding:1vh 0;
	background-color:rgba(25,35,50,0.8);
	z-index:1000;
	text-align:center;
}

nav.fixed ul {
	list-style:none;
}

nav.fixed li {
	display: inline-block;
	width:calc(100%/5);
	max-width:calc(600px/5);
}

nav.fixed img {
	height:5vh;
}

nav.fixed a {
	display:block;
	height:5vh;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}

a#a-intro {
	background-image:url('../../img/presentation2.svg');
}

a#a-compute {
	background-image:url('../../img/localisation.svg');
}

a#a-play {
	background-image:url('../../img/parallaxe.svg');
}

a#a-media {
	background-image:url('../../img/ressources_peda.svg');
}

a#a-credits {
	background-image:url('../../img/infos.svg');
}

@media all and (min-width:481px) {
	div#hgroup {
		width:40%;
		padding-top:4vh;
	}
	
	.c2 {
		display:table;
		border-collapse:separate;
	}
	
	.c2 > form > div, .c2 > form > div+div {
		width:50%;
		display:table-cell;
	}
	
	.c2 > form > div+div {
		padding:0 0 1.2em 1.2em;
	}
}