Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html> 
<head> 
    <meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>C333 Awesome Menu V2 Black</title>
    <meta name="description" content="Your Description Here..."> 

    <!--[if lt IE 9]>
		<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!--[if lt IE 8]>
    <link rel="stylesheet" href="stylesheets/general_foundicons_ie7.css">
  <![endif]-->

    <style>
    	body {
    		background-image: url('http://www.studiomp4.hol.es/mob/css/bg.jpg');
    		background-position: left top;
    		background-repeat: no-repeat;
    		background-size: cover;
    		background-attachment: fixed;
    	}

    	ul.features {
		  margin-left: 40px;
		  height: auto;
		  overflow: hidden;
		  margin-bottom: 40px;
		}

		ul.features li {
		  padding-left: 20px;
		  color: #fff;
		  font-weight: 400;
		  text-shadow: 0 1px #000;
		  font-size: 15px;
		  font-family: 'Open Sans', sans-serif;
		  line-height: 180%;
		}

		ul.features li a {
			text-decoration: none;
			color: #fa0ed7;
		}

		h1.page-title {
		  font-family: 'Open Sans', sans-serif;
		  line-height: 150%;
		  border-bottom: 1px solid rgba(255,255,255,0.5);
		  font-size: 32px;
		  margin-top: 40px;
		  margin-bottom: 40px;
		  color: #fff;
		  text-align: center;
		  overflow: hidden;
		}

		div.text-container {
			padding-top: 20px;
			margin: 0 auto;
			width: 800px;
			
		}

		div.text-container div {
			margin-top: 60px;
			background: #000;
			background: rgba(0,0,0,0.5);
			box-shadow: 0 0 5px 1px rgba(0,0,0,0.32);
			border: 1px solid rgba(0,0,0,0.3);
			width: 100%;
			height: auto;
			overflow: hidden;
			padding: 15px;
		}

		.hover-switcher {
			clear: both;
			height: 10px;
			width: 100%;
		}

		span[class^="hover-color-"] {
			height: 40px;
			width: 100px;
			display: block;
			float: left;
			margin: 0 11px;
			box-shadow: 0 0 1px 0 #000;
		}

		span.hover-color-red {background-color: #DC143C;}
		span.hover-color-orange {background-color: #ff620a;}
		span.hover-color-green {background-color: #25d99a;}
		span.hover-color-pink {background-color: #ff33e7;}
		span.hover-color-applegreen {background-color: #0eae1a;}
		span.hover-color-purple {background-color: #8730db;}
    </style>
	
 
</head>
<body>
	
	<header class="css3aw-navigation-container dark-theme">

		<div class="css3aw-menu-container">
			<input type="checkbox" id="css3aw-menu-icon">
			<label for="css3aw-menu-icon">
				<span class="css3aw-menu-dash"></span>
				<span class="css3aw-menu-dash"></span>
				<span class="css3aw-menu-dash"></span>
			</label>
			
			<ul class="css3aw-sub-menu">
				<li><a href="#"><span aria-hidden="true" class="icon-briefcase"></span>Portfolio</a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-eye-open"></span>Image Gallery</a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-info-sign"></span>About</a>
					<ul>
						<li><a href="#"><span aria-hidden="true" class="icon-user"></span>Me - The Creator</a></li>
						<li><a href="#"><span aria-hidden="true" class="icon-list-ul"></span>Our Team</a></li>
					</ul>
				</li>
				<li><a href="#"><span aria-hidden="true" class="icon-download"></span>Download</a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-comments"></span>Community</a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-folder-open"></span>Freebies</a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-phone"></span>Contact</a></li>
			</ul>

		</div>

		<div class="css3aw-rightbar">
			<ul>
			
				<li><a href="index.html">CSS3 Awesome Menu V2</a></li>


				<li class="css3aw-stick-to-right css3aw-social">
					<input type="checkbox" id="css3aw-social-icon">
					<label for="css3aw-social-icon">
						<span aria-hidden="true" class="icon-share"></span>
					</label>
					<ul>
						<li><a href="#"><span aria-hidden="true" class="icon-facebook"></a></li>
						<li><a href="#"><span aria-hidden="true" class="icon-twitter"></a></li>
						<li><a href="#"><span aria-hidden="true" class="icon-google-plus"></a></li>
						<li><a href="#"><span aria-hidden="true" class="icon-youtube"></a></li>
						<li><a href="#"><span aria-hidden="true" class="icon-dribbble"></a></li>
					</ul>
				</li>

				<li class="css3aw-searchbox css3aw-stick-to-right"><input placeholder="Search" type="search"></li>

			</ul>
		</div>


	</header>

	<div class="text-container">
	<div>
		<div style="text-align: center; color: #eee;">
			<h3><a href="http://itmaniapro.blogspot.ro/" target="_blank" style="color: #ddd; line-height: 150%;">By ITMANIAPRO</a></h3>
		</div>
		<h1 class="page-title">CSS3 Awesome Menu Features</h1>
<a href="https://cdpn.io/jrewv"><img src="http://www.plici.ro/images/untitl-1382796361.jpg" width="770" height="150"  alt=""/></a>        
	      <ul class="features" style="margin-top: 30px;">
	      	<li><span aria-hidden="true" class="icon-ok"></span>Mobile First Coding</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>Responsive Design</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>Touch Optimized</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>Supports all Major Browsers Including IE, FF, Chrome, Safari and Opera</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>Two Themes - Light and Dark</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>Unlimited Hover Colors Configurable</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>360 <a href="https://fortawesome.github.io/Font-Awesome/icons/" target="_blank">"FontAwesome"</a> Icons Included</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>20+ Social Icons in Two Styles</li>
	      	<li><span aria-hidden="true" class="icon-ok"></span>Menu can be triggered by both clicking and hovering</li>
	        <li><span aria-hidden="true" class="icon-ok"></span>Smooth CSS3 Effects</li>
	        <li><span aria-hidden="true" class="icon-ok"></span>Clean Code</li>
	        <li><span aria-hidden="true" class="icon-ok"></span>Well Documented</li>
	      </ul>
	  </div>
	</div>
    
</body> 
</html>
              
            
!

CSS

              
                

 /************ CSS Reset *****************/

/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:150%;width: 100%;}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}




/*********************************** Main Styles ********************************************/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

*,
*:after,
*::before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
}


body {
	width: 100% !important;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	width: 100%;
	height: 100%;
}

header.css3aw-navigation-container {
	position: fixed;
	z-index: 9999;
	height: 48px;
	width: 100%;
	font-size: 14px;
	margin: 0;
	padding: 0;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.24);
}

div.css3aw-menu-container {
	height: 48px;
	z-index: 1;
	width: 48px;
	display: block;
	float: left;
	padding: 0;
	cursor: pointer;
}

input[id="css3aw-menu-icon"] + label > span.css3aw-menu-dash {
	display: block;
	height: 3px;
	cursor: pointer;
	margin: 3px auto;
	clear: both;
	width: 22px;
}

input[id="css3aw-menu-icon"] + label > span.css3aw-menu-dash:first-child {margin-top: 18px;}

input[type=checkbox] {
	display: none;
}

input[type=checkbox] + label {
	width: 48px;
	cursor: pointer;
	display: block;
}


ul.css3aw-sub-menu {
	position: relative;
	margin-top: 14px;
	width: 0;
}

ul.css3aw-sub-menu > li {
	position: relative;
	line-height: 48px;
	padding-left: 12px;
	white-space: nowrap;
	overflow: hidden;
	margin-left: -48px;
	width: 48px;
	-webkit-transition: margin-left .25s ease-out, width .25s ease-out;
	-moz-transition: margin-left .25s ease-out, width .25s ease-out;
	-o-transition: margin-left .25s ease-out, width .25s ease-out;
	-ms-transition: margin-left .25s ease-out, width .25s ease-out;
	transition: margin-left .25s ease-out, width .25s ease-out;
}

ul.css3aw-sub-menu > li ul {
	margin-left: -12px;
}

ul.css3aw-sub-menu > li ul li {
	width: 250px;
	height: 0;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: transparent;
	padding-left: 30px;
	-webkit-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
	-moz-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
	-o-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
	-ms-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
	transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
}

ul.css3aw-sub-menu li:first-child {-webkit-transition-delay: 0.05s; transition-delay: 0.05s;}
ul.css3aw-sub-menu li:nth-child(2) {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
ul.css3aw-sub-menu li:nth-child(3) {-webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
ul.css3aw-sub-menu li:nth-child(4) {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
ul.css3aw-sub-menu li:nth-child(5) {-webkit-transition-delay: 0.25s; transition-delay: 0.25s;}
ul.css3aw-sub-menu li:nth-child(6) {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
ul.css3aw-sub-menu li:nth-child(7) {-webkit-transition-delay: 0.35s; transition-delay: 0.35s;}
ul.css3aw-sub-menu li:nth-child(8) {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
ul.css3aw-sub-menu li:nth-child(9) {-webkit-transition-delay: 0.45s; transition-delay: 0.45s;}
ul.css3aw-sub-menu li:nth-child(10) {-webkit-transition-delay: 0.5s; transition-delay: 0.5s;}
ul.css3aw-sub-menu li:nth-child(11) {-webkit-transition-delay: 0.55s; transition-delay: 0.55s;}
ul.css3aw-sub-menu li:nth-child(12) {-webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
ul.css3aw-sub-menu li:nth-child(13) {-webkit-transition-delay: 0.65s; transition-delay: 0.65s;}
ul.css3aw-sub-menu li:nth-child(14) {-webkit-transition-delay: 0.7s; transition-delay: 0.7s;}
ul.css3aw-sub-menu li:nth-child(15) {-webkit-transition-delay: 0.75s; transition-delay: 0.75s;}
ul.css3aw-sub-menu li:nth-child(16) {-webkit-transition-delay: 0.8s; transition-delay: 0.8s;}
ul.css3aw-sub-menu li:nth-child(17) {-webkit-transition-delay: 0.85s; transition-delay: 0.85s;}
ul.css3aw-sub-menu li:nth-child(18) {-webkit-transition-delay: 0.9s; transition-delay: 0.9s;}
ul.css3aw-sub-menu li:nth-child(19) {-webkit-transition-delay: 0.95s; transition-delay: 0.95s;}
ul.css3aw-sub-menu li:nth-child(20) {-webkit-transition-delay: 1s; transition-delay: 1s;}

input#css3aw-menu-icon:checked ~ ul > li {
	margin-left: 0;
	width: 250px;
}

input#css3aw-menu-icon:checked ~ ul > li li {
	height: 48px;
}



input#css3aw-menu-icon:checked ~ ul > li:first-child li {transition-delay: 0.3s; -webkit-transirion-delay: 0.3s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(2) li {transition-delay: 0.35s; -webkit-transirion-delay: 0.35s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(3) li {transition-delay: 0.4s; -webkit-transirion-delay: 0.4s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(4) li {transition-delay: 0.45s; -webkit-transirion-delay: 0.45s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(5) li {transition-delay: 0.5s; -webkit-transirion-delay: 0.5s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(6) li {transition-delay: 0.55s; -webkit-transirion-delay: 0.55s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(7) li {transition-delay: 0.6s; -webkit-transirion-delay: 0.6s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(8) li {transition-delay: 0.65s; -webkit-transirion-delay: 0.65s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(9) li {transition-delay: 0.7s; -webkit-transirion-delay: 0.7s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(10) li {transition-delay: 0.75s; -webkit-transirion-delay: 0.75s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(11) li {transition-delay: 0.8s; -webkit-transirion-delay: 0.8s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(12) li {transition-delay: 0.85s; -webkit-transirion-delay: 0.85s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(13) li {transition-delay: 0.9s; -webkit-transirion-delay: 0.9s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(14) li {transition-delay: 0.95s; -webkit-transirion-delay: 0.95s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(15) li {transition-delay: 1s; -webkit-transirion-delay: 1s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(16) li {transition-delay: 1.05s; -webkit-transirion-delay: 1.05s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(17) li {transition-delay: 1.1s; -webkit-transirion-delay: 1.15s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(18) li {transition-delay: 1.15s; -webkit-transirion-delay: 1.2s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(19) li {transition-delay: 1.2s; -webkit-transirion-delay: 1.25s;}
input#css3aw-menu-icon:checked ~ ul > li:nth-child(20) li {transition-delay: 1.25s; -webkit-transirion-delay: 1.3s;}

/*        Right Bar Styles       */

div..css3aw-rightbar {
	padding: 0;
}

.css3aw-rightbar ul {
	width: 100%;
}

.css3aw-rightbar ul > li {
	line-height: 48px;
	float: left;
	display: block;
	padding: 0 12px;
}

.css3aw-rightbar li.css3aw-social {
	width: 48px;
	border: none !important;
}

.css3aw-rightbar li.css3aw-social ul {
	margin-top: 0px;
	width: 0;
	overflow: visible;
}

.css3aw-rightbar li.css3aw-social ul li {
	display: block;
	position: relative;
	clear: both;
	line-height: 48px;
	width: 47px;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 18px;
	margin-left: 36px;
	-webkit-transition: margin-left .25s ease-out;
	-moz-transition: margin-left .25s ease-out;
	-o-transition: margin-left .25s ease-out;
	-ms-transition: margin-left .25s ease-out;
	transition: margin-left .25s ease-out;
}

.css3aw-rightbar li.css3aw-social ul li:first-child {transition-delay: 0s; -webkit-transition-delay: 0s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(2) {transition-delay: 0.05s; -webkit-transition-delay: 0.05s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(3) {transition-delay: 0.1s; -webkit-transition-delay: 0.1s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(4) {transition-delay: 0.15s; -webkit-transition-delay: 0.15s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(5) {transition-delay: 0.2s; -webkit-transition-delay: 0.2s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(6) {transition-delay: 0.25s; -webkit-transition-delay: 0.25s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(7) {transition-delay: 0.3s; -webkit-transition-delay: 0.3s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(8) {transition-delay: 0.35s; -webkit-transition-delay: 0.35s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(9) {transition-delay: 0.4s; -webkit-transition-delay: 0.4s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(12) {transition-delay: 0.45s; -webkit-transition-delay: 0.45s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(13) {transition-delay: 0.5s; -webkit-transition-delay: 0.5s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(14) {transition-delay: 0.55s; -webkit-transition-delay: 0.55s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(15) {transition-delay: 0.6s; -webkit-transition-delay: 0.6s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(16) {transition-delay: 0.65s; -webkit-transition-delay: 0.65s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(17) {transition-delay: 0.7s; -webkit-transition-delay: 0.7s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(18) {transition-delay: 0.75s; -webkit-transition-delay: 0.75s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(19) {transition-delay: 0.8s; -webkit-transition-delay: 0.8s;}
.css3aw-rightbar li.css3aw-social ul li:nth-child(20) {transition-delay: 0.85s; -webkit-transition-delay: 0.85s;}

input#css3aw-social-icon:checked ~ ul li {
	margin-left: -11px;
}

.css3aw-rightbar li.css3aw-social ul li span {
	display: block;
	line-height: 48px;
	margin: 0 auto;
}

li.css3aw-searchbox {
	line-height: 48px;
	opacity: 0.9;
	display: none !important;
}

li.css3aw-searchbox input[type="search"] {
	border: none;
	background: transparent;
	height: 24px;
	margin: 12px auto;
	outline: none;
	width: 55px;
	display: block;
	position: relative;
	margin-left: 29px;
	font-family: 'Open Sans', sans-serif;
	font-size: inherit;
	color: inherit;
	box-shadow: none;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-transition: width .4s ease-in-out;
	-moz-transition: width .4s ease-in-out;
	-o-transition: width .4s ease-in-out;
	-ms-transition: width .4s ease-in-out;
	transition: width .4s ease-in-out;
}

input[type="search"]:focus {
	border: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

@media (min-width: 440px) {li.css3aw-searchbox {display: block !important;}}

@media (min-width: 480px) {
	li.css3aw-searchbox input[type="search"]:focus {
		width: 100px;
	}
}

@media (min-width: 767px) {

	header.css3aw-navigation-container {
		position: fixed;
		z-index: 9999;
		height: 60px;
		width: 100%;
		font-size: 16px;
		margin: 0;
		padding: 0;
		box-shadow: 0 2px 3px 0 rgba(0,0,0,0.24);
	}

	div.css3aw-menu-container {
		height: 60px;
		z-index: 1;
		width: 60px;
		display: block;
		float: left;
		cursor: pointer;
	}

	input[id="css3aw-menu-icon"] + label > span.css3aw-menu-dash {
		display: block;
		height: 4px;
		cursor: pointer;
		margin: 4px auto;
		clear: both;
		width: 30px;
	}

	input[id="css3aw-menu-icon"] + label > span.css3aw-menu-dash:first-child {margin-top: 20px;}

	header.css3aw-navigation-container li a:link, header.css3aw-navigation-container li a:visited {
		text-decoration: none;
		color: #3a3a3a;
	}

	input[type=checkbox] {
		display: none;
	}

	input[type=checkbox] + label {
		width: 60px;
		height: 40px;
		padding: 20px auto;
		cursor: pointer;
		display: block;
	}


	ul.css3aw-sub-menu {
		position: relative;
		width: 0;
		margin-top: -1px;
	}

	ul.css3aw-sub-menu > li {
		position: relative;
		line-height: 60px;
		padding-left: 15px;
		white-space: nowrap;
		overflow: hidden;
		margin-left: -60px;
		width: 60px;
		-webkit-transition: margin-left .25s ease-out, width .25s ease-out;
		-moz-transition: margin-left .25s ease-out, width .25s ease-out;
		-o-transition: margin-left .25s ease-out, width .25s ease-out;
		-ms-transition: margin-left .25s ease-out, width .25s ease-out;
		transition: margin-left .25s ease-out, width .25s ease-out;
	}

	ul.css3aw-sub-menu > li ul {
		margin-left: -15px;
	}

	ul.css3aw-sub-menu > li ul li {
		width: 250px;
		height: 0;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: transparent;
		padding-left: 30px;
		-webkit-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
		-moz-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
		-o-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
		-ms-transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
		transition: height .25s ease-in-out, border-top-color 0.25s ease-in-out;
	}

	label[for="css3aw-menu-icon"]:hover ~ ul > li {
		margin-left: 0px;
	}

	label[for="css3aw-menu-icon"] ~ ul:hover > li {
		margin-left: 0px;
		width: 250px;
	}

	ul.css3aw-sub-menu > li:hover ul li {
		height: 60px;
	}

	input#css3aw-menu-icon:checked ~ ul > li li {
		height: 60px;
	}

	/*        Right Bar Styles       */

	div..css3aw-rightbar {
		padding: 0;
	}

	.css3aw-rightbar ul {
		width: 100%;
	}

	.css3aw-rightbar ul > li {
		line-height: 60px;
		float: left;
		display: block;
		padding: 0 15px;
	}

	.css3aw-rightbar li.css3aw-social {
		width: auto;
		padding: 0 5px 0 20px;
		border: none !important;
	}

	.css3aw-rightbar li.css3aw-social > input,
	.css3aw-rightbar li.css3aw-social > label {
		display: none;
	}

	.css3aw-rightbar li.css3aw-social ul {
		margin-top: 0px;
		width: auto;
		overflow: visible;
	}

	.css3aw-rightbar li.css3aw-social ul li {
		position: static;
		clear: none;
		float: left;
		width: 50px;
		line-height: 60px;
		overflow: hidden;
		margin: 0 auto;
		padding: 0 10px;
	}

	.css3aw-rightbar li.css3aw-social ul li span {
		display: block;
		line-height: 60px;
		margin: 0 auto;
	}

	li.css3aw-searchbox {
		line-height: 60px;
	}

	li.css3aw-searchbox input[type="search"] {
		height: 36px;
		width: 60px;
		margin-left: 40px;
	}

	li.css3aw-searchbox input[type="search"]:focus {
		width: 150px;
	}

	header.css3aw-navigation-container li a:link, header.css3aw-navigation-container li a:visited {
		-webkit-transition: color .25s ease-in-out;
		-moz-transition: color .25s ease-in-out;
		-o-transition: color .25s ease-in-out;
		-ms-transition: color .25s ease-in-out;
		transition: color .25s ease-in-out;
	}

	header.css3aw-navigation-container span.css3aw-menu-dash {
		-webkit-transition: background .25s ease-in-out;
		-moz-transition: background .25s ease-in-out;
		-o-transition: background .25s ease-in-out;
		-ms-transition: background .25s ease-in-out;
		transition: background .25s ease-in-out;
	}

}


/*********************************************************************************************************

			Correction To FontAwesome

*********************************************************************************************************/
.css3aw-navigation-container ul.css3aw-sub-menu span[class^="icon-"] {
	margin-right: 25px;
	margin-left: 7px;
	font-size: 110%;
	opacity: 0.9;
}

span[class^="icon-"] {
	margin-right: 5px;
	margin-left: 5px;
	font-size: 110%;
}

.css3aw-navigation-container .css3aw-rightbar li a span[class^="icon-"] {
	margin-right: 8px;
}

/*********************************************************************************************************

			Themes - Light Theme

*********************************************************************************************************/

.css3aw-navigation-container.light-theme {
	/* fallback */
	background-color: #eee;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #fff, #eee);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #fff, #eee);
	/* IE 10 */
	background: -ms-linear-gradient(top, #fff, #eee);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #fff, #eee);
	border-bottom: 1px solid rgba(0,0,0,0.15);
}

header.css3aw-navigation-container.light-theme li a:link, header.css3aw-navigation-container.light-theme li a:visited {
	text-decoration: none;
	color: #3a3a3a;
}

header.css3aw-navigation-container.light-theme li.css3aw-searchbox {
	background: url('http://www.studiomp4.hol.es/mob/css/search-icon-dark.png') 10px center no-repeat;
	background-size: 24px 24px;
}

header.light-theme span.css3aw-menu-dash {background: #3a3a3a;}

header.light-theme div.css3aw-menu-container {
	border-right: 1px solid rgba(0,0,0,0.15);
}

header.light-theme ul.css3aw-sub-menu > li {
	background: #eee;
	border-top: 1px solid rgba(0,0,0,0.15);
}

header.light-theme .css3aw-rightbar ul li:not(.css3aw-stick-to-right) {
	border-right: 1px solid rgba(0,0,0,0.15) ;
}

header.light-theme .css3aw-rightbar ul li.css3aw-social {
	background: url('http://www.studiomp4.hol.es/mob/css/light.png') left top no-repeat;
}

header.light-theme .css3aw-rightbar ul li.css3aw-stick-to-right {
	border-left: 1px solid rgba(0,0,0,0.15);
	border-right: 0;
	margin-right: 0;
	float: right;
}

header.light-theme .css3aw-rightbar li.css3aw-social ul li {
	background: #eee;
	border-right: 0 !important;
}

header.light-theme .css3aw-rightbar li.css3aw-social ul li {
	border-bottom: 1px solid rgba(0,0,0,0.15);
}

header.light-theme input#css3aw-menu-icon:checked ~ ul > li li {
	border-top-color:  rgba(0,0,0,0.15);
}

header.light-theme ul.css3aw-sub-menu > li:hover ul li {
	border-top-color: rgba(0,0,0,0.15);
}

@media (min-width: 767px) {
	header.light-theme .css3aw-rightbar ul li.css3aw-social {
		background: url('http://www.studiomp4.hol.es/mob/css//light_60.png') left top no-repeat;
	}

	header.css3aw-navigation-container.light-theme li.css3aw-searchbox {
		background: url('http://www.studiomp4.hol.es/mob/css//search-icon-dark.png') 15px center no-repeat;
		background-size: 28px 28px;
	}

	header.light-theme .css3aw-rightbar li.css3aw-social ul li {
		background: transparent;
		border-right: 0 !important;
		border-bottom: 0;
	}
}


header.light-theme li.css3aw-searchbox input[type="search"]::-webkit-input-placeholder { color: rgba(58,58,58,0.8); }
header.light-theme li.css3aw-searchbox input[type="search"]::-moz-placeholder { color: rgba(58,58,58,0.8); } /* firefox 19+ */
header.light-theme li.css3aw-searchbox input[type="search"]:-ms-input-placeholder { color: rgba(58,58,58,0.8); } /* ie */
header.light-theme li.css3aw-searchbox input[type="search"]:-moz-placeholder { color: rgba(58,58,58,0.8); }


/*********************************************************************************************************

			Themes - Dark Theme

*********************************************************************************************************/

.css3aw-navigation-container.dark-theme {
	/* fallback */
	background-color: #222;
	color: #eee;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#222));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #444, #222);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #444, #222);
	/* IE 10 */
	background: -ms-linear-gradient(top, #444, #222);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #444, #222);
	border-bottom: 1px solid rgba(0,0,0,0.65);
}

header.css3aw-navigation-container.dark-theme li a:link, header.css3aw-navigation-container.dark-theme li a:visited {
	text-decoration: none;
	color: #eee;
}

header.dark-theme div.css3aw-menu-container {
	border-right: 1px solid rgba(255,255,255,0.1);
}

header.css3aw-navigation-container.dark-theme li.css3aw-searchbox {
	background: url('http://www.studiomp4.hol.es/mob/css//search-icon-light.png') 10px center no-repeat;
	background-size: 24px 24px;
}

header.dark-theme span.css3aw-menu-dash {background: #eee;}

header.dark-theme ul.css3aw-sub-menu > li {
	background: #222;
	border-top: 1px solid rgba(255,255,255,0.1);
}

header.dark-theme ul.css3aw-sub-menu > li:hover ul li {
	border-top-color: rgba(255,255,255,0.1);
}

header.dark-theme .css3aw-rightbar ul li:not(.css3aw-stick-to-right) {
	border-right: 1px solid rgba(255,255,255,0.1);
}

header.dark-theme .css3aw-rightbar ul li.css3aw-social {
	background: url('http://www.studiomp4.hol.es/mob/css//dark.png') left top no-repeat;
}

header.dark-theme .css3aw-rightbar ul li.css3aw-stick-to-right {
	border-left: 1px solid rgba(255,255,255,0.1);
	border-right: 0;
	margin-right: 0;
	float: right;
}

header.dark-theme .css3aw-rightbar li.css3aw-social ul {margin-top: -1px;}

header.dark-theme .css3aw-rightbar li.css3aw-social ul li {
	background: #222;
	border-right: 0 !important;
}

header.dark-theme .css3aw-rightbar li.css3aw-social ul li {
	border-top: 1px solid rgba(255,255,255,0.1);
}

header.dark-theme input#css3aw-menu-icon:checked ~ ul > li li {
	border-top-color:  rgba(255,255,255,0.1);
}

@media (min-width: 767px) {
	header.dark-theme .css3aw-rightbar ul li.css3aw-social {
		background: url('http://www.studiomp4.hol.es/mob/css/dark_60.png') left top no-repeat;
	}

	header.css3aw-navigation-container.dark-theme li.css3aw-searchbox {
		background: url('http://www.studiomp4.hol.es/mob/css//search-icon-light.png') 15px center no-repeat;
		background-size: 28px 28px;
	}

	header.dark-theme .css3aw-rightbar li.css3aw-social ul li {
		background: transparent;
		border-right: 0 !important;
		border-bottom: 0;
	}
}

header.dark-theme li.css3aw-searchbox input[type="search"]::-webkit-input-placeholder { color: rgba(238,238,238,0.8); }
header.dark-theme li.css3aw-searchbox input[type="search"]::-moz-placeholder { color: rgba(238,238,238,0.8); } /* firefox 19+ */
header.dark-theme li.css3aw-searchbox input[type="search"]:-ms-input-placeholder { color: rgba(238,238,238,0.8); } /* ie */
header.dark-theme li.css3aw-searchbox input[type="search"]:-moz-placeholder { color: rgba(238,238,238,0.8); }



/*********************************************************************************************************

			Hover Colors

*********************************************************************************************************/

header.css3aw-navigation-container .css3aw-sub-menu li:not(.css3aw-searchbox):hover > a,
header.css3aw-navigation-container .css3aw-rightbar li a:hover,
li.css3aw-social > a:hover,
input[id="css3aw-social-icon"]:checked ~ label > span {
	color: #ff620a;		/* Change this value to get your favourite color when hovering :) */
}

input[id="css3aw-menu-icon"] + label:hover > span.css3aw-menu-dash,
input[id="css3aw-menu-icon"]:checked ~ label > span.css3aw-menu-dash {
	background: #ff620a;		/* Change this value to get your favourite color when hovering :) */
}

header.css3aw-navigation-container li > a:active {
	color: #ff620a;		/* Change this value to get your favourite color when hovering :) */
}

@font-face {
	font-family: 'fontawesome';
	src:url('http://www.studiomp4.hol.es/mob/css/fonts/fontawesome.eot');
	src:url('http://www.studiomp4.hol.es/mob/css/fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('http://www.studiomp4.hol.es/mob/css/fonts/fontawesome.woff') format('woff'),
		url('http://www.studiomp4.hol.es/mob/css/fonts/fontawesome.ttf') format('truetype'),
		url('http://www.studiomp4.hol.es/mob/css/fonts/fontawesome.svg#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'fontawesome';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-glass, .icon-music, .icon-search, .icon-envelope, .icon-heart, .icon-star, .icon-star-empty, .icon-user, .icon-film, .icon-th-large, .icon-th, .icon-th-list, .icon-ok, .icon-remove, .icon-zoom-in, .icon-zoom-out, .icon-off, .icon-signal, .icon-cog, .icon-trash, .icon-home, .icon-file, .icon-time, .icon-road, .icon-download-alt, .icon-download, .icon-upload, .icon-inbox, .icon-play-circle, .icon-repeat, .icon-refresh, .icon-list-alt, .icon-lock, .icon-flag, .icon-headphones, .icon-volume-off, .icon-volume-down, .icon-volume-up, .icon-qrcode, .icon-barcode, .icon-tag, .icon-tags, .icon-book, .icon-bookmark, .icon-print, .icon-camera, .icon-font, .icon-bold, .icon-italic, .icon-text-height, .icon-text-width, .icon-align-left, .icon-align-center, .icon-align-right, .icon-align-justify, .icon-list, .icon-indent-left, .icon-indent-right, .icon-facetime-video, .icon-picture, .icon-pencil, .icon-map-marker, .icon-adjust, .icon-tint, .icon-edit, .icon-share, .icon-check, .icon-move, .icon-step-backward, .icon-fast-backward, .icon-backward, .icon-play, .icon-pause, .icon-stop, .icon-forward, .icon-fast-forward, .icon-step-forward, .icon-eject, .icon-chevron-left, .icon-chevron-right, .icon-plus-sign, .icon-minus-sign, .icon-remove-sign, .icon-ok-sign, .icon-question-sign, .icon-info-sign, .icon-screenshot, .icon-remove-circle, .icon-ok-circle, .icon-ban-circle, .icon-arrow-left, .icon-arrow-right, .icon-arrow-up, .icon-arrow-down, .icon-share-alt, .icon-resize-full, .icon-resize-small, .icon-plus, .icon-minus, .icon-asterisk, .icon-exclamation-sign, .icon-gift, .icon-leaf, .icon-fire, .icon-eye-open, .icon-eye-close, .icon-warning-sign, .icon-plane, .icon-calendar, .icon-random, .icon-comment, .icon-magnet, .icon-chevron-up, .icon-chevron-down, .icon-retweet, .icon-shopping-cart, .icon-folder-close, .icon-folder-open, .icon-resize-vertical, .icon-resize-horizontal, .icon-bar-chart, .icon-twitter-sign, .icon-facebook-sign, .icon-camera-retro, .icon-key, .icon-cogs, .icon-comments, .icon-thumbs-up, .icon-thumbs-down, .icon-star-half, .icon-heart-empty, .icon-signout, .icon-linkedin-sign, .icon-pushpin, .icon-external-link, .icon-signin, .icon-trophy, .icon-github-sign, .icon-upload-alt, .icon-lemon, .icon-phone, .icon-check-empty, .icon-bookmark-empty, .icon-phone-sign, .icon-twitter, .icon-facebook, .icon-github, .icon-unlock, .icon-credit, .icon-rss, .icon-hdd, .icon-bullhorn, .icon-bell, .icon-certificate, .icon-hand-right, .icon-hand-left, .icon-hand-up, .icon-hand-down, .icon-circle-arrow-left, .icon-circle-arrow-right, .icon-circle-arrow-up, .icon-circle-arrow-down, .icon-globe, .icon-wrench, .icon-tasks, .icon-filter, .icon-briefcase, .icon-fullscreen, .icon-group, .icon-link, .icon-cloud, .icon-beaker, .icon-cut, .icon-copy, .icon-paper-clip, .icon-save, .icon-sign-blank, .icon-reorder, .icon-list-ul, .icon-list-ol, .icon-strikethrough, .icon-underline, .icon-table, .icon-magic, .icon-truck, .icon-pinterest, .icon-pinterest-sign, .icon-google-plus-sign, .icon-google-plus, .icon-money, .icon-caret-down, .icon-caret-up, .icon-caret-left, .icon-caret-right, .icon-columns, .icon-sort, .icon-sort-down, .icon-sort-up, .icon-envelope-alt, .icon-linkedin, .icon-undo, .icon-legal, .icon-dashboard, .icon-comment-alt, .icon-comments-alt, .icon-bolt, .icon-sitemap, .icon-umbrella, .icon-paste, .icon-lightbulb, .icon-exchange, .icon-cloud-download, .icon-cloud-upload, .icon-user-md, .icon-stethoscope, .icon-suitcase, .icon-bell-alt, .icon-coffee, .icon-food, .icon-file-alt, .icon-building, .icon-hospital, .icon-ambulance, .icon-medkit, .icon-fighter-jet, .icon-beer, .icon-h-sign, .icon-plus-sign-2, .icon-double-angle-left, .icon-double-angle-right, .icon-double-angle-up, .icon-double-angle-down, .icon-angle-left, .icon-angle-right, .icon-angle-up, .icon-angle-down, .icon-desktop, .icon-laptop, .icon-tablet, .icon-mobile, .icon-circle-blank, .icon-quote-left, .icon-quote-right, .icon-spinner, .icon-circle, .icon-reply, .icon-github-alt, .icon-folder-close-alt, .icon-folder-open-alt, .icon-expand-alt, .icon-collapse-alt, .icon-smile, .icon-frown, .icon-meh, .icon-gamepad, .icon-keyboard, .icon-flag-alt, .icon-flag-checkered, .icon-terminal, .icon-code, .icon-reply-all, .icon-star-half-full, .icon-location-arrow, .icon-crop, .icon-code-fork, .icon-unlink, .icon-question, .icon-info, .icon-exclamation, .icon-superscript, .icon-subscript, .icon-eraser, .icon-puzzle, .icon-microphone, .icon-microphone-off, .icon-shield, .icon-calendar-empty, .icon-fire-extinguisher, .icon-rocket, .icon-maxcdn, .icon-chevron-sign-left, .icon-chevron-sign-right, .icon-chevron-sign-up, .icon-chevron-sign-down, .icon-html5, .icon-css3, .icon-anchor, .icon-unlock-alt, .icon-bullseye, .icon-ellipsis-horizontal, .icon-ellipsis-vertical, .icon-rss-sign, .icon-play-sign, .icon-ticket, .icon-minus-sign-alt, .icon-check-minus, .icon-level-up, .icon-level-down, .icon-check-sign, .icon-edit-sign, .icon-external-link-sign, .icon-share-sign, .icon-compass, .icon-collapse, .icon-collapse-top, .icon-expand, .icon-euro, .icon-gbp, .icon-dollar, .icon-rupee, .icon-yen, .icon-renminbi, .icon-won, .icon-bitcoin, .icon-file-2, .icon-file-text, .icon-sort-by-alphabet, .icon-sort-by-alphabet-alt, .icon-sort-by-attributes, .icon-sort-by-attributes-alt, .icon-sort-by-order, .icon-sort-by-order-alt, .icon-thumbs-up-2, .icon-thumbs-down-2, .icon-youtube-sign, .icon-youtube, .icon-xing, .icon-xing-sign, .icon-youtube-play, .icon-dropbox, .icon-stackexchange, .icon-instagram, .icon-flickr, .icon-adn, .icon-bitbucket, .icon-bitbucket-sign, .icon-tumblr, .icon-tumblr-sign, .icon-long-arrow-down, .icon-long-arrow-up, .icon-long-arrow-left, .icon-long-arrow-right, .icon-apple, .icon-windows, .icon-android, .icon-linux, .icon-dribbble, .icon-skype, .icon-foursquare, .icon-trello, .icon-female, .icon-male, .icon-gittip, .icon-sun, .icon-moon, .icon-archive, .icon-bug, .icon-vk, .icon-weibo, .icon-renren {
	font-family: 'fontawesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-glass:before {
	content: "\f000";
}
.icon-music:before {
	content: "\f001";
}
.icon-search:before {
	content: "\f002";
}
.icon-envelope:before {
	content: "\f003";
}
.icon-heart:before {
	content: "\f004";
}
.icon-star:before {
	content: "\f005";
}
.icon-star-empty:before {
	content: "\f006";
}
.icon-user:before {
	content: "\f007";
}
.icon-film:before {
	content: "\f008";
}
.icon-th-large:before {
	content: "\f009";
}
.icon-th:before {
	content: "\f00a";
}
.icon-th-list:before {
	content: "\f00b";
}
.icon-ok:before {
	content: "\f00c";
}
.icon-remove:before {
	content: "\f00d";
}
.icon-zoom-in:before {
	content: "\f00e";
}
.icon-zoom-out:before {
	content: "\f010";
}
.icon-off:before {
	content: "\f011";
}
.icon-signal:before {
	content: "\f012";
}
.icon-cog:before {
	content: "\f013";
}
.icon-trash:before {
	content: "\f014";
}
.icon-home:before {
	content: "\f015";
}
.icon-file:before {
	content: "\f016";
}
.icon-time:before {
	content: "\f017";
}
.icon-road:before {
	content: "\f018";
}
.icon-download-alt:before {
	content: "\f019";
}
.icon-download:before {
	content: "\f01a";
}
.icon-upload:before {
	content: "\f01b";
}
.icon-inbox:before {
	content: "\f01c";
}
.icon-play-circle:before {
	content: "\f01d";
}
.icon-repeat:before {
	content: "\f01e";
}
.icon-refresh:before {
	content: "\f021";
}
.icon-list-alt:before {
	content: "\f022";
}
.icon-lock:before {
	content: "\f023";
}
.icon-flag:before {
	content: "\f024";
}
.icon-headphones:before {
	content: "\f025";
}
.icon-volume-off:before {
	content: "\f026";
}
.icon-volume-down:before {
	content: "\f027";
}
.icon-volume-up:before {
	content: "\f028";
}
.icon-qrcode:before {
	content: "\f029";
}
.icon-barcode:before {
	content: "\f02a";
}
.icon-tag:before {
	content: "\f02b";
}
.icon-tags:before {
	content: "\f02c";
}
.icon-book:before {
	content: "\f02d";
}
.icon-bookmark:before {
	content: "\f02e";
}
.icon-print:before {
	content: "\f02f";
}
.icon-camera:before {
	content: "\f030";
}
.icon-font:before {
	content: "\f031";
}
.icon-bold:before {
	content: "\f032";
}
.icon-italic:before {
	content: "\f033";
}
.icon-text-height:before {
	content: "\f034";
}
.icon-text-width:before {
	content: "\f035";
}
.icon-align-left:before {
	content: "\f036";
}
.icon-align-center:before {
	content: "\f037";
}
.icon-align-right:before {
	content: "\f038";
}
.icon-align-justify:before {
	content: "\f039";
}
.icon-list:before {
	content: "\f03a";
}
.icon-indent-left:before {
	content: "\f03b";
}
.icon-indent-right:before {
	content: "\f03c";
}
.icon-facetime-video:before {
	content: "\f03d";
}
.icon-picture:before {
	content: "\f03e";
}
.icon-pencil:before {
	content: "\f040";
}
.icon-map-marker:before {
	content: "\f041";
}
.icon-adjust:before {
	content: "\f042";
}
.icon-tint:before {
	content: "\f043";
}
.icon-edit:before {
	content: "\f044";
}
.icon-share:before {
	content: "\f045";
}
.icon-check:before {
	content: "\f046";
}
.icon-move:before {
	content: "\f047";
}
.icon-step-backward:before {
	content: "\f048";
}
.icon-fast-backward:before {
	content: "\f049";
}
.icon-backward:before {
	content: "\f04a";
}
.icon-play:before {
	content: "\f04b";
}
.icon-pause:before {
	content: "\f04c";
}
.icon-stop:before {
	content: "\f04d";
}
.icon-forward:before {
	content: "\f04e";
}
.icon-fast-forward:before {
	content: "\f050";
}
.icon-step-forward:before {
	content: "\f051";
}
.icon-eject:before {
	content: "\f052";
}
.icon-chevron-left:before {
	content: "\f053";
}
.icon-chevron-right:before {
	content: "\f054";
}
.icon-plus-sign:before {
	content: "\f055";
}
.icon-minus-sign:before {
	content: "\f056";
}
.icon-remove-sign:before {
	content: "\f057";
}
.icon-ok-sign:before {
	content: "\f058";
}
.icon-question-sign:before {
	content: "\f059";
}
.icon-info-sign:before {
	content: "\f05a";
}
.icon-screenshot:before {
	content: "\f05b";
}
.icon-remove-circle:before {
	content: "\f05c";
}
.icon-ok-circle:before {
	content: "\f05d";
}
.icon-ban-circle:before {
	content: "\f05e";
}
.icon-arrow-left:before {
	content: "\f060";
}
.icon-arrow-right:before {
	content: "\f061";
}
.icon-arrow-up:before {
	content: "\f062";
}
.icon-arrow-down:before {
	content: "\f063";
}
.icon-share-alt:before {
	content: "\f064";
}
.icon-resize-full:before {
	content: "\f065";
}
.icon-resize-small:before {
	content: "\f066";
}
.icon-plus:before {
	content: "\f067";
}
.icon-minus:before {
	content: "\f068";
}
.icon-asterisk:before {
	content: "\f069";
}
.icon-exclamation-sign:before {
	content: "\f06a";
}
.icon-gift:before {
	content: "\f06b";
}
.icon-leaf:before {
	content: "\f06c";
}
.icon-fire:before {
	content: "\f06d";
}
.icon-eye-open:before {
	content: "\f06e";
}
.icon-eye-close:before {
	content: "\f070";
}
.icon-warning-sign:before {
	content: "\f071";
}
.icon-plane:before {
	content: "\f072";
}
.icon-calendar:before {
	content: "\f073";
}
.icon-random:before {
	content: "\f074";
}
.icon-comment:before {
	content: "\f075";
}
.icon-magnet:before {
	content: "\f076";
}
.icon-chevron-up:before {
	content: "\f077";
}
.icon-chevron-down:before {
	content: "\f078";
}
.icon-retweet:before {
	content: "\f079";
}
.icon-shopping-cart:before {
	content: "\f07a";
}
.icon-folder-close:before {
	content: "\f07b";
}
.icon-folder-open:before {
	content: "\f07c";
}
.icon-resize-vertical:before {
	content: "\f07d";
}
.icon-resize-horizontal:before {
	content: "\f07e";
}
.icon-bar-chart:before {
	content: "\f080";
}
.icon-twitter-sign:before {
	content: "\f081";
}
.icon-facebook-sign:before {
	content: "\f082";
}
.icon-camera-retro:before {
	content: "\f083";
}
.icon-key:before {
	content: "\f084";
}
.icon-cogs:before {
	content: "\f085";
}
.icon-comments:before {
	content: "\f086";
}
.icon-thumbs-up:before {
	content: "\f087";
}
.icon-thumbs-down:before {
	content: "\f088";
}
.icon-star-half:before {
	content: "\f089";
}
.icon-heart-empty:before {
	content: "\f08a";
}
.icon-signout:before {
	content: "\f08b";
}
.icon-linkedin-sign:before {
	content: "\f08c";
}
.icon-pushpin:before {
	content: "\f08d";
}
.icon-external-link:before {
	content: "\f08e";
}
.icon-signin:before {
	content: "\f090";
}
.icon-trophy:before {
	content: "\f091";
}
.icon-github-sign:before {
	content: "\f092";
}
.icon-upload-alt:before {
	content: "\f093";
}
.icon-lemon:before {
	content: "\f094";
}
.icon-phone:before {
	content: "\f095";
}
.icon-check-empty:before {
	content: "\f096";
}
.icon-bookmark-empty:before {
	content: "\f097";
}
.icon-phone-sign:before {
	content: "\f098";
}
.icon-twitter:before {
	content: "\f099";
}
.icon-facebook:before {
	content: "\f09a";
}
.icon-github:before {
	content: "\f09b";
}
.icon-unlock:before {
	content: "\f09c";
}
.icon-credit:before {
	content: "\f09d";
}
.icon-rss:before {
	content: "\f09e";
}
.icon-hdd:before {
	content: "\f0a0";
}
.icon-bullhorn:before {
	content: "\f0a1";
}
.icon-bell:before {
	content: "\f0a2";
}
.icon-certificate:before {
	content: "\f0a3";
}
.icon-hand-right:before {
	content: "\f0a4";
}
.icon-hand-left:before {
	content: "\f0a5";
}
.icon-hand-up:before {
	content: "\f0a6";
}
.icon-hand-down:before {
	content: "\f0a7";
}
.icon-circle-arrow-left:before {
	content: "\f0a8";
}
.icon-circle-arrow-right:before {
	content: "\f0a9";
}
.icon-circle-arrow-up:before {
	content: "\f0aa";
}
.icon-circle-arrow-down:before {
	content: "\f0ab";
}
.icon-globe:before {
	content: "\f0ac";
}
.icon-wrench:before {
	content: "\f0ad";
}
.icon-tasks:before {
	content: "\f0ae";
}
.icon-filter:before {
	content: "\f0b0";
}
.icon-briefcase:before {
	content: "\f0b1";
}
.icon-fullscreen:before {
	content: "\f0b2";
}
.icon-group:before {
	content: "\f0c0";
}
.icon-link:before {
	content: "\f0c1";
}
.icon-cloud:before {
	content: "\f0c2";
}
.icon-beaker:before {
	content: "\f0c3";
}
.icon-cut:before {
	content: "\f0c4";
}
.icon-copy:before {
	content: "\f0c5";
}
.icon-paper-clip:before {
	content: "\f0c6";
}
.icon-save:before {
	content: "\f0c7";
}
.icon-sign-blank:before {
	content: "\f0c8";
}
.icon-reorder:before {
	content: "\f0c9";
}
.icon-list-ul:before {
	content: "\f0ca";
}
.icon-list-ol:before {
	content: "\f0cb";
}
.icon-strikethrough:before {
	content: "\f0cc";
}
.icon-underline:before {
	content: "\f0cd";
}
.icon-table:before {
	content: "\f0ce";
}
.icon-magic:before {
	content: "\f0d0";
}
.icon-truck:before {
	content: "\f0d1";
}
.icon-pinterest:before {
	content: "\f0d2";
}
.icon-pinterest-sign:before {
	content: "\f0d3";
}
.icon-google-plus-sign:before {
	content: "\f0d4";
}
.icon-google-plus:before {
	content: "\f0d5";
}
.icon-money:before {
	content: "\f0d6";
}
.icon-caret-down:before {
	content: "\f0d7";
}
.icon-caret-up:before {
	content: "\f0d8";
}
.icon-caret-left:before {
	content: "\f0d9";
}
.icon-caret-right:before {
	content: "\f0da";
}
.icon-columns:before {
	content: "\f0db";
}
.icon-sort:before {
	content: "\f0dc";
}
.icon-sort-down:before {
	content: "\f0dd";
}
.icon-sort-up:before {
	content: "\f0de";
}
.icon-envelope-alt:before {
	content: "\f0e0";
}
.icon-linkedin:before {
	content: "\f0e1";
}
.icon-undo:before {
	content: "\f0e2";
}
.icon-legal:before {
	content: "\f0e3";
}
.icon-dashboard:before {
	content: "\f0e4";
}
.icon-comment-alt:before {
	content: "\f0e5";
}
.icon-comments-alt:before {
	content: "\f0e6";
}
.icon-bolt:before {
	content: "\f0e7";
}
.icon-sitemap:before {
	content: "\f0e8";
}
.icon-umbrella:before {
	content: "\f0e9";
}
.icon-paste:before {
	content: "\f0ea";
}
.icon-lightbulb:before {
	content: "\f0eb";
}
.icon-exchange:before {
	content: "\f0ec";
}
.icon-cloud-download:before {
	content: "\f0ed";
}
.icon-cloud-upload:before {
	content: "\f0ee";
}
.icon-user-md:before {
	content: "\f0f0";
}
.icon-stethoscope:before {
	content: "\f0f1";
}
.icon-suitcase:before {
	content: "\f0f2";
}
.icon-bell-alt:before {
	content: "\f0f3";
}
.icon-coffee:before {
	content: "\f0f4";
}
.icon-food:before {
	content: "\f0f5";
}
.icon-file-alt:before {
	content: "\f0f6";
}
.icon-building:before {
	content: "\f0f7";
}
.icon-hospital:before {
	content: "\f0f8";
}
.icon-ambulance:before {
	content: "\f0f9";
}
.icon-medkit:before {
	content: "\f0fa";
}
.icon-fighter-jet:before {
	content: "\f0fb";
}
.icon-beer:before {
	content: "\f0fc";
}
.icon-h-sign:before {
	content: "\f0fd";
}
.icon-plus-sign-2:before {
	content: "\f0fe";
}
.icon-double-angle-left:before {
	content: "\f100";
}
.icon-double-angle-right:before {
	content: "\f101";
}
.icon-double-angle-up:before {
	content: "\f102";
}
.icon-double-angle-down:before {
	content: "\f103";
}
.icon-angle-left:before {
	content: "\f104";
}
.icon-angle-right:before {
	content: "\f105";
}
.icon-angle-up:before {
	content: "\f106";
}
.icon-angle-down:before {
	content: "\f107";
}
.icon-desktop:before {
	content: "\f108";
}
.icon-laptop:before {
	content: "\f109";
}
.icon-tablet:before {
	content: "\f10a";
}
.icon-mobile:before {
	content: "\f10b";
}
.icon-circle-blank:before {
	content: "\f10c";
}
.icon-quote-left:before {
	content: "\f10d";
}
.icon-quote-right:before {
	content: "\f10e";
}
.icon-spinner:before {
	content: "\f110";
}
.icon-circle:before {
	content: "\f111";
}
.icon-reply:before {
	content: "\f112";
}
.icon-github-alt:before {
	content: "\f113";
}
.icon-folder-close-alt:before {
	content: "\f114";
}
.icon-folder-open-alt:before {
	content: "\f115";
}
.icon-expand-alt:before {
	content: "\f116";
}
.icon-collapse-alt:before {
	content: "\f117";
}
.icon-smile:before {
	content: "\f118";
}
.icon-frown:before {
	content: "\f119";
}
.icon-meh:before {
	content: "\f11a";
}
.icon-gamepad:before {
	content: "\f11b";
}
.icon-keyboard:before {
	content: "\f11c";
}
.icon-flag-alt:before {
	content: "\f11d";
}
.icon-flag-checkered:before {
	content: "\f11e";
}
.icon-terminal:before {
	content: "\f120";
}
.icon-code:before {
	content: "\f121";
}
.icon-reply-all:before {
	content: "\f122";
}
.icon-star-half-full:before {
	content: "\f123";
}
.icon-location-arrow:before {
	content: "\f124";
}
.icon-crop:before {
	content: "\f125";
}
.icon-code-fork:before {
	content: "\f126";
}
.icon-unlink:before {
	content: "\f127";
}
.icon-question:before {
	content: "\f128";
}
.icon-info:before {
	content: "\f129";
}
.icon-exclamation:before {
	content: "\f12a";
}
.icon-superscript:before {
	content: "\f12b";
}
.icon-subscript:before {
	content: "\f12c";
}
.icon-eraser:before {
	content: "\f12d";
}
.icon-puzzle:before {
	content: "\f12e";
}
.icon-microphone:before {
	content: "\f130";
}
.icon-microphone-off:before {
	content: "\f131";
}
.icon-shield:before {
	content: "\f132";
}
.icon-calendar-empty:before {
	content: "\f133";
}
.icon-fire-extinguisher:before {
	content: "\f134";
}
.icon-rocket:before {
	content: "\f135";
}
.icon-maxcdn:before {
	content: "\f136";
}
.icon-chevron-sign-left:before {
	content: "\f137";
}
.icon-chevron-sign-right:before {
	content: "\f138";
}
.icon-chevron-sign-up:before {
	content: "\f139";
}
.icon-chevron-sign-down:before {
	content: "\f13a";
}
.icon-html5:before {
	content: "\f13b";
}
.icon-css3:before {
	content: "\f13c";
}
.icon-anchor:before {
	content: "\f13d";
}
.icon-unlock-alt:before {
	content: "\f13e";
}
.icon-bullseye:before {
	content: "\f140";
}
.icon-ellipsis-horizontal:before {
	content: "\f141";
}
.icon-ellipsis-vertical:before {
	content: "\f142";
}
.icon-rss-sign:before {
	content: "\f143";
}
.icon-play-sign:before {
	content: "\f144";
}
.icon-ticket:before {
	content: "\f145";
}
.icon-minus-sign-alt:before {
	content: "\f146";
}
.icon-check-minus:before {
	content: "\f147";
}
.icon-level-up:before {
	content: "\f148";
}
.icon-level-down:before {
	content: "\f149";
}
.icon-check-sign:before {
	content: "\f14a";
}
.icon-edit-sign:before {
	content: "\f14b";
}
.icon-external-link-sign:before {
	content: "\f14c";
}
.icon-share-sign:before {
	content: "\f14d";
}
.icon-compass:before {
	content: "\f14e";
}
.icon-collapse:before {
	content: "\f150";
}
.icon-collapse-top:before {
	content: "\f151";
}
.icon-expand:before {
	content: "\f152";
}
.icon-euro:before {
	content: "\f153";
}
.icon-gbp:before {
	content: "\f154";
}
.icon-dollar:before {
	content: "\f155";
}
.icon-rupee:before {
	content: "\f156";
}
.icon-yen:before {
	content: "\f157";
}
.icon-renminbi:before {
	content: "\f158";
}
.icon-won:before {
	content: "\f159";
}
.icon-bitcoin:before {
	content: "\f15a";
}
.icon-file-2:before {
	content: "\f15b";
}
.icon-file-text:before {
	content: "\f15c";
}
.icon-sort-by-alphabet:before {
	content: "\f15d";
}
.icon-sort-by-alphabet-alt:before {
	content: "\f15e";
}
.icon-sort-by-attributes:before {
	content: "\f160";
}
.icon-sort-by-attributes-alt:before {
	content: "\f161";
}
.icon-sort-by-order:before {
	content: "\f162";
}
.icon-sort-by-order-alt:before {
	content: "\f163";
}
.icon-thumbs-up-2:before {
	content: "\f164";
}
.icon-thumbs-down-2:before {
	content: "\f165";
}
.icon-youtube-sign:before {
	content: "\f166";
}
.icon-youtube:before {
	content: "\f167";
}
.icon-xing:before {
	content: "\f168";
}
.icon-xing-sign:before {
	content: "\f169";
}
.icon-youtube-play:before {
	content: "\f16a";
}
.icon-dropbox:before {
	content: "\f16b";
}
.icon-stackexchange:before {
	content: "\f16c";
}
.icon-instagram:before {
	content: "\f16d";
}
.icon-flickr:before {
	content: "\f16e";
}
.icon-adn:before {
	content: "\f170";
}
.icon-bitbucket:before {
	content: "\f171";
}
.icon-bitbucket-sign:before {
	content: "\f172";
}
.icon-tumblr:before {
	content: "\f173";
}
.icon-tumblr-sign:before {
	content: "\f174";
}
.icon-long-arrow-down:before {
	content: "\f175";
}
.icon-long-arrow-up:before {
	content: "\f176";
}
.icon-long-arrow-left:before {
	content: "\f177";
}
.icon-long-arrow-right:before {
	content: "\f178";
}
.icon-apple:before {
	content: "\f179";
}
.icon-windows:before {
	content: "\f17a";
}
.icon-android:before {
	content: "\f17b";
}
.icon-linux:before {
	content: "\f17c";
}
.icon-dribbble:before {
	content: "\f17d";
}
.icon-skype:before {
	content: "\f17e";
}
.icon-foursquare:before {
	content: "\f180";
}
.icon-trello:before {
	content: "\f181";
}
.icon-female:before {
	content: "\f182";
}
.icon-male:before {
	content: "\f183";
}
.icon-gittip:before {
	content: "\f184";
}
.icon-sun:before {
	content: "\f185";
}
.icon-moon:before {
	content: "\f186";
}
.icon-archive:before {
	content: "\f187";
}
.icon-bug:before {
	content: "\f188";
}
.icon-vk:before {
	content: "\f189";
}
.icon-weibo:before {
	content: "\f18a";
}
.icon-renren:before {
	content: "\f18b";
}
              
            
!

JS

              
                
              
            
!
999px

Console