/****************************************************************************/
/************************** Boutons de navigation ***************************/
/****************************************************************************/


#css_navigation {
    width: 75%;
    margin: auto;
}

    #css_navigation div {
        float: left;
        margin: 10px;
    }


/****************************************************************************/
/**************************** Enveloppe annimée *****************************/
/****************************************************************************/


#enveloppe {
    position: relative;
    clear: left;
    width: 0px;
    height: 0px;
    margin: 0 auto;
    background: tan;
    border-top: 100px solid #EE7C31;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 100px solid transparent;
    transition:border-color 3s linear;
}

#enveloppe:hover {
    border-top-color: transparent;
    border-right-color: #EE7C31;
    border-bottom-color: #EE7C31;
    border-left-color: #EE7C31;
}



/****************************************************************************/
/********************************* Losange **********************************/
/****************************************************************************/


#losange {
    position: relative;
    clear: left;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: green;
    transform: rotate(45deg);
    transform-origin: 0 100%;
    margin-bottom: 100px;
}


/****************************************************************************/
/********************************* Trapèze **********************************/
/****************************************************************************/


#trapeze {
    position: relative;
    clear: left;
    width: 100px;
    height: 0px;
    margin: 0 auto;
    border-left: 50px solid transparent;
    border-bottom: 100px solid;
    border-right: 50px solid transparent;
    margin-bottom: 50px;
}


/****************************************************************************/
/******************************** Pentagone *********************************/
/****************************************************************************/


#pentagone_contenant {
    clear: left;
    margin-top: 130px;
}

#pentagone {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
    margin: 0 auto;
}

    #pentagone::before {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent red;
    }


/****************************************************************************/
/****************************** Affichage note ******************************/
/****************************************************************************/


.citation {
    position: relative;
    clear: left;
    width: 300px;
    padding: 15px 25px 20px;
    margin: 20px auto;
    font: italic 26px/1.4 georgia, serif;
    color: black;
    background-color: fuchsia;
}

    .citation:after {
        content: "";
        position: absolute;
        top: 100%;
        right: 25px;
        border-width: 30px 30px 0 0;
        border-style: solid;
        border-color: fuchsia transparent;
        transform: skewX(-15deg);
    }

.auteur {
    margin: 1em 0 0;
    font: 14px/1.2 arial, sans-serif;
}

    .auteur:before {
        content: "*";
    }


/****************************************************************************/
/****************************** Fonction clip *******************************/
/****************************************************************************/


#sansclip {
    position:relative;
    clear: left;
}

#sansclip img, #avecclip img {
    width:300px;
}

#clip_contenant {
    position:relative;
    height:250px;
}

#avecclip {
    position:absolute;
    clip:rect(0px,150px,200px,10px);
}


/****************************************************************************/
/****************** Ecrire un texte façon machine à écrire ******************/
/****************************************************************************/


.typewriter {
    position: relative;
    clear: left;
}

    .typewriter h1 {
        width: 30%;
        overflow: hidden;
        border-right: .2em solid;
        white-space: nowrap;
        animation: typeEffect 5s steps(50), cursorBlink .8s step-end infinite;
    }

@keyframes typeEffect {
    from {
        width: 0;
    }

    to {
        width: 30%;
    }
}

@keyframes cursorBlink {
    from, to {
        border-color: transparent;
    }

    50% {
        border-color: green;
    }
}


/****************************************************************************/
/******************** Animation de chargement circulaire ********************/
/****************************************************************************/


#chargement {
    position: relative;
    clear: left;
    margin: auto;
    width: 110px;
    height: 110px;
    background-color: transparent;
}

/********** Conteneur circulaire **********/

.circle {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    /********** Cercle extérieur **********/

    .circle > * {
        position: absolute;
        top: 0;
        left: 0;
        height: 100px;
        width: 100px;
        transform-origin: 55% 55%;
        background-repeat: repeat;
        background-size: 100px 100px;
        animation: rotate infinite linear;
    }

        /********** Cercle intérieur **********/

        .circle > * > * {
            display: block;
            width: 100%;
            height: 100%;
            border: 5px dotted #EE7C31;
            border-radius: 100%;
        }

        /********** Paramètres des cercles **********/

        .circle > *:nth-child(1) {
            animation-duration: 10s;
        }

        .circle > *:nth-child(2) {
            animation-duration: 32s;
            margin: 10vh;
            height: 80vh;
            width: 80vh;
        }

        .circle > *:nth-child(3) {
            animation-duration: 64s;
            margin: 20vh;
            height: 60vh;
            width: 60vh;
        }

/********** Paramètres des animations **********/

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/****************************************************************************/
/******************** Annimation sur image (transparence) *******************/
/****************************************************************************/


#image_transparence {
    clear: left;
    position: relative;
    width:250px;
    margin:auto;
    background-size:cover;
}

