.ca-menu{
    position:relative;  
    margin:0;
	padding:0;
}

	
.ca-menu li{
    width: 230px;
    height: 230px;    
    overflow: hidden;
    position: relative;
    float:left;  
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
    border-radius: 115px;
    transition: all 400ms linear;
	border: 5px solid #eeeeee;
	border-spacing:5px;
	
}

@media screen and (max-width:680px) {
	.ca-menu li{
    width: 180px;
    height: 180px;    
    overflow: hidden;
    position: relative;
    clear:both;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
    border-radius: 90px;
    transition: all 400ms linear;
	
}
}
	
	
@media screen and (min-width:681px) and (max-width:850px) {
	.ca-menu li{
    width: 180px;
    height: 180px;    
    overflow: hidden;
    position: relative;
    float:left;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
    border-radius: 90px;
    transition: all 400ms linear;
	
}
}




.rond-bleu{
position: relative; 
/* border: solid 1px #06222d; */
background-color: #095775;
}

.rond-jaune{
/* border: solid 1px #886700; */
background-color: #e8b414;
margin-left:50px;
margin-right:50px;
}

@media screen and (max-width:680px) {
.rond-jaune{
/* border: solid 1px #886700; */
background-color: #e8b414;
margin-left:0px;
margin-right:0px;
margin-top:20px;
margin-bottom:20px;
}
}

@media screen and (min-width:681px) and (max-width:850px) {
.rond-jaune{
/* border: solid 1px #886700; */
background-color: #e8b414;
margin-left:25px;
margin-right:25px;
}
}

.rond-marine{
 /* border: solid 1px #095775; */
 background-color: #06222d;
 }


.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
	font-family: 'Kaushan Script', cursive;
    position: relative;
}

.rond-bleu a .ca-content{
width: 230px;
height: 230px; 
/*margin-left:10px; 
margin-top:10px; */
position: relative;    
border-radius: 115px;

/* border: solid 1px #fff;  */
/* background-color: #095775; */
}


/* .rond-bleu a.ca-content{ */
/* width: 210px; */
/* height: 210px;  */
/* position: absolute;   */
/* top:0; */
/* right:0;   */
/* border-radius: 105px; */
/* border: solid 1px #fff;  */
/* background-color: yellow; */
/* } */


@media screen and (max-width:850px) {
.rond-bleu a .ca-content{
width: 180px;
height: 180px; 
/* margin-left:10px; */
/* margin-top:10px;     */
position: relative;    
border-radius: 90px;
/* border: solid 1px #fff;  */
/* background-color: #095775; */
}
}

.rond-jaune a .ca-content{
width: 230px;
height: 230px; 
position: relative;    
border-radius: 115px;
}

@media screen and (max-width:850px) {
.rond-jaune a .ca-content{
width: 180px;
height: 180px; 
/* margin-left:10px; */
/* margin-top:10px;     */
position: relative;    
border-radius: 90px;
/* border: solid 1px #fff;  */
/* background-color: #e8b414; */
}
}

.rond-marine a .ca-content{
width: 230px;
height: 230px; 
position: relative;    
border-radius: 115px;
}

@media screen and (max-width:850px) {
.rond-marine a .ca-content{
width: 180px;
height: 180px; 
/* margin-left:10px; */
/* margin-top:10px;     */
position: relative;    
border-radius: 90px;
/* border: solid 1px #fff;  */
/* background-color: #06222d; */
}
}

.ca-main{
    font-size:15pt;
    position: absolute;
    top: 60px;    
	height: 70px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    opacity: 1;
    text-align: center;
    color: #fff;
	line-height:1.3em;
}

.grand{
	font-family: 'Kaushan Script', cursive;
/* font-size:33pt; */
font-size:25pt;
}

@media screen and (max-width:850px) {
	.ca-main{
    font-size: 15px;
    position: absolute;
    top:50px;
    height: 30px;
    width: 180px;
    left: 50%;
    margin-left: -90px;
    opacity: 1;
    text-align: center;
    color: #fff;
}

.grand{
font-size:20pt;
}
}

.ca-menu li:hover{
    border-color: #2d4a58;
    z-index: 999;
    transform: scale(1.1);
}



.ca-menu li.rond-bleu:hover .ca-main{
    color: #06222d;
    animation: moveFromBottom 500ms ease;
}

.ca-menu li.rond-jaune:hover .ca-main{
    color: #886700;
    animation: moveFromBottom 500ms ease;
}

.ca-menu li.rond-marine:hover .ca-main{
    color: #095775;
    animation: moveFromBottom 500ms ease;
}

@keyframes moveFromBottom {
    from {
        transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@keyframes moveFromBottom {
    from {
        transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@keyframes moveFromBottom {
    from {
        transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}