@charset "utf-8";
/* CSS Document */
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}

ul.flatflipbuttons li{
margin:5px;
display: inline-block;
/* dimensions of buttons. */
/*width: 250px;  
height: 100px;*/
width: 400px;  
height: 200px;


/* spacing between buttons */
/*margin-right: 60px;
margin-top: 20px;*/
margin-right: 100px;
margin-top: 100px;

/*text-transform: uppercase;*/
text-align: center;
}

ul.flatflipbuttons li.fino{
	height: 50px;
}

ul.flatflipbuttons li.fino a{
	border-width: 0;
	vertical-align: middle;
	text-decoration:none;
}

ul.flatflipbuttons li a{

display:table;
/*font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
/*font: bold 20px Georgia, "Times New Roman", Times, serif;*/
font: bold 28px Georgia, "Times New Roman", Times, serif;
width: 100%;
height: 100%;
margin-bottom: 4px;
color:#FFFFFF;
/*background:#de8d0c;*/
background: #004450;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;

/* Da sombra al borde */
-webkit-box-shadow: 0 0 10px rgb(13,13,13);
-moz-box-shadow: 0 0 10px rgb(13,13,13);
box-shadow: 0 0 10px rgb(13,13,13);

}

/* COLORES DE BOTONES en función de item de li en la colección de li*/
/*ul.flatflipbuttons li:nth-of-type(1) a{
color: #000066;
background: #87c9ae;
}

ul.flatflipbuttons li:nth-of-type(2) a{
color: #000066;
background:#FF0000;
}*/


ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

ul.flatflipbuttons li b{ /* CSS for text beneath button */
display: block;
position: relative;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.2s;
}

ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}

ul.flatflipbuttons li:hover a{
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}

ul.flatflipbuttons li:hover a span{
color:#004450;
background:#e4ebec;
}

ul.flatflipbuttons li:hover b{
opacity: 1;
}

/* CSS for 2nd menu below specifically */

ul.second li a{
background: #eee !important;
}

ul.second li a:hover{
background: #ddd !important;
}