/* Media queries pour smartphones */


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

.xp-date6, .xp-date5, .xp-date4, .xp-date3, .xp-date2, .xp-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%;
}

.titre-xp6, .titre-xp5, .titre-xp4, .titre-xp3, .titre-xp2, .titre-xp1 {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-weight: bold;
    text-align: center;
    font-size: 1em;
    max-width: 86%;
    padding-top: 2%;
}
    
.boite-lieu6, .boite-lieu5, .boite-lieu4, .boite-lieu3, .boite-lieu2, .boite-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-legrand, .img-multivote, .img-PLG, .img-CCCE, .img-agmtec, .img-sportsland {
    display: none;
    }

#experience-legrand ,#experience-multivote, #experience-PLG, #experience-CCCE, #experience-agmtec, #experience-sportsland {
    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);
  }
}

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

.titre-xp6, .titre-xp5, .titre-xp4, .titre-xp3, .titre-xp2, .titre-xp1 {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-weight: bold;
    margin-left: 35%;
}
    
.boite-lieu6, .boite-lieu5, .boite-lieu4, .boite-lieu3, .boite-lieu2, .boite-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-legrand, #img-multivote, #img-PLG, #img-CCCE, #img-agmtec, #img-sportsland {
    -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%;
    }

, #experience-legrand, #experience-multivote, #experience-PLG, #experience-CCCE, #experience-agmtec, #experience-sportsland {
    position:relative;
    float: left;
    width: 50%;
    margin-left: 8%;
    margin-bottom: 5%;
    }      
}
    












/* Media queries pour laptop */

@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);
  }
}

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

 .titre-xp6, .titre-xp5, .titre-xp4, .titre-xp3, .titre-xp2, .titre-xp1 {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-weight: bold;
    margin-left: 35%;
}
    
.boite-lieu6, .boite-lieu5, .boite-lieu4, .boite-lieu3, .boite-lieu2, .boite-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-legrand, .img-multivote, .img-PLG, .img-CCCE, .img-agmtec, .img-sportsland {
    -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%;
    margin-top: 2.5%;
    }
    
    
@keyframes pulse_animation {
	0% { transform: scale(1); }
	10% { transform: scale(1.08); }
} 
    
.img-legrand:hover, .img-multivote:hover, .img-PLG:hover, .img-CCCE:hover, .img-agmtec:hover, .img-sportsland:hover {
    animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
    }
    
 
#experience-legrand, #experience-multivote, #experience-PLG, #experience-CCCE, #experience-agmtec, #experience-sportsland {
    position:relative;
    float: left;
    width: 50%;
    margin-left: 8%;
    margin-bottom: 5%;
    }      
}