.menu {
	background:#000000;
	width:100%;
	z-index:1000;
}
.fixed-header{
	position:fixed;
	top:0;

}
#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: #000000;
    clear: both;
    font-size: 12px;
    padding: 0 0 0 0px;
    position: relative;
    width: 957px;
}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

}
#nav li {
    background: url('../images/menu_line.png') no-repeat scroll right 5px transparent;
    position: relative;
}

#nav li:hover > a,#nav li.active > a {
    color: #f5484e;
}

#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background:none repeat scroll 0 0 #000000;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;
	margin-left:-1px;

    border: none;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
	z-index:9999;
}


#nav li:hover ul.newcls{
	left: 2px;
    top: 53px;
    width: 200px;
	margin-left:-1px;
	 background:rgba(34, 34, 34, 0.25);
    border: none;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
	z-index:9999;
	}

#nav ul li {
    background: #212121;
    width: 100%;
}
#nav ul li a {
    float: none;

}
#nav ul li:hover > a {
    background-color: #121212;
    color: #f5484e;
}


/* animation domination */
block-menu {
	display: block;

}

.block-menu li {
	display: inline-block;
}

.block-menu li a {
	color: #fff;
	display: block;
	text-decoration: none;
	font-smoothing: antialiased;
	text-transform: uppercase;
	overflow: visible;
	line-height: 30px;
	border-left: 3px solid #000;
	padding: 24px 15px 0;
}

/* animation domination */
.three-d {
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;
}
	/* complete the animation! */
	.three-d:hover .three-d-box,
	.three-d:focus .three-d-box {
		transform: translateZ(-25px) rotateX(90deg);
	}

.three-d-box {
	transition: all .3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/*
	put the "front" and "back" elements into place with CSS transforms,
	specifically translation and translatez
*/
.front {
	background:#000;
	transform: rotatex(0deg) translatez(25px);
}

.back {
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;
}

.front, .back {
	text-align:center;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	 background-color: #000;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;
}
.active  .front, .active .back {
   	color:  #f5484e;
}
.back {
	 color: #f5484e;
	  background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
/* onhover styles */

.block-menu li:hover > a,.block-menu li.active > a {

    border-left: 3px solid #a92632;
        color: #a92632;

}
#nav li .subs li a{
	padding: 15px !important;
}
ul.social-network a {
        font-size: 12px;
color:#fff;
    text-decoration: none;
}

/***************************Search*************************************/

@import url(https://fonts.googleapis.com/css?family=Cabin:400);


.webdesigntuts-workshop form {

	font-size: 0px;
	margin: auto 0;
	position: relative;

}

.webdesigntuts-workshop input {
border: 1px solid #a92632;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 2px 0 #000;
    display: block;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    height: 25px;
    margin: 0;
    padding: 0 10px;
    text-shadow: none;
    width: 75%;
    margin-top: 14px;
    /* margin-bottom: 30px; */
}

.ie .webdesigntuts-workshop input {
	line-height: 40px;
}
.padding-top {
   padding-top: 13px;
    padding-bottom: 13px;
    
}
.webdesigntuts-workshop input::-webkit-input-placeholder {
   color: #888;
}

.webdesigntuts-workshop input:-moz-placeholder {
   color: #888;
}

.webdesigntuts-workshop input:focus {
	animation: glow 800ms ease-out infinite alternate;

	border-color: #a92632;
	box-shadow: 0 0 5px rgba(0,180,255,.2), inset 0 0 5px rgba(0,180,255,.1), 0 2px 0 #000;

	outline: none;
}

.webdesigntuts-workshop input:focus::-webkit-input-placeholder {

}

.webdesigntuts-workshop input:focus:-moz-placeholder {

}

.webdesigntuts-workshop button {
	background: #222;
    background: linear-gradient(#333, #222);
    box-sizing: border-box;
    border: 1px solid #a92632;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 0 #000;
    color: #fff;
    display: block;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width: 25%;
    margin-top: 14px;
    /* margin-bottom: 30px; */
}

.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
	background: #292929;
	background: linear-gradient(#393939, #292929);
	color: #a92632;
	outline: none;
}

.webdesigntuts-workshop button:active {
	background: #292929;
	background: linear-gradient(#393939, #292929);
	box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
	top: 1px;
}

@keyframes glow {
    0% {
		border-color: #a92632;
		box-shadow: 0 0 5px rgba(0,180,255,.2), inset 0 0 5px rgba(0,180,255,.1), 0 2px 0 #000;
    }
    100% {
		border-color: #ccedfc;
		box-shadow: 0 0 20px rgba(204, 237, 252,.6), inset 0 0 10px rgba(204, 237, 252,.4), 0 2px 0 #000;
    }
}