.clearfix
{
	 background-color:white;
	
}
.black
{
	background-color:black;

}

.green
{
 background-color:#800000;

}

.blue
{
	 background-color:#00004C;

}

.orange
{
	 background-color:#003300;

}

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('icons/websymbols/websymbols-regular-webfont.eot');
    src: url('icons/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('icons/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('icons/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('icons/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


.ca-menu{
    padding:0;
    margin:20px 8%;
    max-width: 1000px;
	font-family: 'Dosis', sans-serif;
}
.ca-menu li  {
    width: 180px;
    height: 180px;
    border: 10px solid #f6f6f6;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-right: 9px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 800ms linear;
    -moz-transition: all 800ms linear;
    -o-transition: all 800ms linear;
    -ms-transition: all 800ms linear;
    transition: all 800ms linear;
		z-index: 1;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
   -moz-box-shadow:0px 0px 3px #000000;
   -webkit-box-shadow:0px 0px 3px #000000;
   box-shadow:0px 0px 3px #000000;

}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #f6f6f6;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    text-align: center;
    -webkit-transition: all 800ms linear;
    -moz-transition: all 800ms linear;
    -o-transition: all 800ms linear;
    -ms-transition: all 800ms linear;
    transition: all 800ms linear;

}
.ca-main{
    font-size: 18px;
    position: absolute;
	color:white;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
	margin-top:-5px;
    opacity: 0.8;
    text-align: center;
}
.ca-sub{
    text-align:center;
    color: white;
    font-size: 18px;
    position: absolute;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
	margin-top:-5px;
    top: 110px;
    opacity: 0;
    -webkit-transition: all 800ms linear;
    -moz-transition: all 800ms linear;
    -o-transition: all 800ms linear;
    -ms-transition: all 800ms linear;
    transition: all 800ms linear;
}

.ca-menu 
{
	    text-align: center;
}

.ca-menu li
{
    display:inline-block;
    vertical-align: middle;		
}

.ca-menu li:hover{
    background: #f7f7f7;
    border-color: #fff;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);

}

.ca-menu .bob:hover{
    background: #f7f7f7;
    border-color: #fff;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);

}

.ca-menu li:hover .ca-icon{
    color: #555;
    font-size: 60px;
}
.ca-menu li:hover .ca-main{
    display: none;
}
.ca-menu li:hover .ca-sub{
    opacity: 0.8;
}

/* ===================================================================================
	BOOTSTRAP MEDIA QUERIES OVERRIDES
	NOTE: The order of the media queries is important when styles overwrite each other
	================================================================================== */
@media (min-width: 980px) {}
@media (min-width: 1200px) {}
@media (max-width: 979px) {}
@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 767px) {}
@media (max-width: 480px)
{

	.ca-icon{
	
		font-size: 12px;
		top: 2px;
	}
	.ca-main{
		font-size: 10px;
	    top: 45px;
	}
	.ca-sub{
		font-size: 10px;

	}
	.ca-menu li
	{
		width: 90px;
		height: 90px;
	}	
	
	/*after the transformation*/
.ca-menu li:hover .ca-icon{
    color: #555;
    font-size: 12px;
}
	
}