/***** Police *****/

@font-face {
    font-family: 'helvetica_neueregular';
    src: url('font/helveticaneue-ultralight-webfont.eot');
    src: url('font/helveticaneue-ultralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/helveticaneue-ultralight-webfont.woff2') format('woff2'),
         url('font/helveticaneue-ultralight-webfont.woff') format('woff'),
         url('font/helveticaneue-ultralight-webfont.ttf') format('truetype'),
         url('font/helveticaneue-ultralight-webfont.svg#helvetica_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/***** Général *****/

body{
    background-image:url(../img/header.jpg);
    background-repeat: no-repeat;
    background-size:100% 700px;
    background-color:#f4f4f4;
    font-family: 'helvetica_neueregular';
    color:#848484;
    line-height:26px;
}

.wrap{
    max-width:1200px;
    margin:auto;
}

/* Titres */
h1,
h2,
h3{
    font-family: "Raleway";
    color:  #222222;
    font-size: 22px;
    font-weight: 600;
    line-height: 18px;
}

/* Liens */

a{
    text-decoration: none;
    font-family: 'helvetica_neueregular';
    color:  #848484;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

a:hover{
    color:  #222222;
}

/***** Header *****/

/* Logo */
header h2{
    margin: 0 auto;
    width:239px;
    margin-top:114px;
}

/* Slogan */
header h1{
    text-align: center;
    font-size: 36px;
    font-weight: 300;
    margin-top:58px;
}

/* Flèche */
header a{
    display:block;
    text-align: center;
    margin-top:54px;
}

/***** Features *****/

/* Espace autour du texte */
.features .wrap{
    box-sizing:border-box;
    padding:2%;
    padding-bottom:0;
    padding-top:0;
}

/* Alignement */
.features .wrap li{
    display:inline-block;
    width:28%;
    vertical-align:top;
    margin-top:450px;
}

/* Colonne de gauche */
.features .wrap li:nth-child(1){
    margin-right:24px;
}

/* Iphone */
.features .wrap li:nth-child(2){
    width:464px;
    margin-top:60px;
}

/* Colonne de droite */
.features .wrap li:nth-child(3){
    width:27%;
}

/* Titres des articles */
.features .wrap li article h2{
    margin-bottom:28px;
}

/* Contenu des articles */
.features .wrap li article p{
    margin-bottom:60px;
}

/***** Application *****/

main{
    background-color:  #e3e3e3;
}

/* Pour avoir une height =/ 0 avec float */
main .wrap{
    overflow:hidden;
}

/** Article **/

main .wrap article{
    width:45%;
    float:left;
}

main .wrap article h2{
    padding-top:60px;
    margin-bottom:25px;
}

/* Systèmes */

main .wrap article ul li{
    display:inline-block;
    border-radius: 50%;
    background-color:  #c5c5c5;
    width: 68px;
    height: 68px;
    margin-top:30px;
    margin-right:20px;
}

main .wrap article ul li:hover{
    background-color:  #222222;
}

main .wrap article ul li a img{
    margin: 0 auto;
    display: block;
    margin-top: 17px;
}

/* Vidéo */

main .wrap video{
    padding-top:60px;
    width:500px;
    float:right;
    margin-bottom:60px;
}

/***** Avis *****/

.avis{
    clear:both;
}

/* Image des users */
.avis>img{
    width:100%;
    margin-bottom: 60px;
    display:block;
    margin-auto;
}

/** Réseaux sociaux **/

.avis ul{
    text-align:center;
}

.avis ul li{
    display: inline-block;
    margin-right:10px;
    border-radius: 50%;
    background-color:  #c5c5c5;
    width: 34px;
    height: 34px;
    margin-bottom:60px;
}

.avis ul li:hover{
    background-color:  #222222;
}

.avis ul li a img{
    display:block;
    margin:auto;
}

/* Alignement de chaque image dans son cercle */

.avis ul li:nth-child(1) a img{
    margin-top:11px;
}

.avis ul li:nth-child(2) a img{
    margin-top:9px;
}

.avis ul li:nth-child(3) a img{
    margin-top:7px;
}

.avis ul li:nth-child(4) a img{
    margin-top:9px;
}

.avis ul li:nth-child(5) a img{
    margin-top:9px;
}

.avis ul li:nth-child(6) a img{
    margin-top:6px;
}

/** Contenu **/

.avis p{
    text-align:center;
}

/* Citation */
.avis p:first-child{
    font-family: "Raleway";
    color:  #000000;
    font-size: 24px;
    font-weight: 400;
    margin-bottom:26px;
    margin-top:60px;
}

/* Auteur */
.avis p+p{
    color:#000000;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom:60px;
}

/* Rejoins */
.avis h2{
    text-align:center;
    color:  #000000;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Texte */
.avis h2+p{
    margin-bottom:25px;
}

/***** Footer *****/

footer{
    background-color:  #e3e3e3;
}

/** Menu **/

footer nav ul{
    text-align: center;
}

footer nav ul li{
    display:inline-block;
    margin-right:20px;
    margin-top:60px;
    margin-bottom:60px;
}

footer nav ul li:last-child{
    margin-right:0;
}