/* Media queries pour desktop large screen */

@media only screen and (min-width : 1824px) { 
    
#texte-apropos {
    font-family: 'Open Sans', sans-serif;
    max-width: 48%;
    text-align: justify;
    float: left;
    position: absolute;
    padding-left: 15%;
    color: #333;
}
    
#texte-mentions {
    font-family: 'Open Sans', sans-serif;
    text-align: justify;
    padding-left: 15%;
    padding-right: 15%;
    color: #333;    
    }
    

/* Animation sur l'icone A propos */ 
    
#img-apropos:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
    
    @keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-1px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(2px, 0, 0);
  }
}
    
  /* Fin animation sur l'icone A propos */  
    
#photo {
    float: right;    
    position: relative;
    margin-right: 15%;
    border: 4px solid #f8f8f8;
    margin-bottom: 4%;
    -webkit-box-shadow: 2px 6px 20px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 6px 20px -4px rgba(0,0,0,0.75);
    box-shadow: 2px 6px 20px -4px rgba(0,0,0,0.75);
    }

}

    
    
    







/* Media queries pour laptop */

@media only screen and (min-width : 1024px) {    
    
#texte-apropos {
    font-family: 'Open Sans', sans-serif;
    max-width: 48%;
    text-align: justify;
    float: left;
    position: absolute;
    padding-left: 15%;
    color: #333;
}
    
#texte-mentions {
    font-family: 'Open Sans', sans-serif;
    text-align: justify;
    padding-left: 15%;
    padding-right: 15%;
    color: #333;    
    }
    

/* Animation sur l'icone A propos */ 
    
#img-apropos:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
    
    @keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-1px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(2px, 0, 0);
  }
}
    
  /* Fin animation sur l'icone A propos */  
    
#photo {
    float: right;    
    position: relative;
    margin-right: 15%;
    border: 4px solid #f8f8f8;
    margin-bottom: 4%;
    -webkit-box-shadow: 2px 6px 20px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 6px 20px -4px rgba(0,0,0,0.75);
    box-shadow: 2px 6px 20px -4px rgba(0,0,0,0.75);
    }

}

    



/* Media queries pour smartphones */


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

#texte-apropos {
    text-align: left !important;
    }
    
#texte-mentions {
    text-align: left !important; 
    font-family: 'Open Sans', sans-serif !important;
    padding-left: 15% !important;
    padding-right: 15% !important;
    color: #333 !important;  
    }
}