@CHARSET "UTF-8";

.nice-scroll #mfn-demo-panel { margin-right:10px;}
#mfn-demo-panel { letter-spacing: 0 !important; background:#262525; color: #dbdbdb; text-indent:0!important; position: fixed; width: 367px; height:100%; right: -367px; top: 0; z-index: 9002; line-height: 21px; font-size: 18px; font-weight:400; font-family: Lato, Arial, Helvetica, sans-serif;}
#mfn-demo-panel a { color: #dbdbdb; text-decoration:none; }
#mfn-demo-panel .control { display:block; width:65px; height:25px; position:absolute; top:395px; left:-65px; background:#262525; text-align:center; font-size:16px; padding-top:47px; font-weight:300;}
#mfn-demo-panel .control i { color: #ffffff; font-size: 25px; font-style: normal; left: 4px; position: absolute; top: 17px; font-weight:400;}
#mfn-demo-panel .inside {}

.header-rtl.nice-scroll #mfn-demo-panel { margin-right:0;}
.header-rtl #mfn-demo-panel { left: -367px; right: auto;}
.header-rtl #mfn-demo-panel .control { left:auto; right:-65px;}

#mfn-demo-panel ul.menu { padding:10px 0; text-transform:uppercase;}

#mfn-demo-panel ul.menu li a { display:block; width:100%; text-align:center; line-height:28px; 
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
#mfn-demo-panel ul.menu li a:hover { background:#363636; color:#fff; }

#mfn-demo-panel ul.menu li.buy a { color:#0095EB;}
#mfn-demo-panel ul.menu li.buy a:hover { background:#0095EB; color:#fff; }

#mfn-demo-panel .header .info { text-align:center; color:#fff; background:#363636; padding:5px 0; text-transform:uppercase;}
#mfn-demo-panel .header .info span { color:#888; font-size:11px; line-height:11px; font-weight:300;}

#mfn-demo-panel .demos ul { padding-left:1px; font-weight:300;}
#mfn-demo-panel .demos ul li { float:left;}
#mfn-demo-panel .demos ul li a { margin:0 1px 1px 0; display:block; width:182px; height:155px; position:relative; color:#fff; }
#mfn-demo-panel .demos ul li a img { opacity:1;
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
#mfn-demo-panel .demos ul li a .mask { opacity:0; width:182px; height:155px; line-height:155px; position:absolute; top:0; left:0; text-align:center; font-size: 20px;
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
#mfn-demo-panel .demos ul li a:hover img { opacity:.1;}
#mfn-demo-panel .demos ul li a:hover .mask { opacity:1;}
#mfn-demo-panel .demos ul li a .mask .full-demo { bottom: -55px; font-size: 12px; font-style: normal; left: 0; position: absolute; text-transform: uppercase; width: 100%; }

#mfn-demo-panel .demos ul li.see-all { }
#mfn-demo-panel .demos ul li.see-all a { background: #0095eb; color: #ffffff; font-weight: 400; height: auto; line-height: 60px; text-align: center; text-transform: uppercase; width: 364px;
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
#mfn-demo-panel .demos ul li.see-all a:hover { background: #0084D6; }


/* FLASHING */
@-webkit-keyframes demoflash{0%,100%,50%{opacity:1}25%,75%{opacity:.2}}
@keyframes demoflash{0%,100%,50%{opacity:1}25%,75%{opacity:.2}}
.faa-flash.animated {-webkit-animation:demoflash 4s ease infinite; animation:demoflash 4s ease infinite}

	/* mobile only */
	@media only screen and (max-width: 768px){
		#mfn-demo-panel { display:none;}
	}