*{box-sizing: border-box;}

html,body{
  height: 100% !important;
  background: #000;
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 300;
}

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

a{text-decoration: none;}



.noir{color: #000;}
.bg-noir{background: #000;}
.blanc{color: #fff;}
.bg-blanc{background: #fff;}
.orange{color: #ff841b;}
.bg-orange{background: #ff841b;}
.vert{color: #219ca3;}
.bg-vert{background: #219ca3;}

.right{text-align: right;}



/*******************************
MAIN
*******************************/

#main{
  max-width: 100%;
  height: 100%;
}



  nav{
    position: fixed;
    display: none;
    top: 2em;
    right: 2em;
    z-index: 2;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ff841b;
    padding: 0 5px;
    transition: 0.3s;
  }

    button{
      width: 100%;
      height: 100%;
      background: none;
      border: none;
      outline: none;
    }

    .icon-bar{
      display: block;
      height: 2px;
      margin: 6px 0;
      background: #fff;
      transition: transform 0.2s ease-out;
      -webkit-transition: transform 0.2s ease-out;
      -moz-transition: transform 0.2s ease;
      -ms-transition: transform 0.2s ease;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

  nav.show{
    display: block;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
    animation: fadeIn 1s;
   }

  @-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  @keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }

    .close .icon-bar {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
    }

    .close .icon-bar:first-child {
      display: none;

    }

    .close .icon-bar:last-child {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      margin-top: -8px;
    }

  #contact-fixe{display: none;}

  #hero{
    background-image: url('../img/marketing-web-piment-xs.jpg');
    background-repeat: no-repeat;
    background-position: bottom center;
    padding: 3em;
    min-height: 100%;
  }


    #hero h1{
    /*  margin-top: -3em;*/
      margin-bottom: 4em;
      max-width: 300px;
    }



    #hero h2{
      font-size: 2.4em;
      color: #fff;
    }

    /*ANIMATION*/
    .morphext > .animated {
        display: inline-block;
    }

      #main_cta{
        margin-top: 2em;
        text-align: right;
      }
        .cta{
          display: inline-block;
          position: relative;
          color: #fff;
          font-size: 1.8em;
          padding: 0.7em 1.4em;
          border-radius: 4px;
          text-align: center;
        }

        .cta span{
          font-size: 0.4em;
          font-weight: 500;
          display: block;
        }

  #main .contenu{
    padding: 4em;
    min-height: 100%;
    border-top: 1px solid #ccc;
    overflow: hidden;
  }

  .contenu p, .contenu blockquote{
    font-size: 1.6em;
    line-height: 1.5em;
    color: #444;
    margin-bottom: 1.4em;
  }

  .contenu blockquote{
    position: relative;
    font-style: italic;
    color: #111;
    margin-bottom: 2em;
    background: url('../img/quote-open.png') no-repeat;
    background-position: center center;
    background-size: contain;
  }





  .contenu h1{
    font-size: 3em;
    margin-bottom: 0.4em;
  }

  .contenu h2{
    font-size: 2.8em;
    margin-bottom: 1.4em;
  }

  .contenu h2::after{
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: #11949A;
    margin-top: 10px;
  }

  .contenu .titre_section{
    font-size: 2.0em;
    margin-bottom: 1em;
    color: #000;
  }

  .contenu h3{
    font-size: 2em;
    margin-bottom: 0.4em;
  }

  .contenu li{
    margin-bottom: 1.5em;
  }

  .retrait{
    padding-left: 1em;
  }

  #rdv{
    background-image: url('../img/echanger.png');
    background-repeat: no-repeat;
    background-position: center;
  }

    form{
      max-width: 500px;
      margin: 0 auto;
      overflow: auto;
    }


      input{
        width: 500px;
        max-width: 100%;
        padding: 0.8em;
        background: #eee;
        border: none;
        margin-bottom: 2em;
      }

      #rsvp{
        width: 300px;
        /*height: 50px;*/
        font-size: 20px;
        color: #ffffff;
        background-color: #55B9BE;
        border-color: transparent;
        -webkit-background-size: 200% 200%;
        background-size: 200% 200%;
        background-position: 50%;
        float: right;
      }

/*******************************
THÈMES
*******************************/

#themes{
  position: fixed;
  top: 0;
  left: 100%;;
  width: 60%;
  height: 100%;
  background: #fff;
  border-top: 7.5px solid #fff;
  border-left: 7.5px solid #fff;
  transition: 200ms;

   }

