/*! TYPOGRAPHIE */
/*-------------------------------------------------------*/

.home-page h2 { font-size: 3rem; }


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

.home-page [id="main"] { background-color: transparent; }

@media (max-width: 47.99em) {                                                                                                                                                                                 
                                                                                                                                                                                                              
       .home-page [id="header"] {                                                                                                                                                                             
                                                                                                                                                                                                              
               position: absolute;                                                                                                                                                                            
       }                                                                                                                                                                                                      
}       

@media (max-width: 56.24em) {
  .sm-hidden {
    display: none;
  }
}

@media (min-width: 48em) {
  
  .home-page [id="header"] { 
/*    left: 16.66666667%;  */
    left: 0;
/*    padding-top: 6%;  */
  }
  .home-page [id="main"] { 
    margin-left: 0;
    padding: 0;
    position: fixed;
    left: 33.33333333%; 
    width: 66.66666667%;  
  }
}

@media (min-width: 100em) {
  
  .home-page [id="header"] { 
    padding-top: 6%; 
  }
}

/*! MODULES */
/*-------------------------------------------------------*/

  [id="header"] .logo { display: block; }

  /* NAVIGATION */
  
  .home-page .share { background-color: transparent; }
  
  .home-page .nav li { position: relative;}
  
  
  /*! -- BOUTONS */
  
  [id="btn_private"] { 
    position: relative; 
    z-index: 1;
  } 
  
  .home-page [id="btn_qui"].arrow-right:after,
  .home-page [id="btn_public"].arrow-right:after,
  .home-page [id="btn_loterie"].arrow-right:after,
  .home-page [id="btn_private"].arrow-right:after { display: none; }
  .home-page--hover [id="btn_private"].arrow-right:after,
  .home-page li:hover .arrow-right:after { display: block; }
  
/*  .home-page--hover [id="btn_public"].arrow-right:after  */
  
/*  @media (max-width: 47.9999em) { */
  @media (max-width: 56.24em) { 
    
    .home-page h2 { font-size: .8em; }
    
    .home-page [id="header"] .nav > li > .btn-lg { 
      font-size: 1.6em; 
      padding-left: .5em;
      padding-right: .5em;
    }
    .home-page [id="header"] .btn-lg.arrow-right { 
      line-height: 5rem; 
      margin-right: 1.7rem;
    }
    .home-page [id="header"] .btn-lg.arrow-right:after {
      border-top-width:2.5rem;
      border-bottom-width: 2.5rem;
      right: -1.7rem;
      border-left-width: 1.7rem; 
    }

    
  }
  


/*! PATERNS */
/*-------------------------------------------------------*/

  /* logo */

  @media (min-width: 64em) {
    
    .home-page [role="banner"] h1 { margin-top: 0; }
        
    .home-page .logo { width: 150px; padding-bottom: 46px; }
  }
  
  @media (min-width: 80em) {
    
    .home-page .logo { width: 240px; padding-bottom: 80px; }
  }

  /* Background */
  
  .home-page {
                min-height: 100vh;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
      background-size: cover;
      -ms-behavior: url(/dist/js/polyfills/backgroundsize.min.htc);
  }
  
  .home-page { background-image: url(../img/bg-public-xs.jpg); }
  .home-page--hover { background-image: url(../img/bg-private-xs.jpg); }

  .backgroundSlideshow,
  .cycle-slideshow {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    height: 100%;
    overflow: hidden;
    display: none;
  }

  @media (min-width: 48em) {
    
    .home-page,
    .home-page--hover { background-image: none; }
    
    .home-page .wrapper {
      background-color: rgba(251, 176, 59, .3);
    }
    .home-page--hover .wrapper {
      background-color: rgba(41, 189, 226, .3);
    }
    
    .backgroundSlideshow,
    .cycle-slideshow { display: block; }
  
      .slide {
        width: 100%; height: 100%;
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
          background-size: cover;
          -ms-behavior: url(/dist/js/polyfills/backgroundsize.min.htc);
      }
      .slide-1 { background-image: url(../img/bg-slide-1.jpg); }
      .slide-2 { background-image: url(../img/bg-slide-2.jpg); }
      .slide-3 { background-image: url(../img/bg-slide-3.jpg); }
    
    
    
  }
  
