/* @override 
	http://nodaldesign.ch/code/layout/styles.css
	http://nodaldesign.ch/layout/styles.css */

body {
    background: #333;
    color: #EEE;
    font-family: "Open sans", sans-serif;
    font-weight: 600;
    -webkit-backface-visibility: hidden;
}
.loading .n-section {
    opacity: 0;
    transition: opacity 0s;
}

/* ---------------------------------------------- STRUCTURE */

.n-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    transition: opacity 1s 2s;
}
.n-section-inner {
    padding: 25vh 0 0;
}

.n-section .container {
    transition: top .5s ease-out .5s, opacity 1s .5s;
    opacity: 0;
    position: relative;
    top: 40px;
}
.n-section .visible {
    opacity: 1;
    top: 0;
}
.n-sable {
    background: #fbdab5;
    color: #4d4d4d;
}

#bottom {
    padding: 0;
}
#bottom .n-section-inner {
    padding: 1px 0;
}

/* --- footer */
.n-footer {
    padding: 40px 0;
    line-height: 1.7;
}

.l2 {
   margin-left: 16px;
}

/* ---------------------------------------------- TYPO */

h1 {
    font-family: axisextra_bold, sans-serif;
    line-height: 0.85;
    margin: 0 0 .1em;
    font-weight: 400;
}
h2,
.n-we {
    font-family: axisextra_bold, sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 400;
}
.n-big {
    font-size: 18px;
    margin-bottom: 1.5em;
}
a {
    transition: 0.6s;
    color: #fff;
    border-bottom: 1px solid #FFF;
}
a.active,
a:hover {
    text-decoration: none;
    color: #fff;
}
.cta,
.cta:focus {
    background: none;
    border-radius: 0;
    border: 3px solid white;
    font-family: axisextra_bold, sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 15px;
    font-weight: 400;
    padding: 0.5em 1em;
    color: #fff;
    margin-bottom: 1em;
}
.cta:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
}
.n-sable .cta {
    color: #f15a24;
    border-color: #f15a24;
}
.n-sable .cta:hover {
    color: #f15a24;
    border-color: #f15a24;
    background: rgba(255, 255, 255, 0.5);
}


/* ---------------------------------------------- INTRO */

#intro {
    background: #0A3853 url(images/bg-intro.jpg) no-repeat center top fixed;
    margin: 0;
}
#lang {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    
    /* ------------------------------------------ TEMP */
    display: none;
}
#lang a {
    border: 0 none;
    color: #BBB;
    font-family: axisextra_bold, sans-serif;
    font-weight: 400;
}
#lang a.active,
#lang a:hover {
    color: #FFF;
}
#intro .content {
    max-width: 450px;
    padding-left: 88px;
}
#intro .logo {
    max-width: 300px;
}
h1 {
    transition: 1s 1.5s;
    opacity: 0;
    position: relative;
    left: -100px;
}
.visible h1 {
    opacity: 1;
    left: 0;
}
.jumbotron p {
    font-weight: 600;
    font-size: 19px;
    
    transition: 1s 2s;
    opacity: 0;
    position: relative;
    left: -100px;
}
.jumbotron .visible p {
    opacity: 1;
    left: 0;
}

#intro .cta-wrapper {
    transition: 1s 2.5s;
    opacity: 0;
    position: relative;
    left: -100px;
}
#intro .visible .cta-wrapper {
    opacity: 1;
    left: 0;
}


/* ---------------------------------------------- CASE */

.fiche-c {
    background: #fff;
    padding: 10px;
}
.fiche p {
    height: 110px;
    font-size: 17px;
    line-height: 1.3;
}
.fiche-r {
    background: #1b5f99 url(images/triangle.png) no-repeat left 10px;
    color: #fff;
    height: 80px;
    padding: 9px 10px 10px 20px;
    margin: 0;
}
.fiche1 .fiche-c {
    margin-right: 20px;
}
.fiche2 .fiche-c {
    margin-left: 10px;
    margin-right: 10px;
}
.fiche3 .fiche-c {
    margin-left: 20px;
}

.fiche {
    padding: 0;
    margin-bottom: 5%;
    
    position: relative;
    left: 0;
    top: 0;
    transition: opacity .8s ease-out 0.4s, left .8s ease-out 0.4s, top .8s ease-out 0.4s;
    -webkit-backface-visibility: hidden;
}
.fiche1 {
    background: url(images/ombre.png) no-repeat right bottom;
    opacity: 0;
    left: -300px;
    transition-delay: 1.4s;
}
.fiche2 {
    top: -200px;
}
.fiche3 {
    background: url(images/ombre.png) no-repeat left bottom;
    opacity: 0;
    left: 300px;
    transition-delay: 2s;
}


.visible .fiche {
    opacity: 1;
    top: 0;
    left: 0;
}

/* ---------------------------------------------- ABOUT */

#about {
    background: #f2f2f2;
    color: #4d4d4d;
}
.schemas {
    height: 400px;
}
.schema {
    position: absolute;
    left: 0;
    opacity: 0;
    transition: 1s ease-out .5s;
}
.schema1 {
    top: -200px;
    transition-delay: 2s;
}
.schema2 {
    top: 20px;
}
.visible .schema {
    top: 0;
    opacity: 1;
}

/* ---------------------------------------------- ETHIC */

#ethic {
    background: #113E5B url(images/bg-ethic.jpg) no-repeat center top fixed;
}
.n-slides .item {
    height: 150px;
    padding: 0 30px;
    background: url(images/cite1.png) no-repeat;
}
blockquote {
    border: 0 none;
    font-size: 20px;
}
blockquote footer {
    color: #DDD;
    font-size: 14px;
}
.n-wes {
    padding-top: 6vh;
}
.n-we {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 20px 10px;
    max-width: 400px;
    
    opacity: 0;
    position: relative;
    left: 300px;
    transition: 1s 1.5s;
}
.n-we-2 {
    transition-delay: 2s;
}
.n-we-3 {
    transition-delay: 2.5s;
}
.visible .n-we {
    opacity: 1;
    left: 0;
}

/* bx */
.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 0 #ccc;
	-webkit-box-shadow: 0 0 0px #ccc;
	box-shadow: 0 0 0px #ccc;
	border:  0px solid #fff;
	left: 0px;
	background: inherit;
}
.bx-wrapper .bx-loading {
	background-color: transparent;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	background: #DDD;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #f15a24;
}

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

#contact {
  min-height: 50vh;
  padding: 10vh 0 0;
}

#contact h2 {
    margin-top: 6vh;
}

.cimgs {
    height: 400px;
}
.cimg {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 1s ease-out .5s;
}
.cimg2 {
    top: 50px;
    transition-delay: 1s;
}
.visible .cimg {
    opacity: 1;
    top: 0;
}

/* ---------------------------------------------- MEDIA QUERIES */

@media only screen and (max-width: 969px) {

    .n-section-inner {
        padding: 15vh 0;
    }
    
    .n-slides .item {
        padding: 0;
    }
    .n-we {
        margin-left: 0;
    }
    
    .n-section .container,
    h1,
    .jumbotron p,
    #intro .cta-wrapper,
    .fiche,
    .schema,
    .n-we,
    .cimg {
        transition: none;
    }
    #case .fiche-c {
        margin: 0 auto;
        max-width: 480px;
    }
    .fiche {
        background: none;
    }
}