/* HARD RESET */

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

/* GENERAL STYLE */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin-bottom:40px;
  font-size:14px;
  line-height:1.7;
  font-weight:400;
  font-family:'Open Sans',sans-serif;
  color:#a3becc;
  background-color:#343b40;
}

strong { font-weight:bold; }
em  { color:#fff; }
code { font-family:monospace; }
img { vertical-align:middle; max-width:100%; }
textarea { resize:vertical; }

:focus {
  outline:#fff auto 5px;
}

a, a:visited, a:hover, a:active {
  color:#fff;
  text-decoration:none;
}

a:hover, a:active {
  color:#fc0;
}

i { color:#fff; }

h1, .h1, h2, .h2 {
  color:#fff;
  text-transform:uppercase;
  line-height:1.1;
  font-weight:600;
}

h1, .h1 { font-size:36px; letter-spacing:-2px; }
h2, .h2 { font-size:24px; letter-spacing:-.75px; }

/* 990px GRID (oui monsieur, 990) */
/* 5*30+6*140=990 */

.wrapper { width:990px;margin-left:auto;margin-right:auto; }
.span1, .span15, .span2, .span3, .span4 { float:left; margin-left:30px; }
.span1:first-child, .span15:first-child, .span2:first-child, .span3:first-child, .span4:first-child { margin-left:0; }
.span1 { width:140px; }
.span15 { width:225px; }
.span2 { width:310px; }
.span4 { width:650px; }

/* MAIN LAYOUT */

header {
  height:100px;
  border-bottom:4px #23282b solid;
  background-color:#292f34;
  text-transform:uppercase;
  font-weight:600;
  line-height:36px;
}

.header-title {
  margin:30px 0;
  float:left;
}

.header-title span {
  color:#515d67;
}

nav {
  text-align:right;
}

nav a {
  display:inline-block;
  margin-left:20px;
  padding:30px 0;
  font-size:20px;
  letter-spacing:-1px;
}

nav a, nav a:visited {
  color:#8a9499;
  border-bottom-width:0;
  transition:border-bottom-width .1s ease-out;
}

nav a:hover, nav a:active {
  color:#e5f6ff;
  border-bottom:4px #e5f6ff solid;
}

nav a.active {
  color:#fc0;
  border-bottom:4px #fc0 solid;
}

/* SPECIFIC */

.bg-light { background-color:#3d474d; }
.bg-dark { background-color:#292f34; }

.text-grey { color:#c2c8cc; }

.spinner {
  width:100px;
  height:100px;
  position:relative;
  text-align:center;
}

.spinner:before {
  content:"";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}

.spinner-text {
  display:inline-block;
  vertical-align:middle;
  color:#fff;
  font-weight:600;
  position:relative;
}

.spinner-left, .spinner-right {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  overflow:hidden;
}

.spinner-right {
  left:50%;
}

.spinner-semicircle {
  width:200%;
  height:100%;
  border:5px #8fa6b3 solid;
  border-radius:50%;
}

.spinner-left .spinner-semicircle {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  border-left-color:#374045;
  border-bottom-color:#374045;
}

.spinner-right .spinner-semicircle {
  margin-left:-100%;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  border-right-color:#374045;
  border-bottom-color:#374045;
}

.spinner-30p .spinner-left .spinner-semicircle {
  -webkit-transform:rotate(-9deg);
  -moz-transform:rotate(-9deg);
  -ms-transform:rotate(-9deg);
  -o-transform:rotate(-9deg);
  transform:rotate(-9deg);
}

.spinner-30p .spinner-right .spinner-semicircle {
  -webkit-transform:rotate(9deg);
  -moz-transform:rotate(9deg);
  -ms-transform:rotate(9deg);
  -o-transform:rotate(9deg);
  transform:rotate(9deg);
}

.spinner-40p .spinner-left .spinner-semicircle {
  -webkit-transform:rotate(-27deg);
  -moz-transform:rotate(-27deg);
  -ms-transform:rotate(-27deg);
  -o-transform:rotate(-27deg);
  transform:rotate(-27deg);
}
.spinner-40p .spinner-right .spinner-semicircle {
  -webkit-transform:rotate(27deg);
  -moz-transform:rotate(27deg);
  -ms-transform:rotate(27deg);
  -o-transform:rotate(27deg);
  transform:rotate(27deg);
}

.spinner-60p .spinner-left .spinner-semicircle {
  -webkit-transform:rotate(-63deg);
  -moz-transform:rotate(-63deg);
  -ms-transform:rotate(-63deg);
  -o-transform:rotate(-63deg);
  transform:rotate(-63deg);
}

.spinner-60p .spinner-right .spinner-semicircle {
  -webkit-transform:rotate(63deg);
  -moz-transform:rotate(63deg);
  -ms-transform:rotate(63deg);
  -o-transform:rotate(63deg);
  transform:rotate(63deg);
}

.spinner-80p .spinner-left .spinner-semicircle {
  -webkit-transform:rotate(-99deg);
  -moz-transform:rotate(-99deg);
  -ms-transform:rotate(-99deg);
  -o-transform:rotate(-99deg);
  transform:rotate(-99deg);
}

.spinner-80p .spinner-right .spinner-semicircle {
  -webkit-transform:rotate(99deg);
  -moz-transform:rotate(99deg);
  -ms-transform:rotate(99deg);
  -o-transform:rotate(99deg);
  transform:rotate(99deg);
}

.spinner-90p .spinner-left .spinner-semicircle { 
  -webkit-transform:rotate(-117deg);
  -moz-transform:rotate(-117deg);
  -ms-transform:rotate(-117deg);
  -o-transform:rotate(-117deg);
  transform:rotate(-117deg);
}

.spinner-90p .spinner-right .spinner-semicircle {
  -webkit-transform:rotate(117deg);
  -moz-transform:rotate(117deg);
  -ms-transform:rotate(117deg);
  -o-transform:rotate(117deg);
  transform:rotate(117deg);
}

.caption {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  text-align:left;
}

.caption span {
  position:absolute;
  bottom:0;
  left:0;
  background-color:#fff;
  color:#292f34;
  padding:10px;
  text-transform:uppercase;
  font-weight:600;
}

/* FORMS */

.alert-error {
  color:#c00;
  font-weight:600;
}

.alert-success {
  color:#dff0d8;
  font-weight:600;
}

.label {
  display:inline-block;
  padding:10px;
  font-weight:600;
  text-transform:uppercase;
  color:#b8d5e5;
}

input[type="text"], input[type="email"], textarea {
  width:100%;
  padding:10px;
  background-color:#525f66;
  color:#fff;
  vertical-align:middle;
}

input[type="text"].error, input[type="email"].error, textarea.error {
  border:1px #c00 solid;
  padding:9px;
}

input[type="submit"] {
  padding:10px;
  width:100%;
  font-weight:600;
  text-transform:uppercase;
  background-color:#7a8e99;
  color:#fff;
  cursor:pointer;
  text-align:center;
}

input[type="submit"]:hover {
  background-color:#fff;
  color:#23282b;
}

.radioset {
  padding-left:10px;
}

input[type="radio"] {
  vertical-align:middle;
}

input[type="radio"] + label {
  vertical-align:middle;
  display:inline-block;
  margin-right:10px;
}

/* ANIMATION */

.animated .a-opacity {
  transition:opacity .2s ease-out;
  opacity:1;
}

.animated .a-opacity.future {
  opacity:0;
}

.animated .spinner-text {
  transition:opacity .2s cubic-bezier(0.4, 0.0, 0.2, 1);
  opacity:1;
}

.animated .spinner.future .spinner-text {
  opacity:0;
}

.animated .spinner-semicircle {
  transition:all .5s cubic-bezier(0.4, 0.0, 0.2, 1);
  transition-delay:.0.5s;
  opacity:1;
}

.animated .spinner.future .spinner-semicircle {
  opacity:0;
}

.animated .spinner.future .spinner-left .spinner-semicircle {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}
.animated .spinner.future .spinner-right .spinner-semicircle {
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.animated .a-rotation {
  transition:all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-origin:50% 0;
  -webkit-transform:perspective(500px) rotateX(0) translateY(0);
  -moz-transform:perspective(500px) rotateX(0) translateY(0);
  -ms-transform:perspective(500px) rotateX(0) translateY(0);
  -o-transform:perspective(500px) rotateX(0) translateY(0);
  transform:perspective(500px) rotateX(0) translateY(0);
  opacity:1;
}

.animated .a-rotation.future {
  -webkit-transform:perspective(500px) rotateX(0) translateY(250px);
  -moz-transform:perspective(500px) rotateX(0) translateY(250px);
  -ms-transform:perspective(500px) rotateX(0) translateY(250px);
  -o-transform:perspective(500px) rotateX(0) translateY(250px);
  transform:perspective(500px) rotateX(-30deg) translateY(250px);
  opacity:0;
}

/* HELPERS */

.mha { margin-left:auto;margin-right:auto; }
.mt5 { margin-top:5px; }
.mt20 { margin-top:20px; }
.mt40 { margin-top:40px; }
.mt60 { margin-top:60px; }

.p30 { padding:30px; }
.p40 { padding:40px; }
.pv40 { padding-top:40px;padding-bottom:40px; }
.pv60 { padding-top:60px;padding-bottom:60px; }

.tac { text-align:center; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* RESPONSIVE TIME :D */

@-webkit-viewport {
	width: device-width;
	zoom: 1.0;
}
@-moz-viewport {
	width: device-width;
	zoom: 1.0;
}
@-ms-viewport {
	width: device-width;
	zoom: 1.0;
}
@-o-viewport {
	width: device-width;
	zoom: 1.0;
}
@viewport {
	width: device-width;
	zoom: 1.0;
}

@media (max-width:1030px) {
  .wrapper {
    width:100%;
    padding:0 3.0303030303030303%;
  }
  .span1, .span15, .span2, .span3, .span4 { margin-left:3.0303030303030303%; }
  .span1 { width:14.14141414141414%; }
  .span15 { width:22.727272727272727%; }
  .span2 { width:31.31313131313131%; }
  .span4 { width:65.65656565656565%; }
  
  .contact-form .span2 {
    width:100%;
    margin:0;
  }
}

@media (max-width:767px) {
/*
  .span1, .span15, .span2, .span3, .span4 { 
    margin-left:0;
    float:none;
    width:auto;
  }*/
  
  .span1, .span15, .span2, .span3, .span4 { margin-left:3.0303030303030303%; }
  .span1 { width:31.31313131313131%; margin-top:30px; }
  .span1:nth-child(-n+3) { margin-top:0; }
  .span15 { width:48.484848484848484%; margin-top:30px }
  .span1:nth-child(-n+2) { margin-top:0; }
  
  .span1:nth-child(3n+1) { margin-left:0; }
  .span15:nth-child(2n+1) { margin-left:0; }
  
  header {
    height:auto;
    padding-top:20px;
  }
  
  .header-title {
    float:none;
    margin:0;
    display:block;
  }
  
  nav {
    text-align:left;
    margin-bottom:-4px;
  }
  
  nav a {
    margin-left:auto;
    margin-right:10px;
    padding:20px 0;
  }
}

@media (max-width:550px) {
  .span1, .span15, .span2, .span3, .span4 {
    margin:30px 0 0 !important;
    float:none;
    width:auto;
  }
  
  .span1:first-child, .span15:first-child, .span2:first-child, .span3:first-child, .span4:first-child {
    margin-top:0 !important;
  }
  
  .contact-form .span2 {
    margin-top:0 !important;
  }
}

@media (max-width:430px) {
  nav {
    padding:20px 0;
    margin:0;
  }
  nav a {
    padding:0;
  }
}