#image_transparence img {
    width:250px;
    animation-name: transparence;
    animation-iteration-count:infinite;
    animation-duration: 6s;
}


@keyframes transparence {
    0% {opacity:1;}
    50% {opacity:0;}
    100% {opacity:1;}
}


/****************************************************************************/
/************************ Annimation sur image (zoom) ***********************/
/****************************************************************************/


#image_zoom {
    clear: left;
    position: relative;
    margin: 50px;
    animation: zoom 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-delay:3s;
    width: 250px;
    left: 0px;
}

#image_zoom img {
    width:250px;
}

@keyframes zoom {
           from {
               zoom :1;
               left :0px;
                           }
            to {
                zoom :0;
                left :500px;
            }
         }


/****************************************************************************/
/******************** Annimation sur image (déplacement) ********************/
/****************************************************************************/


#image_deplacement {
    position: relative;
    clear :left ;
    height: 298px;
    float: right;
    animation-delay: .5s;
    animation: deplacement 5s;
    animation-iteration-count:infinite ;
    animation-timing-function: linear;
    animation-direction: normal;
}

    #image_deplacement:hover {
        animation-play-state: paused;
    }


@keyframes deplacement {
    0% {
        top: 0px;
        transform: translate(0px,30px);
    }

    10% {
        transform: translate(-100px, 20px);
    }

    20% {
        transform: translate(-200px, 30px);
    }

    30% {
        transform: translate(-300px, 20px);
    }

    40% {
        transform: translate(-400px, 10px);
    }

    50% {
        transform: translate(-500px, 20px);
    }

    60% {
        transform: translate(-600px, 30px);
    }

    70% {
        transform: translate(-700px, 20px);
    }

    80% {
        transform: translate(-800px, 10px);
    }

    90% {
        transform: translate(-900px, 20px);
    }

    100% {
        transform: translate(-1000px, 30px);
    }
}

hr {
    position: relative;
    top: -10px;
    clear:right;
}


/****************************************************************************/
/******************** Annimation sur image (perspective) ********************/
/****************************************************************************/


#image_perspective {
    position: relative;
    clear: left;
    margin: 50px auto 0px auto;
    animation: perspective 3s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    width: 250px;
    left: 0px;
}

#image_perspective img {
    width:250px;
}

@keyframes perspective {
    from {
        transform: skewX(0deg);
    }

    to {
        transform: skewX(-45deg);
    }
}


/****************************************************************************/
/******************** Annimation sur image (translation) ********************/
/****************************************************************************/


#image_translation {
    position: relative;
    clear: left;
    margin: 50px 0px 0px 0px;
    animation: translation 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    width: 214px;
    left: 0px;
}

@keyframes translation {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(50px);
    }
}


/****************************************************************************/
/******************** Annimation sur image (transition) *********************/
/****************************************************************************/


#image_transition {
    clear:left;
    position:relative;
}

#image_transition div {
    position:relative;
}

#image_transition ul {
    list-style: none;
}

#image_transition li {
    margin: 5px;
    border: 1px solid #000000;
    float: left;
    width: 214px;
    height: 268px;
    overflow: hidden;
}

#image_transition ul p {
    padding: 5px;
    margin: 0px;
    color: #fff;
    background: #000;
    transition: margin-top linear .5s;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
}

#image_transition li:hover p {
    margin-top: -50px;
}


/****************************************************************************/
/********************* Annimation sur image (rotation) **********************/
/****************************************************************************/


#image_rotation {
    position: relative;
    clear:left;
    margin: 50px auto 0px auto;
    width:250px;
}

#image_rotation img {
    animation: rotation 6s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
        left: 0px;
    }

    to {
        transform: rotate(1080deg);
        left: 810px;
    }
}


/****************************************************************************/
/****************************** Texte défilant ******************************/
/****************************************************************************/


#textedefilant_contenant {
    margin: 20px auto auto auto;
    width: 75%;
    background-color: #FFFF00;
    overflow: hidden;
    padding-top: 15px;
    padding-bottom: 15px;
}

#textedefilant_box {
    animation-name: textdefilant;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    position: relative;
    left: 0px;
    width: 95px;
    color: #FF0000;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
}

@keyframes textdefilant {
    from {
        left: -150px;
    }

    to {
        left: 100%;
    }
}