/* GENERAL */

*
{
    margin: 0 ;
    padding: 0;
}

body
{
    font-family: 'Open sans', sans-serif;
    font-size: 16px;
}

h1
{
    font-family: 'quattrocento', serif;
    font-size: 46px;
    color: #1F1F1F;
    letter-spacing: .2rem;
}

h2
{
    color: #FFF;
    font-size: 46px;
    
}

h3{
    font-size: 30px;
    color: #444;
}
.title-matthieu{
    
}
.portfolio{
    
    margin: -20px 400px -0px 400px;
}

.fp
{
    /* background-color: rgba(0,0,0, 0.0); text :
    Bonjour et bienvenue sur mon site web, vous pouvez trouver tous mes travaux ici. <br>N'hésitez pas à y jeter un coup d'œil ou à me faire part de commentaires si vous avez le temps.
    <br>Vous pouvez également me contacter directement dans la section prévue à cet effet. Bonne visite !
    */
}
h4
{
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
}

p
{
    line-height: 20px;
    color: #000;
}

ul
{
    list-style: none
}

a
{
   text-decoration: none;
    color: #000;
}

a:hover
{
    color: #0070CC;
}

.wrapper
{
    width: 940px; /* Tester avec 940 px if not working */
    margin: 0 auto;
    padding: 0 10px;

}

.blue
{
    color: #0070CC;
}
.clear{
    clear: both;
}
small{
    font-size: 16px;
    /* font-style: italic; */
    color: #000;
    font-weight: bolder;
}
/* HEADER */

header
{
    height: 120px;
    background-color: #EFEFEF
    
}

header h1
{
    float: left;
    margin-top: 32px;
}

header nav
{
    float: right;
    margin-top: 50px;
}

header nav ul li
{
    display: inline-block;
    float: left;
}

header nav ul li a
{
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 20px
}


/* Main Image */

#main-image
{
    height: 720px;
    background: url('images/matthieu-huguet-highresscreenshot00010.jpg') center;
}
#main-image h2
{
    font-weight: normal; /* Le "Playstation" reste en gras car html <strong>  */
    /* text-transform: uppercase */
    text-align: center;
    padding: 320px 0 20px 0;
    
}
#main-image h3
{
    text-align: center;
    color: #FFF;
}

#main-image p
{
    text-align: center;
    color: #FFF;
}

.button-1
{
    display: block;
    width: 120px;
    height: 40px;
    background: #EFEFEF;
    color: #000;
    font-size: 16px;
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
    border-radius: 100px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
}

.button-1:hover
{
    background: #0070CC;
    color: #FFF;
}

/* Projets */


#projets ul
{
    margin-top: 25px;
    margin-bottom: 25px;
}
#projets ul li
{
    width: 300px;
    height: 100px;
    padding-top: 200px;
    text-align: center;
    float: left;
    margin-right: 10px;
    border-radius: 33px;
    font-size: 12px;
}
#projets ul li:hover
{
    transform: scale(1.05, 1.05);
    transition: transform 0.2s;
    color: #FFF;
}
#projets h4
{
    text-transform: uppercase;
    margin-bottom: 5px;
}
#projet-1
{
   background: url('images/8c539e65fee8b44d33106f134a5f05cf3897cbee.jpg') no-repeat top center;
    background-size:contain;
    background-color: #0070CC;
    
}
#projet-2
{
    background: url('images/255bd8ebbf5f439c2b9194d3860744af432200dd.jpg') no-repeat top center;
    background-size:contain;
    background-color: #0070CC;
}
#projet-3
{
    background: url('images/4162b3a57923c7cb5cdc0a806d8edc2e255d3018.jpg') no-repeat top center;
    background-size:contain;
    background-color: #0070CC;
}
.p-text{
    color: #FFF;
}


/* social-networks-font */

#social-networks{
    background-color: #EFEFEF;
    padding: 25px 0;
}

#social-networks article{
    width: 460px;
    height: 270px;
    float: left;
    border-radius: 20px;
}

#social-networks article:first-child{
    margin-right: 20px;
}

.overlay{
}


article .overlay{
    
    background:rgba(255,255,255, 0.85);
    height: 100%;
    width: 230px;
    padding: 10px;
    border-radius: 20px 20px 20px 20px;
    text-align: center;
    box-sizing: border-box;
}

article .overlay:hover{
    background:rgba(255,255,255, 0.80);
}


}
.social-networks-font{
    
}
.contain-image{
    background-size: contain;
}
article h4{
    border-bottom: 1px solid #000;
    /* padding-bottom: 20px; */
    text-transform: uppercase;
    font-size: 16px;
    text-align: center;
    color: #000;
}
#social-networks p
{
    text-align: left;
    margin-top: 10px;
    margin-bottom: 130px;
}
.button-2{
    background-color: #FFF;
    padding: 6px 20px;
    border-radius: 100px;
    color: #000;
    font-weight: bold;
}
.button-2:hover{
    background: #0070CC;
    color: #FFF;
}



/* Contact */

#contact{
    padding: 25px 0;
    text-align: center;
}

#contact h3{
    width: 600px;
    text-transform: uppercase;
    margin: 0 auto 20px auto;
    border-bottom: 1px solid #0070CC;
    padding-bottom: 20px;
}

form{
    margin: 20px 0 20px 0;
}

label{
    margin: 10px auto;
    font-weight: bold;
    font-size: 16px;
    margin-left: 10px;
    color: #777;
}

input[type="text"]{
    width: 250px;
    padding: 5px;
    font-size: 18px;
    border: 2px solid #0070CC;
    border-radius: 100px;
}

.button3{
    
    margin-top: 20px;
    color: #0070CC;
    background: #EFEFEF;
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
    border-radius: 100px;
    border : 2px solid #0070CC;
}

.button3:hover{
    color: #FFF;
    background: #0070CC;
}

/* footer */

footer{
    padding: 80px;
    background-color: #777
}

footer h1{
    color: #FFF;
    text-align: center;
}

.copyright{
    text-align: center;
    font-weight: bold;
    color: #FFF;
    
}