/* =============================================================================
   File : main.css
   Description : Feuille de style principale - Cible Publicité
   Author : Julie
   =========================================================================== */

/* TABLE OF CONTENT ///////////////////////////////////////////////////////////////////////////////////////////

 1- Reset / Normalize CSS
 2- Container & Tools
 3- Main styles

 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* =============================================================================
   1- Reset / Normalize CSS
   =========================================================================== */

@import url('normalize.css');

@font-face {
    font-family: 'si';
    src: url('icon/socicon.eot');
    src: url('icon/socicon.eot?#iefix') format('embedded-opentype'),
         url('icon/socicon.woff') format('woff'),
         url('icon/socicon.ttf') format('truetype'),
         url('icon/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(icon/socicon.svg) format(svg);
    }
}


/* =============================================================================
   2- Container, Tools & default styling
   =========================================================================== */

body {
    font: 200 14px 'Roboto', sans-serif;
    color: #9c9e9f;
    margin: 0 auto;
}

.container {
    margin: 0 auto;
    width: 100%;
    }

img {
    border: 0;
    }
    
/*
 * Avoid bugs & removing outline & decoration
 */
a { text-decoration: none; }
a:focus { outline: none; }

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

/*
 * For IE 6/7 only - Include this rule to trigger hasLayout and contain floats. 
 */
.clearfix { *zoom: 1; }



/* ==========================================================================
   3- Main styles
   ========================================================================== */

/*
 * Use this for your layout styling
 */


/*  --------------------------------
    ANIMATION ACCUEIL / INDEX
    --------------------------------  */

.accueil-logo {
    width: 299px;
    height: 141px;
    display: block;
    margin: 250px auto 0 auto;
    }

h1.agence {
    text-align: center;
    font-size: 18px;
    font-weight: 200;
    color: #58585a;
    margin-top: 24px;
    margin-bottom: 0px;
    z-index: 0;
    opacity: 1;
 /* ANIMATION DISAPPEAR */
    -webkit-animation-name: disappear;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    
    -moz-animation-name: disappear;
    -moz-animation-duration: 2s;
    -moz-animation-delay: 1s;
    -moz-animation-fill-mode: forwards;
    
    -ms-animation-name: disappear;
    -ms-animation-duration: 2s;
    -ms-animation-delay: 1s;
    -ms-animation-fill-mode: forwards;
    
    -o-animation-name: disappear;
    -o-animation-duration: 2s;
    -o-animation-delay: 1s;
    -o-animation-fill-mode: forwards;
    
    animation-name: disappear;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    }
    
h2.enter {
    text-align: center;
    font-size: 14px;
    font-weight: 200;
    color: #58585a;
    margin: -25px auto 0px auto;
    z-index: 1;
    opacity: 0;
 /* ANIMATION APPEAR */
    -webkit-animation-name: appear;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: appear;
    -moz-animation-duration: 2s;
    -moz-animation-delay: 3s;
    -moz-animation-fill-mode: forwards;

    -ms-animation-name: appear;
    -ms-animation-duration: 2s;
    -ms-animation-delay: 3s;
    -ms-animation-fill-mode: forwards;
    
    -o-animation-name: appear;
    -o-animation-duration: 2s;
    -o-animation-delay: 3s;
    -o-animation-fill-mode: forwards;
    
    animation-name: appear;
    animation-duration: 2s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    }
    
.fr {
    text-decoration: none;
    color: #58585a;
    }
    
.separation {
    font-size: 35px;
    border: solid 1px #58585a;
    position: relative;
    bottom: -7px;
    }

 /* ANIMATION DISAPPEAR */
@-webkit-keyframes disappear {
    from {opacity: 1;}
    to {opacity: 0;}
    }    
@-moz-keyframes disappear {
    from {opacity: 1;}
    to {opacity: 0;}
    }
@-ms-keyframes disappear {
    from {opacity: 1;}
    to {opacity: 0;}
    }    
@-o-keyframes disappear {
    from {opacity: 1;}
    to {opacity: 0;}
    }
@keyframes disappear {
    from {opacity: 1;}
    to {opacity: 0;}
    }

 /* ANIMATION APPEAR */
@-webkit-keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
    }
@-moz-keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
    }
@-ms-keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
    }
@-o-keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
    }
@keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
    }
    
    
    
    
/*  --------------------------------
    RÉALISATIONS / CARROUSEL 1
    --------------------------------  */


