@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);



#wrapper2 {

   width: 1000px;

	margin: 5px auto;

}



/* BEGIN: ????? ????? */

.menu,

.sub-menu {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



.menu li {

  background-color: #3E454D;

  cursor: pointer;

  position: relative;

  transition: background-color .5s;

  -moz-transition: background-color .5s;

  -o-transition: background-color .5s;

  -webkit-transition: background-color .5s;

  /* IE lt 10, Chrome lt 1, Opera lt 11.6, Safari lt 3, FF lt 4, Android lt 2.1 ? iOS lt 2.0 ?? ???????????? transition. */

}



.menu li:hover {

  background-color: #353B41 !important; /* .menu > li.home ????? ????? ?????? ??????????. ???????. */

}



.menu a {

  color: #FFF;

  display: block;

  font-family: 'Open Sans', sans-serif;

  font-size: 14px;

  height: 100%;

  margin: 0 5px;

  overflow: hidden;

  position: relative;

  text-align: center;

  text-decoration: none;

  text-transform: uppercase;

  word-wrap: break-word;

}



.menu a:hover {

  /* ?????? ?? ???????? a:hover. */

  color: #FFF;

}

/* END: ????? ????? */



/* BEGIN: ??????? ???? */

.menu {

  /* ????????????? ?????? ?????? ???????? ???? ?????? ??????. */

  height: 50px;

 /** width:1000px;*/

  margin: 0px auto;

}



.menu > li {

  float: left;

  height: 100%;

  width: 15%; /* ??????? ??????? ?? ???????????? calc. */

  width: calc((100% - 90px) / 5);

  width: -moz-calc((100% - 90px) / 5);

  width: -webkit-calc((100% - 90px) / 5);    width: 16.66%;

  /* IE lt 9, Chrome lt 19, Opera lt 15, Safari lt 6, FF lt 4, Android ? iOS ?? ???????????? calc. */

}



.menu > li.home {

  background: #6E9934 url(http://s26.postimg.org/qbf4q4j9h/home.png) center no-repeat;

  width: 90px;

}



.menu > li.current {

  background-color: #F7901E !important; /* !important VS .menu li:hover */

  box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;

  /* IE lt 9, Chrome lt 1, Opera lt 10.5, Safari lt 3, FF lt 3.5, Android lt 2.1 ? iOS lt 2.0 ?? ???????????? box-shadow. */

}



.menu > li:not(:first-child) {

  box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;

  -moz-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;

  -webkit-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;

}



.menu > li.home > a {

  color: transparent !important;

}



.menu > li > a > span {

  left: 0; /* ???????? .menu a ??????????? ?????????? ?? ??????, ??-?? ???? span ?????????? ?? ??????. ??????????. */

  position: absolute;

  right: 0;

  top: 50%;

  transform: translate(0, -50%);

  -ms-transform: translate(0, -50%);

  -moz-transform: translate(0, -50%);

  -o-transform: translate(0, -50%);

  -webkit-transform: translate(0, -50%);

  /* IE lt 9, Chrome lt 5, Opera lt 10.5, Safari lt 3.1, FF lt 3.5, Android lt 2.1 ? iOS lt 2.0 ?? ???????????? transform. */

}

/* END: ??????? ???? */



/* BEGIN: ??????? */

.sub-menu {

  max-height: 0;

  min-width: 100%;

  overflow: hidden;

  position: absolute;

  top: 100%;

  transition: max-height .5s .2s;

  -moz-transition: max-height .5s .2s;

  -o-transition: max-height .5s .2s;

  -webkit-transition: max-height .5s .2s;

}



li:hover > .sub-menu {

  max-height: 600px;

}



.sub-menu li {

  height: 60px;

}



.sub-menu a {

  line-height: 60px;

  transition: color .5s;

  -moz-transition: color .5s;

  -o-transition: color .5s;

  -webkit-transition: color .5s;

  white-space: nowrap;

}



.sub-menu li.current a,

.sub-menu a:hover {

  color: #7CA348 !important; /* !important VS .menu a:hover */

}

/* END: ??????? */