/*
  @media (min-width: 48em) {
    .home-page { background-image: url(../img/bg-public-sm.jpg) }
    .home-page--hover { background-image: url(../img/bg-private-sm.jpg) }
  }
  @media (min-width: 60em) {
    .home-page { background-image: url(../img/bg-public-md.jpg) }
    .home-page--hover { background-image: url(../img/bg-private-md.jpg) }
  }
  @media (min-width: 75em) {
    .home-page { background-image: url(../img/bg-public-lg.jpg) }
    .home-page--hover { background-image: url(../img/bg-private-lg.jpg) }
  }
*/
  
  
  .form-login {
    display: none;
    position: absolute; top: 50px; left: 0;
    width: 100%;
    max-width: 330px;
    background: #FFF;
    padding: .5em 1em;
    z-index: 10;
  }
  .home-page--hover .form-login { display: block; }

  
    .form-login .form-group { margin-bottom: .5em; }
    
  @media (min-width: 36.25em) {
    
    .form-login { 
      top: 0;
      left: 105px;
      width: 330px;
      margin-left: 100px;
      padding: .5em 1em 0 2em;
      z-index: 0;
    }
  }
    
  @media (min-width: 48em) {
    
    .form-login { 
      left: 129px;
      padding: .5em 1em 0 3em; 
    }
  }
  
  @media (min-width: 56.25em) {
    
    .form-login { 
      left: 309px;
    }
  }
  


/*! COULEURS */
/*-------------------------------------------------------*/ 

  /* couleurs de la section publique par defaut */
  
  .home-page {
    -webkit-transition: all 0.4s ease-out;  
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;

  }
  
/*  .home-page [id="header"]    { background-color: #FBB03B; } */
  .home-page .btn-facebook,
  .home-page .logo,
  .home-page [id="btn_qui"]   { background-color: #C1272D; }
  .home-page .btn-twitter,
  .home-page [id="btn_public"]  { background-color: #F15A24; }
  .home-page .btn-google-plus,
  .home-page [id="btn_loterie"]   {
      background-color: #F7931E;
      font-size: 1.9em;
  }
  .home-page [id="btn_private"]   { background-color: #F7931E; }
  
  .home-page h2 { color: #C1272D; }
  
  .home-page [id="btn_qui"].arrow-right:after   { border-left-color: #C1272D; }
  .home-page [id="btn_public"].arrow-right:after  { border-left-color: #F15A24; }
  .home-page [id="btn_loterie"].arrow-right:after { border-left-color: #F7931E; }
  .home-page [id="btn_private"].arrow-right:after { border-left-color: #F7931E; }
  
  /* couleurs de la section publique par defaut */
  
/*  .home-page--hover [id="header"]     { background-color: #4CABE1; } */
  .home-page--hover .btn-facebook,
  .home-page--hover .logo,
  .home-page--hover [id="btn_qui"]    { background-color: #662D91; }
  .home-page--hover .btn-twitter,
  .home-page--hover [id="btn_public"]   { background-color: #0071BC; }
  .home-page--hover .btn-google-plus,
   .home-page--hover [id="btn_loterie"]  { background-color: #2E3192; }
  .home-page--hover [id="btn_private"]  { background-color: #2E3192; }
  
  .home-page--hover h2 { color: #662D91; }
  
  .home-page--hover [id="btn_qui"].arrow-right:after    { border-left-color: #662D91; }
  .home-page--hover [id="btn_public"].arrow-right:after { border-left-color: #0071BC; }
   .home-page--hover [id="btn_loterie"].arrow-right:after  { border-left-color: #2E3192; }
  .home-page--hover [id="btn_private"].arrow-right:after  { border-left-color: #2E3192; }