/* Media queries pour smartphones */


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


.formation-date4, .formation-date3, .formation-date2, .formation-date1 {
    background-color: #21b2ed;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding: 2%;
    margin-left: 25%;
    max-width: 35%;
    color: white;
    font-size: 1em;
    margin-top: 10%;
}

.formation-xp4, .formation-xp3, .formation-xp2, .formation-xp1 {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-weight: bold;
    text-align: center;
    font-size: 1em;
    max-width: 86%;
    padding-top: 2%;
}
    
.organisme-lieu4, .organisme-lieu3, .organisme-lieu2, .organisme-lieu1 {
    font-family: 'Open Sans', sans-serif;
    color: #333; 
    font-style: italic;
    font-size: 1em;
    padding-bottom: 10px;
    text-align: center;
    max-width: 86%;
    }

.actions {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-size: 1em;
    padding-top: 2%;
    padding-bottom: 10%;
    padding-right: 25%; 
}

.puce {
    list-style-type: square;
    color: #21b2ed;
    background-repeat: no-repeat;
    margin-left: 12%;
    }
    
.actions li {
    padding-top: 3%;
    }
    
.img-cesi, .img-rennes2, .img-toulouse1, .img-bordeaux3 {
    display: none;
    }

#formation-cesi, #formation-rennes2, #formation-toulouse1, #formation-bordeaux3 {
    width: auto;
    margin-left: 8%;
    margin-bottom: 5%;
    }      

}














/* Media queries pour desktop large screen */

@media only screen and (min-width : 1824px) { 
    
    #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);
  }
}

.formation-date4, .formation-date3, .formation-date2, .formation-date1 {
    background-color: #21b2ed;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    float: left;
    padding: 1%;
    margin-left: 14%;
    color: white;  
}

.formation-xp4, .formation-xp3, .formation-xp2, .formation-xp1 {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-weight: bold;
    margin-left: 35%;
}
    
.organisme-lieu4, .organisme-lieu3, .organisme-lieu2, .organisme-lieu1 {
    font-family: 'Open Sans', sans-serif;
    color: #333; 
    font-style: italic;
    margin-left: 35%; 
    margin-top: -1%;
    padding-bottom: 10px;
    }

.actions {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    margin-left: 34%;
}

.puce {
    list-style-type: none;
    list-style-image : url(../img/puce.png);
    background-repeat: no-repeat;
    }
    
.actions li {
    padding-left: 2%;
    padding-top: 0.5%;
    }
    
.img-cesi, .img-rennes2, .img-toulouse1, .img-bordeaux3 {
    -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); 
    float: right;
    margin-right: 15%;
    }
    
@keyframes pulse_animation {
	0% { transform: scale(1); }
	10% { transform: scale(1.08); }
} 
    
.img-cesi:hover, .img-rennes2:hover, .img-toulouse1:hover, .img-bordeaux3:hover {
    animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
    }

#formation-cesi, #formation-rennes2, #formation-toulouse1, #formation-bordeaux3 {
    position:relative;
    float: left;
    width: 50%;
    margin-left: 8%;
    margin-bottom: 5%;
    }  
    
}
    














@media only screen and (min-width : 1024px) { 
    
    #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);
  }
}

.formation-date4, .formation-date3, .formation-date2, .formation-date1 {
    background-color: #21b2ed;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    float: left;
    padding: 1%;
    margin-left: 14%;
    color: white;  
}

.formation-xp4, .formation-xp3, .formation-xp2, .formation-xp1 {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-weight: bold;
    margin-left: 35%;
}
    
.organisme-lieu4, .organisme-lieu3, .organisme-lieu2, .organisme-lieu1 {
    font-family: 'Open Sans', sans-serif;
    color: #333; 
    font-style: italic;
    margin-left: 35%; 
    margin-top: -1%;
    padding-bottom: 10px;
    }

.actions {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    margin-left: 34%;
}

.puce {
    list-style-type: none;
    list-style-image : url(../img/puce.png);
    background-repeat: no-repeat;
    }
    
.actions li {
    padding-left: 2%;
    padding-top: 0.5%;
    }
    
.img-cesi, .img-rennes2, .img-toulouse1, .img-bordeaux3 {
    -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); 
    float: right;
    margin-right: 15%;
    }
    
@keyframes pulse_animation {
	0% { transform: scale(1); }
	10% { transform: scale(1.08); }
} 
    
.img-cesi:hover, .img-rennes2:hover, .img-toulouse1:hover, .img-bordeaux3:hover {
    animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
    }

#formation-cesi, #formation-rennes2, #formation-toulouse1, #formation-bordeaux3 {
    position:relative;
    float: left;
    width: 50%;
    margin-left: 8%;
    margin-bottom: 5%;
    } 
     
    
}