/* ********************************************************************************************************************/
/*-------------------------------------------------------------------------------------------*/
/*  COMPENDIO DE CSS BÁSICO PARA USAR EN TEMAS DE WORDPRESS. */ 
/*  CREADO POR www.planetahuevo.es*/ 
/*   Basado en woothemes y Elegant themes shortcodes*/ 
/*  Ãºltima version descargable aquÃ­: www.planetahuevo.es*/ 
/*  A copiar y pegar en el custom.css de cualquier tema. */ 
/**/
/**/
/**/
/**/
/*-------------------------------------------------------------------------------------------*/
/* 18. BIG FLAT PANEL CSS3 */
/*<a href="#" class="flatpanel-blue">Blue button</a>*/
/*<a href="#" class="flat-primary">Primary button</a>*/
/*<a href="#" class="flat-red">Red button</a>*/
/*<a href="#" class="flat-green">Green button</a>*/

/*<a href="#" class="flat-orange">Orange button</a>*/
/*<a href="#" class="flat-dark">Dark button</a>*/
http://designmodo.github.io/Flat-UI/
http://flatuicolors.com/
/*ACTUALIZAR CODIGO USANDO: http://www.red-team-design.com/css3-patterned-buttons*/
/*-------------------------------------------------------------------------------------------*/



	[class*='flatpanel-']:hover, [class*='flatpanel-']:active {
		cursor: pointer; 
background-color: #95A5A6;
	}

[class*='flatpanel-'] {
	  border-radius: 10px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	color: #fff;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	padding: 35px 20px;
	margin: 15px;
	text-decoration: none;	
        text-align: center;
    transition: .2s ease-out;
	overflow: hidden;
    background: #7F8C8D center center no-repeat;

}



.flatpanel-blue {
    background-color: #3498db;
    color: #ffffff;
}
.flatpanel-blue:hover, .flatpanel-blue:active  {
    background-color: #2980B9;
    color: #ffffff;
}
.flatpanel-green {
    background-color: #16A085;
    color: #ffffff;
}
.flatpanel-green:hover, .flatpanel-green:active  {
    background-color: #1ABC9C;
    color: #ffffff;
}
.flatpanel-red {
    background-color: #e74c3c;
    color: #ffffff;
}
.flatpanel-red:hover, .flatpanel-red:active  {
    background-color: #C0392B;
    color: #ffffff;
}
.flatpanel-green2 {
    background-color: #27ae60;
    color: #ffffff;
}
.flatpanel-green2:hover, .flatpanel-green2:active  {
    background-color: #2ECC71;
    color: #ffffff;
}
.flatpanel-orange {
    background-color: #D35400;
    color: #ffffff;
}
.flatpanel-orange:hover, .flatpanel-orange:active  {
    background-color: #E67E22;
    color: #ffffff;
}
.flatpanel-yellow {
    background-color: #f1c40f;
    color: #ffffff;
}
.flatpanel-yellow:hover, .flatpanel-yellow:active  {
    background-color: #F39C12;
    color: #ffffff;
}
.flatpanel-purple {
    background-color: #8e44ad;
    color: #ffffff;
}
.flatpanel-purple:hover, .flatpanel-purple:active  {
    background-color: #9B59B6;
    color: #ffffff;
}
.flatpanel-dark {
    background-color: #34495e;
    color: #ffffff;
}
.flatpanel-dark:hover, .flatpanel-dark:active  {
    background-color: #2C3E50;
    color: #ffffff;
}
.flatpanel-silver {
    background-color: #BDC3C7;
    color: #ffffff;
}
.flatpanel-silver:hover, .flatpanel-silver:active  {
    background-color: #ECF0F1;
    color: #000;
}