/*** FONTS ***/
/*src http://predicttile.com/assets/fonts/gotham/*/
@font-face {
  font-family: 'gotham';
  src: url("fonts/gotham-book-webfont.eot");
  src: url("fonts/gotham-book-webfont?#iefix") format("embedded-opentype")
      , url("fonts/gotham-book-webfont.woff2") format("woff2")
      , url("fonts/gotham-book-webfont.woff") format("woff")
      , url("fonts/gotham-book-webfont.ttf") format("truetype")
      , url("fonts/gotham-book-webfont.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*** GENERAL ***/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  min-height: 0;
  min-width: 0;
}

body {
    font-family: 'gotham', Helvetica, Arial, sans-serif;
    font-size: 26px;
    background-size: cover;
    background-repeat: no-repeat;
}

h1,h2 {
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 1px #aaaaaa;
}
h1{
    font-size: 3em;
}
h2{
    font-size: 2.2em;
}
h3{
    font-size: 2em;
}
h4{
    font-size: 1.5em;
}
h5{
    font-size: 1.2em;
}

p{
    font-size: 20px;
}

ul {
  list-style-type: square;
}

a {
  text-decoration: none;
  color: black;
}

.nomarg{
    margin:0;
}
/* classes */
.title-black {
  font-weight: bold;
  color: black;
  font-size: 2em;
}

.title-number{
    
}

.title-orange {
  font-weight: bolder;
  font-size: 4em;
  color: rgb(255, 147, 0);
  margin: 0 0 0 0;
  line-height: 1em;
}

.title_wrapper > h1{
    margin-left: 1em;
}

.fleft {
  float: left;
}
.fright {
  float: right;
}
section {
  /*height: 100%;*/
}
.twitter-color {
  color: #5ea9dd;
}
.facebook-color {
  color: #3b5999;
}

.section-header {
    height: 31px;
}

.covered {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
}

.contained{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
}

#fullpage{
}

.lp,.rp{
    background : rgba(250,250,250,0.7);
    vertical-align: middle;
}
.lp{
    z-index: 3;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-bottom: 1em;
}
.rp{
    z-index: 10;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
}

.section{
    background : rgba(250,250,250,0.3);
}

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg);
  filter: gray;
}

section0_article0{}



.uppercase{
    text-transform: uppercase;
}

blockquote {
  background: rgba(250,250,250,0.6)/*f9f9f9*/;
  border-left: 10px solid black;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  text-shadow: 2px 2px 1px #aaaaaa;
}

blockquote:before {
  color: rgba(250,250,250,0.2);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

article{
    padding-left: 2em;
}

article > footer > p{
    margin-left: 5em;
    font-weight: bolder;
    color: red;
}

/* SECTION 0 LEFT PART */
#section0{
    /*background-color: lime;*/
}
#lp0{
    z-index: 12;
    /*background-color: blue;*/
}
#section0_slide0{
    /*margin-top: 30%;
    margin-left: 10%;*/
    /*background-color: pink;*/
}
.article-content{
    margin: 0;
    padding: 1em 1em 1em 1em;
}

#section0_slide0-article-content{
    /*max-width: 250px;*/
}
/* SECTION 1 RIGHT PART 1 - emotion */
.font_one_emocion{
    font-size: 5.2em;
    font-weight: bolder;
}

.red_separator{
    width: 64px;
    height: 2px;
    position: relative;
    display: block;
    background-color: black;
}

.orange_separator{
    width: 64px;
    height: 2px;
    position: relative;
    display: block;
    background-color: darkgrey;
}

.font_emocion{
    font-size: 4.8em;
    font-weight: bolder;
    line-height: 1em;
}

.big_number{
    position: relative;
    margin-top: 2px;
    margin-left: 10px;
    float: left;
}

#section1_slide1-article-content{}

/* FULLPAGE vertical nav custom vertical navigation */
#fp-nav ul li a.active span,.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span,.fp-slidesNav ul li:hover a.active span {
    box-sizing: border-box;
    background-color: white;
    border: 1px solid black;
}
    
/* Fixed header and footer.
        * --------------------------------------- */
#header {
  position: fixed;
  width: 100%;
  z-index: 2;
  height: 40px;
  background-color: rgba(250,250,250,0.7);
}

#logo{
    float: left;
    left:0;
}

.adress,.phone,.email{
    font-size: 8px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    line-height: 10px;
}

.text-center{
    text-align: center;
}

.text-right{
    text-align: right;
}

.text-left{
    text-align: left;
}

.vAlign{
  margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}

.phone{
    
}

#nav-back {
  text-align: left;
  color: black;
}
#back-chrevron {
  color: red;
  font-weight: bold;
}
#nav-social {
  text-align: right;
  color: white;
}
#footer {
  bottom: 0px;
}


.parent {
  position: relative;
}
.enfant {
  position: absolute;
  top: 50%; /* poussé de la moitié de hauteur du référent */
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}

/** DEBUG **/

.debug {
    font-size: 8px;
    position: absolute;
    color: red;
    top:10px;
    left: 10px;
}

.spxed{
    position: absolute;
    top:10px;
    left:10px;
}

/** MEDIA SCREENS **/

/* Extra Small */
@media(max-width:767px){
    body{
        font-size: 13px;
    }
}

@media(max-width:767px) and (max-height:360px){
}

/* PORTRAIT */
@media screen and (orientation:portrait) {}

/* LANDSCAPE */
@media screen and (orientation:landscape) {
    body{
        font-size: 13px;
    }
    
    #header {
        height: 34px;
    }
    
    .lp{
        margin: 0 0 0 0;
        padding-top: 1.5em;
        margin-top: 0;
        text-align: center;
        border-radius: 10px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .rp{
        margin: 0 0 0 0;
        padding-top: 1.5em;
        margin-top: 0;
        /*text-align: center;*/
        border-radius: 10px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
    h1{
        font-size: 1.8em;
    }
    
    .title-black{
        font-size: 1.8em;
    }
}

@media(min-width:568px) and (min-height:320px){
   /* .title-black{
        font-size: 1.8em;
    }*/
   .big_number,.title-black{
       /*font-size: 2em;*/
   }
}

@media(min-width:640px) and (min-height:360px){
/* GALAXY S III LANDSCAPE */
}

/* Small */
@media(min-width:768px) and (max-width:991px){
    h1{
        font-size: 2.8em;
        padding-left: 0.5em;
    }
    .lp{
        margin: 0 0 0 0;
        margin-top: 0;
        text-align: center;
    }
}

/* Medium */
@media(min-width:992px) and (max-width:1199px){
    .lp{
        border-top-right-radius: 0;
    }
    
}

/* Large */
@media(min-width:1200px){
    .lp{
        margin: 0 0 0 0;
        padding-top: 1.5em;
        margin-top: 0;
        text-align: center;
        border-top-right-radius: 0;
    }
}

/* SPECIFIC MEDIA QUERIES */
/* http://media-queries.aliasdmc.fr/media-queries-live.php */