/*

HOW TO CREATE A CSS3 DROPDOWN MENU [TUTORIAL]

"How to create a CSS3 Dropdown Menu [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com
http://vladimirkudinov.com

*/

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {	margin: 0;	padding: 0;	border: none;	outline: none;	border: 0px solid red;}

/* Menu */
.menu {width: 840px;	padding-top:12px;	height: 60px;	float:right; margin-right:80px;}

.menu li.gnb_1d						{position: relative;	list-style: none;	width:140px;	float: left;	display: block;	 height: 60px; line-height:60px;	text-align:center;}
.menu li.gnb_1d .gnb_1d_Link		{display:block; width:100%; font-size:16px; color:#121212}




/* Links */

.menu li a {
	display: block;
	padding: 0;
	width:100%;
	border: 0px solid red;
	margin-top: 7px;
	line-height: 40px;
	text-decoration: none;
	font-size: 16px;

	color: #303030;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}


.menu li:hover > a { color: #36762f; }

/* Sub Menu */

.menu ul {
	position: absolute;
	top: 55px;
	left: 0;

	opacity: 0;
	
	background: #2d7026;


	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {height: 39px;	overflow: visible;	padding: 0;}
.menu ul li a {	width: 140px;	padding: 0;	text-align:center;	font-size:13px;	margin: 0;	color:#fff; 	border-bottom:1px solid #44873c}
.menu ul li a:hover { color:#f3b90e; }
.menu ul li:last-child a { border-bottom: none; }



@media screen and (max-width:1240px) {
	

/* Menu */
.menu {width: 660px;	padding-top:12px;	height: 60px;	float:right; margin-right:80px;}

.menu li.gnb_1d						{position: relative;	list-style: none;	width:110px;	float: left;	display: block;	 height: 60px; line-height:60px;	text-align:center;}
.menu li.gnb_1d .gnb_1d_Link		{display:block; width:100%; font-size:16px; color:#121212}

.menu ul li a {	width: 120px;	padding: 0;	text-align:center;	font-size:13px;	margin: 0;	color:#fff; 	border-bottom:1px solid #44873c}
}


@media screen and (max-width:960px) {

.menu			{display:none}


}