body {
    background: #fff;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    font-family: arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: -.01em;
}

a:hover {
    text-decoration: none;
}

img {
    border: 0px;
    overflow-clip-margin: content-box;
    overflow: clip;
}

.clear {
    clear: both;
}

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



/* Ressources communes */
.border-black {
    border: 1px solid black;
}

.pointer {
    cursor: pointer;
}

a.bouton {
    display: inline-block;
    background: #2f2f2e;
    border-radius: 15px;
    border: none;
    color: #FFFFFF;
    font-family: 'bebasneue', sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 35px;
    text-decoration: none;
}

a.bouton:hover {
    text-decoration: none;
    background: #00a09e;
    color: #fff;
}

.center-element {
    margin-left: auto;
    margin-right: auto;
}


/*
Points de ruptures standards en px :
Desktop : 1280+
Tablette paysage: 1024
Tablette portrait / smartphone paysage : 768
Smartphone protrait : 480 (peut descendre jusqu'à 360)
*/

@media screen and (max-width: 480px) {

    /* classes de masquage */
    .hidexs {
        display: none !important;
    }

    .showxs {
        display: inherit;
    }


    /* En-tête */
    header {
        width: 100%;
        height: 90px;
        box-sizing: border-box;
        padding: 10px 0;
    }

    header .entete {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    header .entete .logo {
        display: inline-block;
        vertical-align: middle;
    }

    header .entete .logo img {
        height: 66px;
        width: auto;
    }

    header .entete .main-content {
        display: none;
    }

    header .entete .contact {
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: right;
        gap: 12px;
    }

    header .entete .contact-mobile {
        flex: 0 50%;
        margin-right: 5px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: right;
        gap: 12px;
    }

    header .entete .contact-mobile .separateur {
        border-left: 1px solid #545454;
        height: 46px;
    }

    nav {
        height: 40px;
        width: 100%;
        background: #252525;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Contenu */
    .main-content {
        margin-top: 50px;
        max-width: 768px;
        margin-right: auto;
        margin-left: auto;
    }

    .main-content .presentation {
        margin-bottom: 30px;
        width: 100%;
    }

    .main-content .presentation .titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .main-content .aside {
        flex: 0 45%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .main-content .aside .col2 {
        flex: 0 100%;
        height: 240px;
        box-sizing: border-box;
        margin: 0px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 0px 5px 9px rgba(205, 205, 205, 1);
        display: inline-block;
        vertical-align: top;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;            
    }

    .main-content .aside .col2 .centrage-xs {
        margin: auto;
    }

    .main-content .aside .col2:hover {
        -webkit-transform: scale(.90);
        transform: scale(.90);
    }

    .main-content .aside .col2.fromright {
        animation: slidefromright linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 30%;   
    }

    .main-content .aside .col2.fromleft {
        animation: slidefromleft linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 30%;   
    }

    .main-content .aside .col2 a {
        text-decoration: none;
    }

    .main-content .aside .col2 img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 10px
    }

    .main-content .aside .col2 .titre {
        margin: 0 10px 8px 10px;
        box-sizing: border-box;
        text-align: center;
        font-family: bebasneue, Helvetica, sans-serif;
        color: white;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 1px;
    }

    .main-content .aside .col2 .suivre {
        margin: 0 10px;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        border-top: 1px solid white;
        text-align: center;
        color: white;
        padding: 10px;
    }

    .main-content .aside .col2 .suivre::after {
        content: url(../images/fleche_droite.png);
        margin-top: 5px;
    }


    /* Partenaires */
    .partenaires-content {
        text-align: center;
        margin-top: 25px;
        margin-bottom: 45px;
    }

    .partenaires-content .titre {
        display: inline;
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: normal;
        padding: 0 10px 5px 10px;
    }

    .partenaires-content .partenaires-content_list {
        margin:0 auto;
        overflow: hidden;      
        user-select:none;               
        display: flex;
        gap: 20px;
    }

    .partenaires-content .partenaires-content_list ul {
        list-style: none;
        flex-shrink: 0;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        animation: scroll 30s linear infinite;       
    }

    @-webkit-keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }
    @keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }

    .partenaires-content .partenaires-content_list:hover ul {
        animation-play-state: paused;
    }

    .partenaires-content .partenaires-content_list img {
        width: auto;
        max-height: 80px;
    }


    /* Article (contenu dynamique) */
    .article-content {
        margin: 15px auto;
        width: calc(100% - 60px);
        padding: 35px 0;
        position:relative;
        font-size: 14px;
        line-height: 20px; 
        font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    .article-content .main-titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .article-content .titre-paragraphe {
        color: rgb(229, 27, 88);
        line-height: 24px;
        font-size: 16px;
        font-weight:bold;
    }

    .article-content img {
        max-width:100%;
    }

    .article-content img.revealer {
        display:block;
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: cover 10% cover 30%;
    }


    /* Footer */
    footer {
        width: 100%;
        background: #252525;
    }

    footer .content {
        width: calc(100% - 10px);
        margin: 0 auto;
        padding: 25px 0;
        color: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 15px;
    }

    footer .content .coordonnees {
        flex: 0 50%;
        text-align: center;
    }

    footer .content .coordonnees img {
        max-width: 160px;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);        
    }

    footer .content .adresse {
        max-width: 140px;
        margin: 8px auto 15px auto;
        padding-top: 15px;
        border-top: 1px solid #acaaaa;
        color: #b6b6b6;
        font-size: 13px;           
        text-align: left;
    }

    footer .content .telephone {
        color: #e3283e;
        font-size: 13px;         
        max-width: 140px;
        margin: 0 auto;
        text-align: left;        
    }

    footer .content .telephone::before {
        content: url(../images/picto-telephone.png);
        transform: scale(.75);        
        margin-right: 5px;
        margin-top: -5px;
        float: left;
    }

    footer .content .edito {
        display: block;
        margin-top: 20px;
        min-width: 150px;
        text-align: justify;
        font-size: 10pt;
        color:#b6b6b6;        
    }

    footer .content .liens.plan-site {
        flex: 1 1 50%;
    }

    footer .content .liens.sites-ufolep {
        flex: 150px;
        min-width: 150px;
        display: none;
    }

    footer .content .liens .titre {
        font-family: bebasneue;
        font-weight: normal;
        text-transform: uppercase;
        margin-bottom: 5px;
        color: #b6b6b6;
        font-size: 1.24em;
    }

    footer .content .liens ul.menu {
        min-width: 150px;
        display: block;
        margin: 0;
        padding: 0;
    }

    footer .content .liens ul.menu.plan-site_list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    footer .content .liens ul.menu>li {
        flex: 50%;
        display: list-item;
        list-style-type: none;
        margin-bottom: 15px;
        min-width: 150px;
    }

    footer .content .liens.sites-ufolep ul.menu>li {
        width: 100%;
    }

    footer .content .liens ul.menu ul.sousmenu {
        padding-left: 2px;
        padding-top: 5px;
    }

    footer .content .liens ul.menu ul.sousmenu>li {
        list-style-type: none;
    }

    footer .content .liens.sites-ufolep ul.menu ul.sousmenu>li {
        white-space: nowrap;
    }

    footer .content .liens ul.menu ul.sousmenu>li::before {
        content: '>'; 
        margin-right: 10px;
    }

    footer .content .liens ul.menu ul.sousmenu>li a {    
        font-weight: normal;
    }

    footer a {
        color: #fff !important;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }
}


@media screen and (min-width: 481px) and (max-width: 768px) {
    /* classes de masquage */
    .hidexs {
        display: none !important;
    }

    .showxs {
        display: inherit;
    }


    /* En-tête */
    header {
        width: 100%;
        height: 90px;
        box-sizing: border-box;
        padding: 10px 0;
    }

    header .entete {
        display: flex;
        width: calc(100% - 20px);
        margin: 0 10px;
    }

    header .entete .logo {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
    }

    header .entete .logo img {
        height: 66px;
        width: auto;
    }

    header .entete .main-content {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 100%;
    }

    header .entete .contact {
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: right;
        gap: 12px;
    }

    header .entete .contact-mobile {
        margin: 0 14px;
        flex: 1 1 500px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: right;
        gap: 12px;
    }


    header .entete .contact-mobile .separateur {
        border-left: 1px solid #545454;
        height: 46px;
    }

    nav {
        height: 40px;
        width: 100%;
        background: #252525;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Contenu */
    .main-content {
        margin-top: 50px;
        max-width: 768px;
        margin-right: auto;
        margin-left: auto;
    }

    .main-content .presentation {
        margin-bottom: 30px;
        width: calc(100% - 20px);
    }

    .main-content .presentation .titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .main-content .aside {
        flex: 0 45%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .main-content .aside .col2 {
        flex: 0 100%;
        height: 240px;
        box-sizing: border-box;
        margin: 0px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 0px 5px 9px rgba(205, 205, 205, 1);
        display: inline-block;
        vertical-align: top;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;             
    }

    .main-content .aside .col2:hover {
        -webkit-transform: scale(.90);
        transform: scale(.90);
    }
    
    .main-content .aside .col2.fromright {
        animation: slidefromright linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 30%;   
    }

    .main-content .aside .col2.fromleft {
        animation: slidefromleft linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 30%;   
    }

    .main-content .aside .col2 .centrage-xs {
        margin: auto;
    }

    .main-content .aside .col2 a {
        text-decoration: none;
    }

    .main-content .aside .col2 .lien {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .main-content .aside .col2 img {
        flex: 0 50%;
        width: 50%;
        height: auto;
        box-sizing: border-box;
        padding: 10px
    }

    .main-content .aside .col2 .titre {
        flex: 0 50%;
        margin: 0 10px 8px 10px;
        box-sizing: border-box;
        text-align: center;
        font-family: bebasneue, Helvetica, sans-serif;
        color: white;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 1px;
    }

    .main-content .aside .col2 .suivre {
        width: calc(100% - 60px);
        margin: 0 30px;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        border-top: 1px solid white;
        text-align: center;
        color: white;
        padding: 10px;
    }

    .main-content .aside .col2 .suivre::after {
        content: url(../images/fleche_droite.png);
        margin-top: 5px;
    }


    /* Partenaires */
    .partenaires-content {
        text-align: center;
        margin-top: 25px;
        margin-bottom: 45px;
    }

    .partenaires-content .titre {
        display: inline;
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: normal;
        padding: 0 10px 5px 10px;
    }

    .partenaires-content .partenaires-content_list {
        margin:0 auto;
        overflow: hidden;      
        user-select:none;               
        display: flex;
        gap: 20px;
    }

    .partenaires-content .partenaires-content_list ul {
        list-style: none;
        flex-shrink: 0;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        animation: scroll 30s linear infinite;       
    }

    @-webkit-keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }
    @keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }

    .partenaires-content .partenaires-content_list:hover ul {
        animation-play-state: paused;
    }

    .partenaires-content .partenaires-content_list img {
        width: auto;
        max-height: 80px;
    }


    /* Article (contenu dynamique) */
    .article-content {
        margin: 15px auto;
        width: calc(100% - 60px);
        padding: 35px 0;
        position:relative;
        font-size: 14px;
        line-height: 20px; 
        font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    .article-content .main-titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .article-content .titre-paragraphe {
        color: rgb(229, 27, 88);
        line-height: 24px;
        font-size: 16px;
        font-weight:bold;
    }

    .article-content img {
        max-width:100%;
    }

    .article-content img.revealer {
        display:block;
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: cover 10% cover 30%;
    }



    /* Footer */
    footer {
        width: 100%;
        padding: 5px 0;
        background: #252525;
    }

    footer .content {
        width: calc(100% - 10px);
        margin: 0 auto;
        padding: 25px 0;
        color: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 25px;
    }

    footer .content .coordonnees {
        flex: 0 50%;
        text-align: center;
    }

    footer .content .coordonnees img {
        max-width:200px;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);  
    }

    footer .content .adresse {
        max-width: 140px;
        margin: 8px auto 15px auto;
        padding-top: 15px;
        border-top: 1px solid #acaaaa;
        color: #b6b6b6;
        font-size: 13px;           
        text-align: left;
    }

    footer .content .telephone {
        color: #e3283e;
        font-size: 13px;         
        max-width: 140px;
        margin: 0 auto;
        text-align: left;        
    }

    footer .content .telephone::before {
        content: url(../images/picto-telephone.png);
        transform: scale(.75);        
        margin-right: 5px;
        margin-top: -5px;
        float: left;
    }

    footer .content .edito {
        display: block;
        margin-top: 20px;
        min-width: 200px;
        text-align: justify;
        font-size: 10pt;
        color:#b6b6b6;        
    }

    footer .content .liens.plan-site {
        flex: 1 1 50%;
    }

    footer .content .liens.sites-ufolep {
        flex: 1 1 250px;
        min-width: 250px;
        display: none;
    }

    footer .content .liens .titre {
        font-family: bebasneue;
        font-weight: normal;
        text-transform: uppercase;
        margin-bottom: 5px;
        color: #b6b6b6;
        font-size: 1.24em;
    }

    footer .content .liens ul.menu {
        min-width: 150px;
        display: block;
        margin: 0;
        padding: 0;
    }

    footer .content .liens ul.menu.plan-site_list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    footer .content .liens ul.menu>li {
        flex: 1 1 50%;
        display: list-item;
        list-style-type: none;
        margin-bottom: 15px;
        min-width: 180px;
    }

    footer .content .liens.sites-ufolep ul.menu>li {
        width: 100%;
    }

    footer .content .liens ul.menu ul.sousmenu {
        padding-left: 2px;
        padding-top: 5px;
    }

    footer .content .liens ul.menu ul.sousmenu>li {
        list-style-type: none;
    }

    footer .content .liens.sites-ufolep ul.menu ul.sousmenu>li {
        white-space: nowrap;
    }

    footer .content .liens ul.menu ul.sousmenu>li::before {
        content: '>';
        margin-right: 10px;
    }

    footer .content .liens ul.menu ul.sousmenu>li a {    
        font-weight: normal;
    }

    footer a {
        color: #fff !important;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }
}


@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* classes de masquage */
    .hidexs {
        display: inherit;
    }

    .showxs {
        display: none !important;
    }

    /* En-tête */
    header {
        width: 100%;
        height: 130px;
        box-sizing: border-box;
        padding: 10px 0;
    }

    header .entete {
        display: flex;
        width: calc(100% - 40px);
        margin: 0 10px;
    }

    header .entete .logo {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
    }

    header .entete .logo img {
        height: 86px;
        width: auto;
    }

    header .entete .main-content {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 100%;
    }

    header .entete .contact {
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: right;
        gap: 12px;
    }

    header .entete .contact .separateur {
        border-left: 1px solid #545454;
        height: 46px;
    }

    nav {
        height: 60px;
        width: 100%;
        background: #252525;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Contenu */
    .main-content {
        margin-top: 50px;
        max-width: 1004px;
        margin-right: auto;
        margin-left: auto;
    }

    .main-content .presentation {
        margin-bottom: 30px;
    }

    .main-content .presentation .titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .main-content .aside {
        flex: 0 45%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .main-content .aside .col2 {
        flex: 0 40%;
        box-sizing: border-box;
        margin: 0px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 0px 5px 9px rgba(205, 205, 205, 1);
        display: inline-block;
        vertical-align: top;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;          
    }

    .main-content .aside .col2:hover {
        -webkit-transform: scale(.90);
        transform: scale(.90);
    }
    
    .main-content .aside .col2.fromright {
        animation: slidefromright linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 30%;   
    }

    .main-content .aside .col2.fromleft {
        animation: slidefromleft linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 30%;   
    }

    .main-content .aside .col2 a {
        text-decoration: none;
    }


    .main-content .aside .col2 img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 10px
    }

    .main-content .aside .col2 .titre {
        margin: 0 10px;
        box-sizing: border-box;
        height: 50px;
        text-align: center;
        font-family: bebasneue, Helvetica, sans-serif;
        color: white;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 1px;

    }

    .main-content .aside .col2 .suivre {
        margin: 0 10px;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        border-top: 1px solid white;
        text-align: center;
        color: white;
        padding: 20px 30px;
    }

    .main-content .aside .col2 .suivre::after {
        content: url(../images/fleche_droite.png);
        margin-top: 5px;
    }


    /* Partenaires */
    .partenaires-content {
        text-align: center;
        margin-top: 25px;
        margin-bottom: 45px;
    }

    .partenaires-content .titre {
        display: inline;
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: normal;
        padding: 0 10px 5px 10px;
    }

    .partenaires-content .partenaires-content_list {
        margin:0 auto;
        overflow: hidden;      
        user-select:none;               
        display: flex;
        gap: 20px;
    }

    .partenaires-content .partenaires-content_list ul {
        list-style: none;
        flex-shrink: 0;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        animation: scroll 30s linear infinite;       
    }

    @-webkit-keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }
    @keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }

    .partenaires-content .partenaires-content_list:hover ul {
        animation-play-state: paused;
    }

    .partenaires-content .partenaires-content_list img {
        width: auto;
        max-height: 80px;
    }


    /* Article (contenu dynamique) */
    .article-content {
        margin: 30px auto;
        width: calc(100% - 60px);
        padding: 35px 0;
        position:relative;
        font-size: 14px;
        line-height: 20px; 
        font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    .article-content .main-titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .article-content .titre-paragraphe {
        color: rgb(229, 27, 88);
        line-height: 24px;
        font-size: 16px;
        font-weight:bold;
    }

    .article-content img {
        max-width:100%;
    }

    .article-content img.revealer {
        display:block;
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: cover 10% cover 30%;
    }




    /* Footer */
    footer {
        width: 100%;
        background: #252525;
    }

    footer .content {
        width: calc(100% - 20px);
        margin: 0 auto;
        padding: 25px 0;
        color: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 25px;
    }

    footer .content .coordonnees {
        text-align: center;
    }

    footer .content .coordonnees img {
        max-width:200px;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);  
    }    

    footer .content .adresse {
        max-width: 140px;
        margin: 8px auto 15px auto;
        padding-top: 15px;
        border-top: 1px solid #acaaaa;
        font-size: 13px;           
        color: #b6b6b6;
        text-align: left;        
    }

    footer .content .telephone {
        color: #e3283e;
        font-size: 13px;         
        max-width: 140px;
        margin: 0 auto;
        text-align: left;        
    }

    footer .content .telephone::before {
        content: url(../images/picto-telephone.png);
        transform: scale(.75);        
        margin-right: 5px;
        margin-top: -5px;
        float: left;
    }

    footer .content .edito {
        flex: 1 1 200px;
        min-width: 200px;
        text-align: justify;
        font-size: 10pt;
        color:#b6b6b6;        
    }

    footer .content .liens.plan-site {
        flex: 1 1 100%;
    }

    footer .content .liens.sites-ufolep {
        flex: 1 1 250px;
        min-width: 250px;
        display: none;
    }

    footer .content .liens .titre {
        font-family: bebasneue;
        font-weight: normal;
        text-transform: uppercase;
        margin-bottom: 5px;
        color: #b6b6b6;
        font-size: 1.24em;
    }

    footer .content .liens ul.menu {
        min-width: 150px;
        display: block;
        margin: 0;
        padding: 0;
    }

    footer .content .liens ul.menu.plan-site_list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    footer .content .liens ul.menu>li {
        flex: 1 1 50%;
        display: list-item;
        list-style-type: none;
        margin-bottom: 15px;
        min-width: 180px;
    }

    footer .content .liens.sites-ufolep ul.menu>li {
        width: 100%;
    }

    footer .content .liens ul.menu ul.sousmenu {
        padding-left: 2px;
        padding-top: 5px;
    }

    footer .content .liens ul.menu ul.sousmenu>li {
        list-style-type: none;
    }

    footer .content .liens.sites-ufolep ul.menu ul.sousmenu>li {
        white-space: nowrap;
    }

    footer .content .liens ul.menu ul.sousmenu>li::before {
        content: '>';
        margin-right: 10px;
    }

    footer .content .liens ul.menu ul.sousmenu>li a {    
        font-weight: normal;
    }

    footer a {
        color: #fff !important;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }
}


@media screen and (min-width: 1025px) and (max-width: 1280px) {
    /* classes de masquage */
    .hidexs {
        display: inherit;
    }

    .showxs {
        display: none !important;
    }


    /* En-tête */
    header {
        width: 100%;
        height: 130px;
        box-sizing: border-box;
        padding: 10px 0;
    }

    header .entete {
        display: flex;
        width: calc(100% - 40px);
        margin: 0 10px;
    }

    header .entete .logo {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
    }

    header .entete .logo img {
        height: 86px;
        width: auto;
    }

    header .entete .main-content {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 100%;
    }

    header .entete .contact {
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: right;
        gap: 12px;
    }

    header .entete .contact .separateur {
        border-left: 1px solid #545454;
        height: 46px;
    }

    nav {
        height: 60px;
        width: 100%;
        background: #252525;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Contenu */
    .main-content {
        margin-top: 50px;
        max-width: 1004px;
        margin-right: auto;
        margin-left: auto;
    }

    .main-content .presentation {
        margin-bottom: 30px;
    }

    .main-content .presentation .titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .main-content .aside {
        margin-bottom: 30px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-content .aside .col2 {
        flex: 0 225px;
        height: 240px;
        box-sizing: border-box;
        margin: 0px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 0px 5px 9px rgba(205, 205, 205, 1);
        display: inline-block;
        vertical-align: top;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;        
    }

    .main-content .aside .col2:hover {
        -webkit-transform: scale(.90);
        transform: scale(.90);
    }

    .main-content .aside .col2 a {
        text-decoration: none;
    }

    .main-content .aside .col2 img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 10px
    }

    .main-content .aside .col2 .titre {
        width: 205px;
        margin: 0 10px;
        box-sizing: border-box;
        height: 50px;
        text-align: center;
        font-family: bebasneue, Helvetica, sans-serif;
        color: white;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 1px;
    }

    .main-content .aside .col2 .suivre {
        width: 205px;
        margin: 0 10px;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        border-top: 1px solid white;
        text-align: center;
        color: white;
        padding: 20px 30px;
    }

    .main-content .aside .col2 .suivre::after {
        content: url(../images/fleche_droite.png);
        margin-top: 5px;
    }


    /* Partenaires */
    .partenaires-content {
        text-align: center;
        margin-top: 25px;
        margin-bottom: 45px;
    }

    .partenaires-content .titre {
        display: inline;
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: normal;
        padding: 0 10px 5px 10px;
    }


    .partenaires-content .partenaires-content_list {
        margin:0 auto;
        overflow: hidden;      
        user-select:none;               
        display: flex;
        gap: 20px;
    }

    .partenaires-content .partenaires-content_list ul {
        list-style: none;
        flex-shrink: 0;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        animation: scroll 30s linear infinite;       
    }

    @-webkit-keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }
    @keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }

    .partenaires-content .partenaires-content_list:hover ul {
        animation-play-state: paused;
    }

    .partenaires-content .partenaires-content_list img {
        width: auto;
        max-height: 80px;
    }


    /* Article (contenu dynamique) */
    .article-content {
        margin: 50px auto;
        width: calc(100% - 60px);
        padding: 35px 0;
        position:relative;
        font-size: 14px;
        line-height: 20px; 
        font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    .article-content .main-titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .article-content .titre-paragraphe {
        color: rgb(229, 27, 88);
        line-height: 24px;
        font-size: 16px;
        font-weight:bold;
    }

    .article-content img {
        max-width:100%;
    }

    .article-content img.revealer {
        display:block;
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: cover 10% cover 30%;
    }


    /* Footer */
    footer {
        width: 100%;
        background: #252525;
    }

    footer .content {
        width: calc(100% - 20px);
        margin: 0 auto;
        padding: 25px 0;
        color: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 25px;
    }

    footer .content .coordonnees {
        text-align: center;
    }

    footer .content .coordonnees img {
        max-width:200px;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);  
    }    

    footer .content .adresse {
        max-width: 140px;
        margin: 8px auto 15px auto;
        padding-top: 15px;
        border-top: 1px solid #acaaaa;
        font-size: 13px;           
        color: #b6b6b6;
        text-align: left;         
    }

    footer .content .telephone {
        color: #e3283e;
        font-size: 13px;         
        max-width: 140px;
        margin: 0 auto;
        text-align: left;        
    }

    footer .content .telephone::before {
        content: url(../images/picto-telephone.png);
        transform: scale(.75);        
        margin-right: 5px;
        margin-top: -5px;
        float: left;
    }

    footer .content .edito {
        flex: 1 1 200px;
        min-width: 200px;
        text-align: justify;
        font-size: 10pt;
        color:#b6b6b6;        
    }

    footer .content .liens.plan-site {
        flex: 1 1 100%;
    }

    footer .content .liens.sites-ufolep {
        flex: 1 1 250px;
        min-width: 250px;
    }

    footer .content .liens .titre {
        font-family: bebasneue;
        font-weight: normal;
        text-transform: uppercase;
        margin-bottom: 5px;
        color: #b6b6b6;
        font-size: 1.24em;
    }

    footer .content .liens ul.menu {
        min-width: 150px;
        display: block;
        margin: 0;
        padding: 0;
    }

    footer .content .liens ul.menu.plan-site_list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    footer .content .liens ul.menu>li {
        flex: 1 1 50%;
        display: list-item;
        list-style-type: none;
        margin-bottom: 15px;
        min-width: 180px;
    }

    footer .content .liens.sites-ufolep ul.menu>li {
        width: 100%;
    }

    footer .content .liens ul.menu ul.sousmenu {
        padding-left: 2px;
        padding-top: 5px;
    }

    footer .content .liens ul.menu ul.sousmenu>li {
        list-style-type: none;
    }

    footer .content .liens.sites-ufolep ul.menu ul.sousmenu>li {
        white-space: nowrap;
    }

    footer .content .liens ul.menu ul.sousmenu>li::before {
        content: '>';
        margin-right: 10px;
    }

    footer .content .liens ul.menu ul.sousmenu>li a {    
        font-weight: normal;
    }

    footer a {
        color: #fff !important;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }
}



@media screen and (min-width: 1281px) {

    /* classes de masquage */
    .hidexs {
        display: inherit;
    }

    .showxs {
        display: none !important;
    }


    /* En-tête */
    header {
        width: 100%;
        height: 130px;
        box-sizing: border-box;
        padding: 20px 0;

    }

    header .entete {
        display: flex;
        width: calc(100% - 40px);
        margin: 0 20px;
    }

    header .entete .logo {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
    }

    header .entete .logo img {
        height: 86px;
        width: auto;
    }

    header .entete .main-content {
        display: inline-block;
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 100%;
    }

    header .entete .contact {
        vertical-align: middle;
        margin: 0 14px;
        flex: 1 1 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: right;
        gap: 12px;
    }

    header .entete .contact .separateur {
        border-left: 1px solid #545454;
        height: 46px;
    }

    nav {
        height: 60px;
        width: 100%;
        background: #252525;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Contenu */
    .main-content {
        margin-top: 50px;
        max-width: 1550px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-right: auto;
        margin-left: auto;
    }

    .main-content .presentation {
        flex: 0 50%;
        margin-left: 20px;
    }

    .main-content .presentation .titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .main-content .aside {
        flex: 0 45%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .main-content .aside .col2 {
        flex: 0 240px;
        height: 240px;
        box-sizing: border-box;
        margin: 0px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 0px 5px 9px rgba(205, 205, 205, 1);
        display: inline-block;
        vertical-align: top;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    .main-content .aside .col2:hover {
        -webkit-transform: scale(.90);
        transform: scale(.90);
    }

    .main-content .aside .col2 a {
        text-decoration: none;
    }


    .main-content .aside .col2 img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 10px
    }

    .main-content .aside .col2 .titre {
        width: 200px;
        margin: 0 20px;
        box-sizing: border-box;
        height: 50px;
        text-align: center;
        font-family: bebasneue, Helvetica, sans-serif;
        color: white;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 1px;
    }


    .main-content .aside .col2 .suivre {
        width: 200px;
        margin: 0 20px;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        border-top: 1px solid white;
        text-align: center;
        color: white;
        padding: 20px 30px;
    }

    .main-content .aside .col2 .suivre::after {
        content: url(../images/fleche_droite.png);
        margin-top: 5px;
    }

    /* Partenaires */
    .partenaires-content {
        text-align: center;
        margin-top: 25px;
        margin-bottom: 45px;
    }


    .partenaires-content .titre {
        display: inline;
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: normal;
        padding: 0 10px 5px 10px;
    }

    .partenaires-content .partenaires-content_list {
        margin:0 auto;
        overflow: hidden;      
        user-select:none;               
        display: flex;
        gap: 20px;
    }

    .partenaires-content .partenaires-content_list ul {
        list-style: none;
        flex-shrink: 0;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        animation: scroll 30s linear infinite;       
    }

    @-webkit-keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }
    @keyframes scroll{
        to{
            transform: translateX(calc(-100% - 20px));
        }
    }

    .partenaires-content .partenaires-content_list:hover ul {
        animation-play-state: paused;
    }

    .partenaires-content .partenaires-content_list img {
        width: auto;
        max-height: 80px;
    }


    /* Article (contenu dynamique) */
    .article-content {
        margin: 50px auto;
        max-width: 1150px;
        padding: 35px 0;
        position:relative;
        font-size: 14px;
        line-height: 20px; 
        font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    .article-content .main-titre {
        font-family: bebasneue, Helvetica, sans-serif;
        color: #000000;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .article-content .titre-paragraphe {
        color: rgb(229, 27, 88);
        line-height: 24px;
        font-size: 16px;
        font-weight:bold;
    }

    .article-content img {
        max-width:100%;
    }    

    .article-content img.revealer {
        display:block;
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: cover 10% cover 30%;
    }


    /* Footer */
    footer {
        width: 100%;
        background: #252525;
    }

    footer .content {
        width: calc(100% - 40px);
        margin: 0 20px;
        padding: 25px 0;
        color: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 25px;
    }

    footer .content .coordonnees {
        text-align: center;
    }

    footer .content .coordonnees img {
        max-width:200px;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);  
    }        

    footer .content .adresse {
        max-width: 140px;
        margin: 8px auto 15px auto;
        padding-top: 15px;
        border-top: 1px solid #acaaaa;
        font-size: 13px;           
        color: #b6b6b6;
        text-align: left;   
    }

    footer .content .telephone {
        color: #e3283e;
        font-size: 13px;         
        max-width: 140px;
        margin: 0 auto;
        text-align: left;        
    }

    footer .content .telephone::before {
        content: url(../images/picto-telephone.png);
        transform: scale(.75);        
        margin-right: 5px;
        margin-top: -5px;
        float: left;
    }

    footer .content .edito {
        flex: 1 1 200px;
        min-width: 200px;
        text-align: justify;
        font-size: 10pt;
        color:#b6b6b6;
    }

    footer .content .liens.plan-site {
        flex: 1 1 100%;
    }

    footer .content .liens ul.menu.plan-site_list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    footer .content .liens.sites-ufolep {
        flex: 1 1 250px;
        min-width: 250px;
    }

    footer .content .liens .titre {
        font-family: bebasneue;
        font-weight: normal;
        text-transform: uppercase;
        margin-bottom: 5px;
        color: #b6b6b6;
        font-size: 1.24em;
    }

    footer .content .liens ul.menu {
        display: block;
        margin: 0;
        padding: 0;
    }

    footer .content .liens ul.menu>li {
        flex: 1 1 33%;
        display: list-item;
        list-style-type: none;
        margin-bottom: 15px;
        min-width: 130px;
    }

    footer .content .liens.sites-ufolep ul.menu>li {
        width: 100%;
    }

    footer .content .liens ul.menu ul.sousmenu {
        padding-left: 2px;
        padding-top: 5px;
    }

    footer .content .liens ul.menu ul.sousmenu>li {
        list-style-type: none;
    }

    footer .content .liens ul.menu ul.sousmenu>li::before {
        content: '>';
        margin-right: 10px;
    }

    footer .content .liens ul.menu ul.sousmenu>li a {    
        font-weight: normal;
    }

    footer a {
        color: #fff !important;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }
}


/* animations */
@-webkit-keyframes slidefrombottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slidefrombottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slidefromright {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slidefromright {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slidefromleft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slidefromleft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.flash:hover img {
    opacity: 1;
    -webkit-animation: flash 1s;
    animation: flash 1s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes reveal {
    0% {
        opacity: 0;
        clip-path: inset(50% 50% 50% 50%);
    }

    100% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);        
    }
}
@keyframes reveal {
    0% {
        opacity: 0;
        clip-path: inset(50% 50% 50% 50%);
    }

    100% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);        
    }
}



@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}
@keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}


#alerteur {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    -webkit-animation-name: blinker;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
    font-size: 7px;
    font-weight: bold;
    color: white;
    padding: 2px;
    text-align: center;
}