.choix {
    font: 200 12px 'Roboto', sans-serif;
    color: #9c9e9f;
    text-align: center;
    padding: 56px 0 16px 0;
    }

    /* content */

#amazingcarousel-1 .amazingcarousel-image { 
    position: relative;
    padding: 0px;
    }

#amazingcarousel-1 .amazingcarousel-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    }

#amazingcarousel-1 .amazingcarousel-title {
    position:relative;
    font: 200 30px 'Roboto', sans-serif;
    color:#58585a;
    text-align:left;
    margin: 44px 20px 0 20px;
    }

#amazingcarousel-1 .amazingcarousel-text {
    position:relative;
    font: 200 14px 'Roboto', sans-serif;
    letter-spacing: -0.03em;
    color:#9c9e9f;
    text-align:justify;
    margin: 12px 20px 0 20px;
    }

/* carousel */

#amazingcarousel-container-1 {
    padding: 0 0 0 0; 
    }

#amazingcarousel-1 .amazingcarousel-list-container { 
    padding: 0 0;
    }

/* item */

#amazingcarousel-1 .amazingcarousel-item-container {
    text-align: center;
    padding: 0px 3px;
    }

/* arrows */

#amazingcarousel-1 .amazingcarousel-prev {
    left: 0%;
    top: 20%;
    margin-left: -51px;
    margin-top: 0px;
    }

#amazingcarousel-1 .amazingcarousel-next {
    right: 0%;
    top: 20%;
    margin-right: -51px;
    margin-top: 0px;
    }

/* navigation bullets 

#amazingcarousel-1 .amazingcarousel-nav {
    position: absolute;
    width: 100%;
    top: 100%;
    }

#amazingcarousel-1 .amazingcarousel-bullet-wrapper {
    margin: 4px auto;
    }

*/

    
    
    
/*  --------------------------------
    PROJETS SOLO / CARROUSEL 2
    --------------------------------  */

#amazingcarousel-2 .amazingcarousel-image { 
    position: relative;
    padding: 0px;
}

#amazingcarousel-2 .amazingcarousel-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}


#amazingcarousel-2 .amazingcarousel-title {
    position:relative;
    font: 200 14px 'Roboto', sans-serif;
    color:#9c9e9f;
    text-align:center;
    margin:12px 0 0 0;
}

/* carousel */

#amazingcarousel-container-2 {
    padding: 0 0; 
}

#amazingcarousel-2 .amazingcarousel-list-container { 
    padding: 0 0;
}

/* item */

#amazingcarousel-2 .amazingcarousel-item-container {
    text-align: center;
    padding: 0px 3px;
}

/* arrows */

#amazingcarousel-2 .amazingcarousel-prev {
    left: 0%;
    top: 42%;
    margin-left: -51px;
    margin-top: 0px;
}

#amazingcarousel-2 .amazingcarousel-next {
    right: 0%;
    top: 42%;
    margin-right: -51px;
    margin-top: 0px;
}

/* navigation bullets */

/* #amazingcarousel-2 .amazingcarousel-nav {
    position: absolute;
    width: 100%;
    top: 100%;
}

#amazingcarousel-2 .amazingcarousel-bullet-wrapper {
    margin: 4px auto;
}
*/


    
    
/*  --------------------------------
    NEWS / AGENCE
    --------------------------------  */

.news{
    width: 947px;
    height: 394px;
    position: relative;
    margin: 0 auto 0 auto;
    }
    
.news .news-image { 
    position: absolute;
    padding: 0px;
    z-index: 1;
}

.news .news-text { 
    position: absolute;
    right:0px;
    width: 400px;
    height: 394px;
    z-index: 2;
    font: 200 13px 'Roboto', sans-serif;
    color:#9c9e9f;
    text-align: right;
}

.news .news-text .bold { 
    font: bold 13px 'Roboto', sans-serif;
}

.news .news-text .signature { 
    font: 200 20px 'Roboto', sans-serif;
}

.news .news-text .red {
    position: relative;
    top: 12px;
    font: bold 50px 'Roboto', sans-serif;
    color:#e2001a;
}
.news .news-image a {
    margin: 0;
    padding: 0;
    border: 0;
}

.news .news-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}

.news-title{
    position:relative;
    font: 200 14px 'Roboto', sans-serif;
    color:#9c9e9f;
    text-align:center;
    margin:12px 0 0 0;
    }


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

.contact{
    width: 960px;
    height: 394px;
    margin: 87px auto 0 auto;
    }
    
.contact-text{
    display: inline-block;
    }

