body { 
padding: 0; 
margin: 0; 
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
font-family: 'Ubuntu', sans-serif;
} 



.custom-menu li { 
width: 180px;
height: 120px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin: 8px; 
border: 2px solid #cccccc;
border-radius: 10px; 
transition: 500ms; 
-webkit-transition: 500ms; /* Safari & Chrome */
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old firefox */

} 

.custom-menu li a { 
text-align: center; 
text-decoration: none; 
border-style: none; 
} 


.custom-menu li:hover {
border: 2px solid #356db8;
background-color: #c4e3f8;
 
} 

.content { 
margin-top: 0px; 
} 


.link {
margin-top:5px;
margin-bottom:5px;
font-size: 27px;
color: #e3e3e3;   
transition: 500ms; 
-webkit-transition: 500ms;  /* Safari & Chrome */
-o-transition: 500ms;   /* Opera */ 
-moz-transition: 500ms;  /* Old firefox */
}

.custom-menu li:hover .link {
color: #356db8; 
font-size: 30px; 
}


.Tsecondary { 
margin-top:5px;
margin-bottom:5px;
color: #fff; 
transition: 500ms;
-webkit-transition: 500ms; /* Safari & Chrome */
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old firefox */
} 




.custom-menu li:hover .secondary { 
 background-color: #29abe2; 
 height: 30px; 
 padding-top: 4px; 
} 

.info { 
font-size: 18px; 
color: #014B67;
margin-top: 5px;  
padding: 4px; 
transition: 500ms;
-webkit-transition: 500ms; /* Safari & Chrome */ 
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old Firefox */ 


} 

.custom-menu li:hover .info {
transform: translateX(-400px) rotate(360deg); 
-webkit-transform: translateX(-400px) rotate(360deg); /* Safari & Chrome */
-o-transform: translateX(-400px) rotate(360deg);  /* Opera */
-moz-transition: translateX(-400px) rotate(360deg);  /* Old Firefox */ 

}


.icon { 
transition: 500ms; 
-webkit-transition: 500ms; /* Safari & Chrome */  
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old Firefox */ 
transform: translate(-400px) rotate(360deg);
-webkit-transform: translate(-400px) rotate(360deg); /* Safari & Chrome */ 
-o-transform: translate(-400px) rotate(360deg); /* Opera */ 
-moz-transform: translate(-400px) rotate(360deg); /* Old Firefox */ 


} 

.custom-menu li:hover .icon {
transform: translateY(-78px) rotate(0deg); 
-webkit-transform: translateY(-78px) rotate(0deg); /* Safari & Chrome */ 
-o-transform: translateY(-78px) rotate(0deg); /* Opera */
-moz-transform: translateY(-78px) rotate(0deg); /* Old Firefox */ 

} 

/* Colors */ 
li.custom-menu1:hover { 
}

li.custom-menu2:hover { 
} 

li.custom-menu3:hover {
} 

li.custom-menu4:hover { 
} 

/* Updated CSS for bootstrap */
.container-lg {
max-width: 675px;
text-align: center;
}

a.hide-url:hover, a.hide-url:link, a.hide-url:visited, a.hide-url:active {
color: white;
}

.srv-id {
padding-top: 20px;
}
