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

}
body
{
    background : url("images/fond.jpg");
}

#liseret 
{   float: left;
    display: flex;
    width: 10%;
    background-color: LightSlateGrey ;
    height: 720px;
    border-radius: 15px;
}
h1
{
    font-family: cac_champagneregular;
    font-size: 58px;
    text-align: center;
    text-shadow: 2px 2px 2px black;
    border-radius: 10px;
    border: 2px blue solid;
    padding:10px;
    box-shadow: 6px 6px 0px black;
}

.centrage
{
    font-family: cac_champagneregular;
    font-size: 20px;
    text-align: center;
}


#conteneur1
{
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-around ;
    align-items: center;

}
.centrage2
{
    font-family: cac_champagneregular;
    font-size: 20px;
    text-align: left;
    margin-left: 10em;
    margin-right:10em;
    
}



ul
{
	/* On supprime les puces, on précise une largeur
        et on centre la liste par rapport à la page. */
    list-style: none;
	width: 70%;
	margin: auto;
}

li
{
	/* On fixe les dimensions
        des éléments de notre liste. */
    width: 150px;
	height: 80px;

    /* On met en forme le texte. */
	text-align: center;
	font-weight: bold;
  
    /* On modifie l'affichage pour que
    les éléments soient sur la même ligne. */
	display: inline-block;
	
    /* On ajoute une petite bordure
    et on définit les marges.  */
	border: 1px solid #000;
	margin: 10px;
	padding: 0px;

    /* Quitte à faire du CSS3, autant
    avoir des coins arrondis :p. */
    border-radius: 10px;
        
    /* On centre l'arrière-plan. */
    background-position: center;
      
    /* On modifie la position pour pouvoir ensuite
    placer comme on le souhaite la description des liens. */
    position: relative;

    /* On n'affiche pas ce qui dépasse de nos éléments ! */
	overflow: hidden;	
}

/* On indique les images à afficher
en arrière-plan pour chaque élément. */
#item1{background-image: url('images/skills.jpg');
       background-size: contain;}
#item2{background-image: url('images/employment.jpg');
       background-size: contain;}
#item3{background-image: url('images/education3.jpg');
       background-size: contain;}
#item4{background-image: url('images/training.jpg');
       background-size: contain;}
#item5{background-image: url('images/language.jpg');
       background-size: cover;}
#item6{background-image: url('images/Computer_Literacy.jpg');
       background-size: cover;}

li a
{
        /* Pour fixer les dimensions d'un lien,
        il est nécessaire de l'afficher en tant
        qu'élément de type block. */
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
}

li span
{
        display: block;
        height: 30px;
        width: 100%;
        color: #fff;
        margin: 0px;
        
        /* La taille des lignes est égale à
        la hauteur de l'élément. Cela permet
        de centrer verticalement le texte. */
        line-height: 30px;
        
        /* Abusons du CSS3 en affichant
        un arrière-plan semi-transparent. */
        background-color: rgba(0,0,0,0.3);
 
        /* Position absolue pour afficher
        la description avec précision. */
        position: absolute;
        
        /* L'ordonnée de l'élément est égale
        à la hauteur de son parent (150px) :
        la description sera donc située sous
        son parent. */
        left: 0px;
        top: 80px;

        /* N'oublions pas les transitions ! */
        transition-property: top;
        transition-duration: 1s;
}
/* On modifie l'ordonnée des descriptions contenues
dans un élément d'une liste survolée par la souris. */
li:hover span
{
        top: 50px;
}
@media all and (max-width: 1024px)
{
    #photo
    {
        display: none;
    }
    #liseret
    {
        display: none;
    }
#conteneur1
{
    display: flex;
  
    flex-direction: row;
    justify-content: space-around ;
    align-items: center;

}
#conteneur2
    {
    display: flex;
   
    flex-direction: row;
   
    align-items: left;
    }
.centrage2
    {
    font-family: cac_champagneregular;
    font-size: 20px;
    text-align: left;
    margin-left: 5em;
    margin-right:5em;
    
    }

}