/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 29 2024 | 23:42:15 */
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

p.centro { text-align: center !important; padding: 2px 4px; background-color: #dd9933; color: #000;
  font-size: 11px !important; line-height: 14px !important; }

figure { margin: 0 !important; }
figure p { margin: 0 !important; }

figure.efecto {
	position: relative; overflow: hidden; min-width: 230px; max-width: 768px; 
	width: 100%; color: #fff; text-align: center; font-size: 16px; background-color: #000; }

figure.efecto *,
figure.efecto *:before,
figure.efecto *:after {	box-sizing: border-box; -webkit-box-sizing: border-box;
	transition: all 0.55s ease; -webkit-transition: all 0.55s ease; }

figure.efecto img { max-width: 100%; backface-visibility: hidden; vertical-align: top; opacity: 0.9; }

figure.efecto .title { position: absolute; top: 58%; left: 25px; padding: 10px; }

figure.efecto .title:before,
figure.efecto .title:after { height: 2px; width: 400px; position: absolute; content: ''; 
	background-color: #dd9933; }

figure.efecto .title:before { 
	top:0; left: 10px; transform: translateX(100%); -webkit-transform: translateX(100%); }

figure.efecto .title:after {  bottom: 0; right: 10px; 
	transform: translateX(-100%); -webkit-transform: translateX(-100%); }

figure.efecto .title div:before,
figure.efecto .title div:after {
	width: 2px; height: 300px; position: absolute; content: ''; background-color: #dd9933; }

figure.efecto .title div:before {
	top: 10px; right: 0; transform: translateY(100%); -webkit-transform: translateY(100%); }

figure.efecto .title div:after { bottom: 10px; left: 0;
	transform: translateY(-100%); -webkit-transform: translateY(-100%); }

figure.efecto h4 { font-weight: 400; margin: 0; text-transform: uppercase; display: block;
	background-color: #dd9933; padding: 5px 10px; color: #000; }

figure.efecto .title:before h4:hover { background-color: #000 !important; color: #fff; }

figure.efecto figcaption {
	position: absolute; bottom: 42%; left: 25px; text-align: left; opacity: 0; padding: 5px 60px 5px 10px;
	font-size: 0.8em; font-weight: 500; letter-spacing: 1.5px; }

figure.efecto figcaption p { margin: 0; }

figure.efecto a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

figure.efecto:hover img { zoom: 1; filter: alpha(opacity=35); opacity: 0.35; -webkit-opacity: 0.35; }

figure.efecto:hover .title:before,
figure.efecto:hover .title:after,
figure.efecto:hover .title div:before,
figure.efecto:hover .title div:after { transform: translate(0, 0); -webkit-transform: translate(0, 0); }

figure.efecto:hover .title:before,
figure.efecto.hover .title:after { transition-delay: 0.15s; -webkit-transition-delay: 0.15s; }

figure.efecto:hover figcaption{ opacity: 1; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; }

@media screen and ( max-width: 480px) {
	figure.efecto h4 { font-size: 12px; text-transform: initial !important; } }	

@media screen and ( max-width: 540px) {
	p.centro { display:none; }
}

@media screen and ( max-width:768px) {
	figure.efecto figcaption { font-size: 11px !important;  
		line-height:12px !important; font-weight: 300 !important; letter-spacing: 0 !important; } }	

@media only screen and ( min-width:481px) and ( max-width: 891px ) {
	figure.efecto h4 { font-size: 13px; text-transform: initial; } }