/* 
CSS by Quentin G. Please do not reuse without permission. 
http://www.quenting.com
*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500|Droid+Serif);
@viewport {
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}
/* Reset (courtesy of Eric Meyer)*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,dl,dt,dd,table,tr,th,td,tbody,tfoot,fieldset,form,label,legend,caption,thead {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */

:focus {
    outline: 0;
}

body {
    line-height: 1;
    color: black;
    background: white;
}
/* tables still need 'cellspacing="0"' in the markup */

table {
    border-collapse: separate;
    border-spacing: 0;
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: "" "";
}
/* ---------------------------------------------------------------------- PAGE */

body {
    background: #fff;
    font-family: 'Raleway', Arial, Verdana, sans-serif;
    height: auto;
   
}

p strong {
    font-weight: 500;
}

p a {
    color: #000;
    text-decoration: underline;
    font-weight: 400;
}

p a:hover {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    background-color: #000;
}

p a: visited {
    color: #000;
    text-decoration: underline;
}



/* ---------------------------------------------------------------------- MOBILE */

#center {
    width: 100%;
    height: 100%;
    margin: 0 auto;

    text-align: center;
    z-index: 0;
    position: relative;
}

#line {
    border-right: 0em #000 solid;
    border-bottom: 0.1em #000 solid;
    height: 16em;
    width: 15em;
    overflow: hidden;
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;

}

img {
    width: 12em;
    height: 12em;
    -webkit-border-radius: 6em;
    border-radius: 6em;
    margin-top: 2em;


}

#text {
    width: 90%;
    margin: 10px auto;
    padding: 5px;
    text-align: left;
    background: #fff;
    z-index: 2;
    position: relative;
    margin-bottom: 50px;

}

h1 {
    font-family: 'Droid Serif', Times New Roman, Trebuchet, serif;
    text-align: left;
    color: #000;
    font-size: 4em;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 0.3em;

}

p {
    line-height: 1.4em;
    font-weight: 300;
    font-size: 1.6em;
    margin-bottom: -5px;
}


/* ---------------------------------------------------------------------- DESKTOP */
@media only screen and (min-width: 640px) {

    #center {
        width: 630px;
        height: 100%;
        margin: 0 auto;
        padding-top: 100px;
        text-align: left;
        z-index: 0;
        position: relative;
    }

    #line {
        border-right: 0.1em #000 solid;
        border-bottom: 0em #000 solid;
        height: 250px;
        width: 150px;
        overflow: hidden;
        -moz-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
        position: absolute;
        z-index: 1;

    }

    img {
        width: 175px;
        height: 175px;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        margin-top: 38px;
        -moz-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        -o-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);

    }

    #text {
        width: 480px;
        height: 250px;
        margin: 0px auto;
        padding: 5px;
        text-align: left;
        background: #fff;
        z-index: 2;
        position: absolute;
        left: 130px;
        top: 250px;
    }

    h1 {
        font-family: 'Droid Serif', Times New Roman, Trebuchet, serif;
        text-align: left;
        color: #000;
        font-size: 40px;
        position: relative;
        margin-bottom: -10px;
        margin-top: 0em;

    }

    p {
        line-height: 1.4em;
        font-weight: 300;
        font-size: 16px;
        margin-bottom: -5px;
    }
    
}