﻿


.image
{
    width: 90px;
    height: auto;
}
.image120
{
    width: 120px;
    height: auto;
}
.imageBtn
{
    width: 50px;
    height: auto;
}
.imageSmall
{
    width: 25px;
    height:auto;
}

.imgds
{
     height: 45px;
     width: auto;     
}
.imgds20
{
    height: 20px;
    width: 20px;
}
.imgds30
{
    height: 30px;
    width: 30px;
}
.imgds30a
{
    height: 30px;
    width: auto;
}
.imgds40
{
    height: 40px;
    width: 40px;
}
.imgds50a
{
     height: 50px;
     width: auto;     
}

.imgPosAcc
{
    margin-bottom: 10px;
    margin-top: 20px; 
}
.imgPos1
{
    margin-bottom: 10px;
    margin-top: 10px; 
}
.imgPos2
{
     margin-bottom: 20px;
     margin-top: 20px;      
}
.imgPos3
{
    margin-top: 10px;
}

.imgPos4
{
    margin-top: -5px;
}

.imgFlotte
{
    float:left;
    margin: 0 0 0 0;
    vertical-align: baseline;
}
.imgFlotteRgt
{
    float:right;
    margin: 0 0 0 0;
    vertical-align: baseline;
}



/* --- Utilisation du CCS3 pour les effets sur images. --- */

div.col3
{
    padding-left: 0px;
    padding-right: 0px;
}    

ul.presPictos
{
    margin: 5px auto;
    /*padding-left: 15px;*/
    padding-left: 35px;
}

ul.presPictos li
{
    list-style: none;
    float: left;
    width: 55px;
    height: 70px;
    margin-top: 3%;
    margin-right: 0px;
}

ul.presPictos li:nth-child(10)
{
    clear: left;
}

ul.presPictos img
{
    z-index: 1;
    height: auto;
    width: 48px;
    margin: 3%;
    box-shadow: 0 0 3px black;
    -webkit-transition: all .5s cubic-bezier(.6,2,.4,1);
    -moz-transition: all .5s cubic-bezier(.6,2,.4,1);
    -ms-transition: all .5s cubic-bezier(.6,2,.4,1);
    -o-transition: all .5s cubic-bezier(.6,2,.4,1);
    transition: all .5s cubic-bezier(.6,2,.4,1);
}

ul.presPictos li:hover img
{
    z-index: 5;
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
    box-shadow: 0 0 5px black;
}

ul:hover li:not(:hover) img
{
    -webkit-filter: grayscale(0.3) blur(3px);
    -moz-filter: grayscale(0.3) blur(3px);
    -filter: grayscale(0.3) blur(3px);
    -o-filter: grayscale(0.3) blur(3px);
    filter: grayscale(0.3) blur(3px);
}


/* Code sans préfixes */ 
@keyframes nomAnim { 
    from{background:#00674A;height:36px;margin-top:-8px;} 
    70%{background:white;height:20px;margin-top:0px;} 
    to{background:white;height:20px;margin-top:0px;} 
}

.chargement div { 
    width: 6px; 
    height: 15px; 
    background: white; 
    float: left;
    margin-left: 1.5px;
    animation: nomAnim 1.25s infinite linear;
}
.chargement div:first-child {
    animation-delay:0s;
} 
.chargement div:nth-child(2){
    animation-delay:0.17s;
} 
.chargement div:nth-child(3){
    animation-delay:0.34s;
} 
.chargement div:last-child{
    animation-delay:0.51s;
}

@keyframes animPointeur { 
    0% {background:rgba(255,140,0,0.4) url("../Images/pointeur.png") no-repeat 5px 10px;}
    50% {background:rgba(255,140,0,1) url("../Images/pointeur.png") no-repeat 50px 10px;}
    100% {background:rgba(255,140,0,0.4) url("../Images/pointeur.png") no-repeat 5px 10px;}
}

.pointeur div { 
    /*width: 24px; 
    height: 24px;*/ 
    /*background: rgba(255, 255, 255, 0.00);*/
    float: left;
    margin-left: 1.5px;
    animation: animPointeur 4s infinite linear;
}
.pointeur div:first-child {
    animation-delay:0s;
} 
.pointeur div:nth-child(2){
    animation-delay:0.17s;
} 
.pointeur div:nth-child(3){
    animation-delay:0.34s;
} 
.pointeur div:last-child{
    animation-delay:0.51s;
}


.doigt div {
    /*background-color:#ff8c00;*/ /* pour les vieux navigateurs */
    /*color: black;*/
    height: 50px;
    animation-name: doigt; /* nom de l'animation */
    animation-duration: 4s; /* temps de l'animation (4s) */
    animation-iteration-count: infinite; /* nombre de boucles (infinie) */
    animation-timing-function: linear; /* accelération de l'animation (constant) */
}
/* deuxième étape */
@keyframes doigt {
    0% {background:url(../Images/pointeur.png) no-repeat 5px 1px;}
    50% {background:url(../Images/pointeur.png) no-repeat 50px 1px;}
    100% {background:url(../Images/pointeur.png) no-repeat 5px 1px;}
}
