@charset "utf-8";

@media all 
{
    body 
        {
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
       
   /*Liens*/
    a:link 
        {
        font-style:normal;
        color: #008080;
    }

    a:visited 
        {
        color: #008080;
    }

    a:hover
        {
        color: #333399;
    }

    a:active 
        {
        color: #333399;
    }

    /*Mise en forme du contenu*/
    section
        {
        word-wrap: break-word;
        text-align: justify;
    }

    
    /*Mise en page du logo*/
    #logoFixe
        {
        position : fixed;
    }

    /*Animation sur image*/
    @keyframes Anim1
    {
        from 
        {
            opacity: 0;
        }
        50%
                {
            opacity: 0.5;
        }
        to  
                {
            opacity: 1;
        }
    }

    #ApparitionImage
        {
        animation: Anim1 3s;
        border:none;
    }

    #ApparitionImage:hover
        {
        animation:Anim1 3s infinite;
    }

    #imageAnimee:hover 
        {
        transition        :all .8s ease-in-out;
        -moz-transition   :all .8s ease-in-out;
        -webkit-transition:all .8s ease-in-out;
        -o-transition :all .8s ease-in-out;
        -ms-transition :all .8s ease-in-out;
     
        /*background        :#008080;*/
        -moz-transform    :rotate(360deg);
        -webkit-transform :rotate(360deg);
        -o-transform      :rotate(360deg);
        -ms-transform     :rotate(360deg);
        transform         :rotate(360deg);
    }
       
    /*Réalisation d'un dégradé linéaire*/
    .vertDegrade
        {
        background:white;
        background:linear-gradient(top, #008080, #00c6c6);
        background:-moz-linear-gradient(top, #008080, #00c6c6);
        background:-webkit-linear-gradient(top, #008080, #00c6c6);
        background:-o-linear-gradient(top, #008080, #00c6c6);
        background:-ms-linear-gradient(top, #008080, #00c6c6);
    }
        
    /*Mise en page du pied de page*/
    footer 
        {
        visibility:hidden;
    }

    /*Responsive design*/
    .menu
        {
        display:none;
    }
      
}

@media screen and (min-width:642px)
{
    body 
        {
        background: transparent url(../Images/Interface/InterfaceSiteCV.png) no-repeat 0 0;
        background-size: 95em;
    }
    
    /*Mise en page du menu*/
    header ul, header img
        {
        display:block;   
    }

    header li
        {
        display:inline-block;
        margin: 1% 5% 1% 2.5%;
        overflow: hidden;
    }
    
    header nav
        {
        margin: 1em 12% 0 35%;
        padding: 0 0.5em 1.25em 0.5em;
    }

    /*Titres, sous-titres,...*/
    section 
        {
        height: 52.25em;
        margin: 0 12em 8em 33.5em;
        padding: 0 0.5em 0 0.5em;
        overflow: auto;
        text-align: justify;
    }

    section h1
        {
        font-size: 2.2em;
        font-weight: bold;
        color: #800080;
        padding: 1em 0 1em 0;
    }

    section h2
        {
        font-size: 2.1em;
        font-weight: bold;
        color: #008080;
        padding: 0.8em 0 0.8em 0;
   }

    section h3
        {
        font-size: 2em;
        font-weight: bold;
        color: #800080;
        padding: 0.60em 0 0.60em 0;
    }

    section p
        {
        font-size: 1.5em;
        font-weight: normal;
        font-style: normal;
        color: #000000;
        text-align: justify;
        padding: 0.4em 0 0.4em 0;
    }

    .TexteGras
        {
        font-size: 1.5em;
        font-weight: bold;
        color: #000000;
    }

    .Citation
        {
        font-size: 1.3em;
        font-weight: normal;
        color: #000000;
    }

    .portefolio
        {
        display: block;
        float: left;
        width: 14em;
        height: 20em;
        padding-bottom: 0.95em;
    }
    
    .portefolio.centre 
        {
        padding-left: 1em;
        padding-right: 1em;
    }

    .portefolio2
        {
        display: block;
        float: left;
        width: 23em;
        height: 18em;
        padding-bottom: 1.65em;
    }
  
    #logo img, #parcours img, #competences img, #portfolio img, #contact img
        {
        left : 30px;
        top : 30px;
        width : 8em;
    }

    .retourSommaire
        {
        display: block;
        float: left;
        width: 9em;
        height: 5em;
        padding-left: 1em;
        padding-right: 30em;
    }
    
    .retourHautDePage
        {
        display: block;
        width: 4em;
        height: 4em;
    }

}

@media screen and (max-width:641px)
{
    body
        {
        background: transparent url(../Images/Interface/InterfaceSiteCV_small.jpg) no-repeat center 1em;
        background-size: 95em;
    }

    header ul, header img
        {
        display : block;
    }

    header li
        {
        display:inline-block;
        margin : 0% 0.5% 4% 5%;
        overflow: hidden;
    }
    
    header nav
        {
        margin: 0 0 0 3%;
        padding: 0 0.5em 0 0.5em;
    }

    /*Titres, sous-titres,...*/
    section 
        {
        height: 95em;
        margin: 0 1em 8em 1em;
        padding: 0 0.2em 0 0.2em;
        overflow: auto;
        text-align: justify;
    }

    section h1
        {
        font-size: 3.5em;
        font-weight: bold;
        color: #800080;
        padding: 0 0 0 0;        
    }

    section h2
        {
        font-size: 3.25em;
        font-weight: bold;
        color: #008080;
        padding: 0 0 0 0;        
    }

    section h3
        {
        font-size: 3em;
        font-weight: bold;
        color: #800080;
        padding: 0 0 0 0;        
    }

    section p
        {
        font-size: 2.8em;
        font-weight: normal;
        font-style: normal;
        color: #000000;
        text-align: left;
        padding: 0 0 0 0;        
    }

    .TexteGras
        {
        font-size: 2.8em;
        font-weight: bold;
        color: #000000;
    }

    .Citation
        {
        font-size: 2.6em;
        font-weight: normal;
        color: #000000;
    }
       
    .portefolio
        {
        display: block;
        float: left;
        width: 30%;
        height: 35%;
        padding-bottom: 1em;
    }
    
    .portefolio.centre
        {
        padding-left: 0.8em;
        padding-right: 0.8em;
    }

    .portefolio2
        {
        display: block;
        float: left;
        width: 45%;
        height: 45%;
        padding-right: 0.5em;
    }

    #logo img
        {
        left : 5px;
        top : 5px;
        width : 10em;
    }

    #parcours img, #competences img, #portfolio img, #contact img
        {
        padding-left : 4.5em;
        width : 12em;
    }

    .retourSommaire
        {
        display: block;
        float: left;
        width: 20em;
        height: 8.5em;
        padding-left: 1em;
        padding-right: 55em;
    }
    
    .retourHautDePage
        {
        display: block;
        width: 7em;
        height: 7em;
    }

    /*footer 
        {
        height: 0.2em;
        background: transparent url(../Images/Interface/footer_small.jpg) no-repeat 0 0;
        background-size: 50%;
    }*/
    
}


@media screen and (max-width:400px)
{
    body
        {
        background: transparent url(../Images/Interface/InterfaceSiteCV_small.jpg) no-repeat center 1em;
        background-size: 15em;
    }

    section 
        {
        height: 95em;
        font-size:5px;
        overflow: auto;
        text-align: justify;
    }
    
    header nav
        {
        display:none;
    }

    #parcours img, #competences img, #portfolio img, #contact img
        {
        left : 0px;
        top : 0px;
        width : 0em;
    }

    #logo img
        {
        width:2em;
        background-color : white;
    }
       
    header ul
        {
        margin-left : 10px;
        position:top;
    }

    header li
        {
        display:inline-block;
        margin : 0% 1% 0% 1%;
        overflow: hidden;
    }
    
    .menu
        {
        display:block;
        width:12.5em;
        height:2.5em;
        margin-left:45px;
    }
    
    .menu li
        {
        font-size : 0.5em;
        font-style:bold;
        color: #000000;
    }

    .retourSommaire
        {
        display: block;
        float: left;
        width: 12em;
        height: 6em;
        padding-left: 2em;
        padding-right: 30em;
    }
    
    .retourHautDePage
        {
        display: block;
        width: 5em;
        height: 5em;
    }
   
    /*Liens*/
    a#menuHaut:link 
        {
        font-style:normal;
        color: #fff;
    }

    a#menuHaut:visited 
        {
        color: #fff;
    }

    a#menuHaut:hover
        {
        color: #fff;
    }

    a#menuHaut:active 
        {
        color: #fff;
    }

}