#themes.open{
  left: 0;
}

  #themes div{
    height: 33.2%;
    border: 7.5px solid #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  #themes h3{
    height: 100%;
  }

  #themes a{
    display: block;
    height: 100%;
    overflow: hidden;
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
  }

  #strategie{
    background: url('../img/strategie-digitale.jpg');
  }

  #web{
    background: url('../img/projet-web.jpg');
  }

  #marketing{
    background: url('../img/solutions-marketing.jpg');
  }

  .title{
    z-index: 1;
    color: #fff;
    font-size: 1.5em;
    font-weight: 500;
    padding-left: 0.6em;
    padding-right: 0.6em;
    bottom: 0.6em;
    position: absolute;
    text-shadow: 4px 4px 10px #000;
    width: 100%;
  }



  .hover{
    display: block;
    background: rgba(255, 255, 255, 0.68);
    color: #fff;
    width: 300%;
    height: 300%;
    margin-top: 100%;
    margin-left: 100%;
    transition:1000ms;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    border: 1em solid rgba(255, 255, 255, 0.78);
  }


  a:hover .hover{
    margin-left: -75%;
    margin-top: -50%;
  }


  a.current .hover{
    margin-left: -75%;
    margin-top: -50%;
    background: #219ca3;
  }


/*******************************
RÉFÉRENCES
*******************************/


#referencesB{display: none;}

#references{
  position: fixed;
  top: 0;
  right: -60%;
  width: 40%;
  height: 100%;
  background: #fff;
  border-top: 7.5px solid #fff;
  border-right: 7.5px solid #fff;
  transition: 200ms;
}

#references.open{
  right: 0;
}


#references div{
  height: 20%;
  border: 7.5px solid #fff;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

  #references p.ref {
    position: absolute;
    background: #fff;
    color: #333;
    padding: 0.4em;
    top: 0.4em;
    left: 0.4em;
    font-size: 0.8em;
  }

  #references p.ref-nom {
      position: absolute;
      background: #222;
      color: #fff;
      padding: 0.4em;
      bottom: 0.4em;
      right: 0.4em;
      font-size: 0.8em;
    }

.a{
  background: url('../img/apvsa.jpg');
}
.b{
  background: url('../img/c3alternance.jpg');
}
.c{
  background: url('../img/decorsanslimite.jpg');
}
.d{
  background: url('../img/gplexpert.jpg');
}
.e{
  background: url('../img/ram.jpg');
}


/*******************************
CONTACT
*******************************/



#contact p{
  position: inherit;
  height: 100%;
  padding: 1em;
  background: #ff841b;
}

#contact a{
  display: block;
  width: 100%;
  height: 100%;
  background: url('../img/contact.png') no-repeat;
  background-position: left center;
  background-size: contain;
}

.grecaptcha-badge {
    display: none !important;
}



  hr{
    border: none;
    clear: both;
  }


/*IPHONE 5*/
@media(min-width:380px){

  #hero h2{
    font-size: 4em;
  }

  .title{
    font-size: 2.2em;
  }

}

@media(min-height:769px){

  #hero{
    background-image: url('../img/marketing-web-piment.jpg');
    background-size: contain;
  }

}

@media(min-width:769px){
  #hero h2{
    font-size: 4em;
  }

  .contenu blockquote{
    padding-right: 10em;
    margin-bottom: 2em;
    background: none;
  }

  .contenu blockquote::after {
    content: ' ';
    display: block;
    background: url(../img/quote-close.png) no-repeat;
    background-position: right center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    width: 8em;
    height: 100%;
  }

}

@media(min-width : 1200px), (min-width : 768px) and (-webkit-min-device-pixel-ratio: 2){
  html,body{
    font-size: 16px;
  }
}

@media(min-width : 1025px){
  nav{
    display: none !important;
  }
}

@media(min-width : 1025px) and (max-width:1440px){


  #main{
    width: 70%;
  }

    #contact-fixe{
      position: fixed;
      bottom: 15px;
      right: 30%;
      z-index: 2;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #ff841b;
      transition: 0.3s;
    }

    #contact-fixe.show{
      display: block;
      -webkit-animation: fadeIn 1s;
      -moz-animation: fadeIn 1s;
      -ms-animation: fadeIn 1s;
      animation: fadeIn 1s;
     }

    #contact-fixe a{
      display: block;
      padding: 15px;
    }

  #themes{
    width: 30%;
    right: 0;
    left: auto;
    border-right: 7.5px solid #fff;
  }

    .title {
      font-size: 2em;
    }

  #references{
    display: none;
 }


 #referencesB{
   display: block;
 }



 #referencesB div{
   position: relative;
   min-height: 150px;
   height: auto;
   width: 25%;
   float: left;
   border: 7.5px solid #fff;
 }

 #referencesB .ref-nom {
     position: absolute;
     background: #222;
     color: #fff;
     padding: 0.4em;
     bottom: 0.4em;
     right: 0.4em;
     font-size: 0.8em;
   }



}




@media(min-width:1441px){

  #main{
    width: 60%;
  }


    #hero h1{
      margin-bottom: 12em;
    }

    .cta{
      font-size: 2.4em;
    }

      .subline{
        font-size: 1em;
      }


  #themes{
    width: 24%;
    left: 60%;
  }

  #references{
    width: 16%;
    left: 84%;
  }

  #suite{
    width: 40%;
    left: 60%;
  }

}

}