.coord{
    font: 200 14px 'Roboto', sans-serif;
    color: #9c9e9f;
    display: block;
    position: relative;
    top: -70px;
    }
    
span.coord-point{
    font-size: 100px;
    letter-spacing: -0.15em;
    color:#e2001a;
    position: relative;
    left: -7px;
    bottom: -28px;
    }
    
h1.coord-cible{
    font: 200 30px 'Roboto', sans-serif;
    color:#58585a;
    margin: 0;
    padding: 0;
    }
    
.adresse{
    margin: -7px 0 13px 0;
    }

#map-canvas{
    height: 394px;
    width: 394px;
    float: right;
}
    
.email{
    font: 200 14px 'Roboto', sans-serif;
    color: #9c9e9f;
    display: block;
    position: relative;
    top: 8px;
    }
    
h2.email-titre{
    font: 200 14px 'Roboto', sans-serif;
    color:#58585a;
    margin-top: 25px;
    }
    
.contact a{
    font: 200 14px 'Roboto', sans-serif;
    color: #9c9e9f;
    text-decoration: none;
    }
    
.maps{
    display: inline-block;
    float : right;
    }




/*  --------------------------------
    MENU
    --------------------------------  */
    
.nav{
    width: 942px;
    position: absolute;
    bottom: 60px;
    right: 50%;
    margin-right: -471px;
    }

.menu{
    float: right;
    list-style: none;
    color:#58585a;
    position: relative;
    right: 0px;
    margin: 0;
    }
    
/*  .menu{
    margin: 0;
    list-style: none;
    color:#58585a;
    position: absolute;
    bottom: 60px;
    right: 203px;
    } */
    
.menu li{
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    margin-right: 50px;
    }

.menu li.logo-menu{
    display: inline-block;
    margin-right: 0;
    }

.menu li a.rubrique{
    color:#58585a;
    text-decoration: none;
    margin-top: 20px;
    position: relative;
    bottom: 30px;
    }

.menu li a.rubrique:hover{
    color:#e2001a;
    }
    
    
    
    
/*  --------------------------------
    RÉSEAUX SOCIAUX
    --------------------------------  */


/*.social{
    float: left;
    list-style: none;
    position: relative;
    bottom: -11px;
    margin: 0;
    padding: 0;
    }

.social li{
    width: 32px;
    height: 32px;
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    }
    
.facebook{
    background: url("facebook.png") 0px 0px no-repeat;
    }

.facebook:hover{
    background-position: 0px -32px;
    }
    
.pinterest{
    background: url("pinterest.png") 0px 0px no-repeat;
    }
    
.pinterest:hover{
    background-position: 0px -32px;
    }

.social li a:hover img{
    visibility: hidden;
    }*/

.social {
    float: left;
    position: relative;
    bottom: -11px;
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
}

.social li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.social li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border:1px solid #58585a;
    margin-right: 10px;
    color: #58585aa;
    background-color: none;
}

.social a:hover {
    z-index: 2;
    
}

.social-icon-last{
    margin:0 !important;
}
.social-facebook {
    background-color: #ffffff;
    color:#58585a;
}
.social-facebook:before {
    content:'b';
}
.social-facebook:hover {
    background-color: #ffffff;
    color: #e2001a;
    border:1px solid #e2001a;
}

.social-instagram {
    background-color: #ffffff;
    color:#58585a;
}
.social-instagram:before {
    content:'x';
}
.social-instagram:hover {
    background-color: #ffffff;
    color: #e2001a;
    border:1px solid #e2001a;
}   

.social-linkedin {
    background-color: #ffffff;
    color:#58585a;
}
.social-linkedin:before {
    content:'j';
}
.social-linkedin:hover {
    background-color: #ffffff;
    color: #e2001a;
    border:1px solid #e2001a;
}  

.social-pinterest {
    background-color: #ffffff;
    color:#58585a;
}
.social-pinterest:before {
    content:'d';
}
.social-pinterest:hover {
    background-color: #ffffff;
    color: #e2001a;
    border:1px solid #e2001a;
}   
    
/*  --------------------------------
    MENTIONS LÉGALES / COPYRIGHT
    --------------------------------  */

.copyright {
    width: 100%;
    font-size: 12px;
    font-weight: 300;
    color: #9c9e9f;
    position: absolute;
    bottom: 15px;
    margin: 0 auto;
    }
    
.point {
    font-size: 34px;
    letter-spacing: -0.10em;
    color: #e2001a;
    position: relative;
    bottom: -9px;
    }