/* 

 * Demo CSS Styles

 */

.nice-scroll #mfn-demo-panel { margin-right:10px;}

#mfn-demo-panel { background:#262525; color: #dbdbdb; position: fixed; width: 367px; height:100%; right: -367px; top: 0; z-index: 9000; line-height: 21px; font-size: 18px; font-weight:300; font-family: Roboto, Arial, Helvetica, sans-serif;}

#mfn-demo-panel a { color: #dbdbdb; text-decoration:none;}

#mfn-demo-panel .control { display:block; width:51px; height:22px; position:absolute; top:395px; left:-51px; background:#262525; text-align:center; font-size:14px; padding-top:41px;}

#mfn-demo-panel .control i { color:#fff; position:absolute; top:10px; left:7px; font-size:27px; }

#mfn-demo-panel .inside {}



#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;}

#mfn-demo-panel ul.menu li.buy a { color:#da241b; font-style:italic;}

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



#mfn-demo-panel .header .info { text-align:center; color:#da241b; background:#363636; padding:5px 0; text-transform:uppercase; font-weight:400;}

#mfn-demo-panel .header .info span { color:#aaa; font-size:12px; font-weight:300;}



#mfn-demo-panel .demos ul { padding-left:1px;}

#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; }

#mfn-demo-panel .demos ul li a img { opacity:1;}

#mfn-demo-panel .demos ul li a .mask {  display:none; width:182px; height:155px; line-height:155px; position:absolute; top:0; left:0; text-align:center; font-size: 20px;}

#mfn-demo-panel .demos ul li a:hover img { opacity:.1;}

#mfn-demo-panel .demos ul li a:hover .mask { display:block;}

#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%; }





/* 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;}

	}