.bebasneue16 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
}

a.bebasneue16 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration: none;
}

a.bebasneue16:hover {
    text-decoration: underline;
}

.bebasneue18 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
}

a.bebasneue18 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration: none;
}

a.bebasneue18:hover {
    text-decoration: underline;
}

.bebasneue22 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
}

a.bebasneue22 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
}

a.bebasneue22:hover {
    text-decoration: underline;
}

.bebasneue29 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 29px;
    font-weight: bold;
    letter-spacing: 1px;
}

a.bebasneue29 {
    font-family: bebasneue, Helvetica, sans-serif;
    color: #000000;
    font-size: 29px;
    font-weight: bold;
    letter-spacing: 1px;
}

a.bebasneue29:hover {
    text-decoration: underline;
}



/*** Carrousel ***/

#carrousel {
    border: 0px;
    width: 440px;
    height: 268px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 440px;
    height: 268px;
}

.title {
    position: absolute;
    height: 45px;
    padding-top: 5px;
    padding-left: 12px;
    width: 440px;
    line-height: 20px;
    bottom: 0;
    left: 0;
    background: url(images/opaque.png) top left repeat;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -.02em;
    text-transform: uppercase;
    text-align: left;
    overflow: hidden;
    z-index: 1;
}

.navigation {
    position: absolute;
    bottom: 55px;
    right: 5px;
}

.navigation span {
    background: #000;
    color: #FFF;
    padding: 2px 4px;
    cursor: pointer;
    margin: 0 1px;
}

.navigation span:hover,
.navigation span.active {
    background: #FFF;
    color: #000;
}