/*

  #171717
  #000

 ,   #171717


    #c3c3c3
    #999
    #7f7f7f

     : ffcd31
  efefef

  e94200 

    ,    #f00


*/



body {
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #171717;
margin: 10px;
padding: 0 0 0 0;
font-size: small;
}

.adbanner img { max-width: 100%; height: auto; }

a:link {
color: #171717; 
	text-decoration: underline;
}
a:visited {
	color: #666;
}
a:hover, a:active {
	text-decoration: none;
}

a.smenu {
	font-weight: bold;
}

div.lcon a {
	color: #000;
}


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

#top_table { margin: 0 }
#top_logo { margin: 0 10px; }

table.top_user_login_wrap td.login_left_side { 
	zwidth: 254px; 
	zwidth: 231px;
	background: #ffcd31 url(/themes/dirt2008/img/login/form_left_bg.png) no-repeat; 
}

table.top_user_login_wrap td.login_right_side { 
	zwidth: 254px; 
	zwidth: 231px;
	padding: 7px 15px 7px 0; 
	background: #ffcd31 url(/themes/dirt2008/img/login/form_right_bg.png) no-repeat right top; 
}


table.top_user_login_wrap form {
	font-size: 85%; 
	margin: 0; padding: 0;
	text-align: left;
}

table.top_user_login_wrap form input.login_text_input {
	margin: 0; padding: 0;
	width: 120px; height: 15px;
	font-size: 10px; 
	color: #999;
	border: 1px solid;
	border-color: #000 #b2b2b2 #b2b2b2 #000;
}


table.top_user_login_wrap div {
		margin: 1px 0;
}
table.top_user_login_wrap div input, table.top_user_login_wrap div label {
		vertical-align: middle;
}
table.top_user_login_wrap div.login_bottom_text {
	text-align: center;
	margin-top: 3px;
}

div.login_bottom_text a.left_key, div.login_bottom_text a.left_alert {
	padding-left: 15px;
	min-height: 10px;
} 

div.login_bottom_text a.left_key {
	background: url(/themes/dirt2008/img/login/key.gif) no-repeat left center; 
	margin-right: 1em;
}
div.login_bottom_text a.left_alert {
	background: url(/themes/dirt2008/img/login/alert.gif) no-repeat left center;
	color: #eb5300; 
}

p.user_logged_in {
	font-size: 85%; 
	margin: 0; padding: 0;
	text-align: left;
	line-height: 160%;
}



#top_adv { 
	width: 468px; 
	color: #fff;  
	background: #fff; 
}
#top_header_line { 
	background: #171717;
	padding: 3px 10px; 
	margin: 10px 0;
}
	#top_header_line h1 {
		color: #c3c3c3;
		text-transform : uppercase;
		margin: 0; padding: 0;
		font-weight: normal;
		font-size: 85%; 
		width: 940px;
	}


/***     ***/


div.lcon ul.menu, div.lcon ul.submenu {
	list-style: none;
	font-size: 115%;
}

div.lcon ul.menu {
	margin: 0;
	padding: 0 0 10px;
}
div.lcon ul.menu li {
	margin: 1px 0;
	padding: 2px 10px;
	zoom: 1;
}

div.lcon ul.menu a {	color: #000; }

div.lcon ul.menu li.video { margin-right: 60px; background: #f00 url(/themes/dirt2008/img/main_menu_video.gif) no-repeat right center;  }
div.lcon ul.menu li.video a { color: #fff;  }

/*    */
div.lcon ul.menu li.active_item { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
div.lcon ul.menu li.active_item a { text-decoration: none; }
	
/*    body */
body.page_main div.lcon ul.menu li.main { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_news div.lcon ul.menu li.news { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_snews div.lcon ul.menu li.snews { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_place div.lcon ul.menu li.place { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_contest div.lcon ul.menu li.contest { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_market div.lcon ul.menu li.market { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_article div.lcon ul.menu li.article { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_term div.lcon ul.menu li.term { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_faq div.lcon ul.menu li.faq { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_photo div.lcon ul.menu li.photo { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_video div.lcon ul.menu li.video { margin-right: 0; background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }
body.page_link div.lcon ul.menu li.link { background: url(/themes/dirt2008/img/main_menu_arr.gif) no-repeat right center;  }

body.page_main div.lcon ul.menu li.main a, 
body.page_news div.lcon ul.menu li.news a, 
body.page_snews div.lcon ul.menu li.snews a, 
body.page_place div.lcon ul.menu li.place a, 
body.page_contest div.lcon ul.menu li.contest a, 
body.page_market div.lcon ul.menu li.market a, 
body.page_article div.lcon ul.menu li.article a, 
body.page_term div.lcon ul.menu li.term a, 
body.page_faq div.lcon ul.menu li.faq a, 
body.page_photo div.lcon ul.menu li.photo a,
body.page_video div.lcon ul.menu li.video a, 
body.page_link div.lcon ul.menu li.link a {
	text-decoration: none;
	color: #000;
}


div.lcon ul.submenu {
	margin: 0;
	padding: 10px 0 0 10px;
	border-top: 1px dashed #171717;
}
div.lcon ul.submenu li {
	margin: 0;	padding: 2px 0;
}
div.lcon ul.submenu a {
	color: #7f7f7f;
}

/***     ***/

div.top_news h3 {
	background: #ffcd31 url(/themes/dirt2008/img/header_light_bg.png) no-repeat left center;
	min-height: 28px; line-height: 26px;
	font-size: 100%; text-transform: uppercase; text-indent: 0; font-weight: normal; text-align: left;
	white-space: nowrap;
	color: #171717;
	padding: 0 0 0 30px;
	margin: 0 0 10px;
}
div.top_news dl {
	padding: 0;	margin: 10px 0;

}
div.top_news dl dt {
	padding: 0 0 0 25px; margin: 0 0 .3em;
	background: url(/themes/dirt2008/img/lightning.gif) no-repeat 2px 3px;
	min-height: 18px;
	zoom: 1;
}

div.top_news dl dt a {
	font-size: 115%;
}
div.top_news dl dt em {
	color: #999;
	font-size: 75%;
	padding: 2px;
	background: #ededed;
	font-style: normal;
}
div.top_news dl dd {
	font-size: 90%;
	padding: 0 0 0 25px;
	margin: .3em 0 1.5em;
}
div.top_news dl dt a:link, div.top_news dl dd a:link {
	color: #e94200;
}

/***    ***/

#vid_main_page_wrap {
	width: 530px; height: 450px;
	padding: 0;
	position: relative;
	background: #171717 url(/themes/dirt2008/img/vid/main_page_bg.jpg) no-repeat; 
}

#vid_main_page_wrap #small_video {
	position: absolute;
	left: 25px; top: 40px;
	width: 235px;
}

#vid_main_page_wrap #all_vid_href {
	position: absolute;
	left: 390px; top: 420px;
	width: 124px; height: 26px;
	color: #fff;
}
#vid_main_page_wrap #all_vid_href a {
	position: absolute;
	left: 0; top: 0;
	width: 124px; height: 26px;
	overflow: hidden;
	background: url(/themes/dirt2008/img/vid/main_page_bg.jpg) no-repeat -142px -264px; 
}
#vid_main_page_wrap #all_vid_href a b {
	display: none;
}

/*** .    ***/

#news_last_messages h3.base {
	background: #ffcd31 url(/themes/dirt2008/img/header_light_bg.png) no-repeat left center;
	min-height: 28px; line-height: 26px;
	font-size: 100%; text-transform: uppercase; text-indent: 0; font-weight: normal; text-align: left;
	white-space: nowrap;
	color: #171717;
	padding: 0 0 0 30px;
	margin: 20px 0 10px;
}

#news_last_messages td {
	padding: 4px 2px;
}

#news_last_messages td b {
	color: #999;
	font-weight: normal;
}
#news_last_messages div.more_info {	margin: 10px 0; }
#news_last_messages div.more_info a { color: #e94200; }


/***     ***/

div.lcon div.soon_block p, div.lcon div.soon_block h5 {
	margin: .7em 0;
}

div.lcon div.soon_block p b {
	display: block; width: 8em;
	background: #dbdbdb;
	font-weight: normal;
	padding: 1px 3px; margin-left: -3px;
}

div.lcon div.soon_block p a {
	display: block;
	color: #e94200; 
}



/***  ? ??   ***/

div.lcon div.vid_block img {
	border: none;
	display: block;
	padding: 3px 3px 10px;
	background: #171717 url("/images/vid/vid_bg.gif") no-repeat;
}
div.lcon div.vid_block p, div.lcon div.vid_block h5 { margin: .5em 0; }
div.lcon div.vid_block p.vid_name a {	color: #e94200; }


/***  ?    ***/

div.lcon div.photo_block img {
	border: none;
	padding: 3px 14px 4px 3px;
	background: #171717 url(/themes/dirt2008/img/photo_block_img_bg.png) repeat-y right top;
}
div.lcon div.photo_block p, div.lcon div.photo_block h5 { margin: .5em 0; }
div.lcon div.photo_block p.photo_name a {	color: #e94200; }


/***  v?   ***/

div.lcon div.poll_block p.poll_title {
	padding: 2px 5px;
	background: #dbdbdb;
}

div.lcon div.poll_block table {
	margin-left: 15px;
}

div.lcon div.poll_block table span {
	background: #e0e0e0;
	padding: 1px;
	margin: 0 .3em 0 0;
}

div.lcon div.poll_block input.button {
	margin: 10px 0 0;
}

div.lcon div.poll_block p.poll_result {
	margin: 15px 0 0;
	padding: 8px 0 0;
	border-top: 1px dashed #171717;
	font-size: 85%;
}
div.lcon div.poll_block p.poll_result a { color: #e94200; }



/***   ?   ***/

.yandexDirectSide  {
	margin: 2em 0 1em;
	font-size: 85%;
	display: none; /*   javascript */
}








/*** .     ***/

#forum_last_messages h3.base {
	background: #171717 url(/themes/dirt2008/img/header_dark_bg.png) no-repeat left center;
	min-height: 28px; line-height: 26px;
	font-size: 100%; text-transform: uppercase; text-indent: 0; font-weight: normal; text-align: left;
	white-space: nowrap;
	color: #ffcd31;
	padding: 0 0 0 30px;
	margin: 20px 0 5px;
}

#forum_last_messages table.forumline	{
	background-color: #FFF;
	border: none;
}

#forum_last_messages td	{
	border-bottom: #dbdbdb solid 1px;
}

#forum_last_messages td.row1	{ 
	background: #fff url(/themes/dirt2008/img/forum_last_mess.gif) no-repeat left center;
	padding-left: 25px;
}
#forum_last_messages td.row1 img	{ display: none; }
#forum_last_messages  .topictitle	{ font-weight: normal;  color : #171717; }
#forum_last_messages a.topictitle:link   { text-decoration: underline; color : #171717; }
#forum_last_messages a.topictitle:visited { text-decoration: underline; color : #666; }
#forum_last_messages a.topictitle:hover	{ text-decoration: none; color : #171717; }

#forum_last_messages td.row2	{ background: none; }
#forum_last_messages td.row3	{ background: none; color: #999; font-size: 85%;}
#forum_last_messages td.row3 .postdetails	{	color: #999; }
#forum_last_messages .postdetails {	color: inherit; }

#forum_last_messages td.row3Right {
	background: none; 
	border: none;
	border-bottom: #dbdbdb solid 1px;
	font-size: 85%;
}

#forum_last_messages div.more_info a { color: #e94200; }


/***   ***/

#bottom_menu_wrap {
	margin: 50px 0 20px;
	padding: 5px 5px 5px 195px;
	background: #efefef url(/themes/dirt2008/img/gray_bg.gif);
	overflow: hidden;
	zoom: 1;
}

#bottom_menu, #bottom_submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#bottom_menu {
	float: left;
	width: 59%;
}

#bottom_submenu {
	float: right;
	width: 39%;
	text-align: right;
}

#bottom_menu li {
	display: inline;
	margin: 0 .5em 0 0;
}

#bottom_submenu li {
	display: inline;
	margin: 0 .3em;
}

#bottom_submenu a {
	color: #7f7f7f;
}

/***    ***/

#bottom_dark_line {
	margin: 20px 0 15px;
	height: 8px;
	background: #171717;
	font-size: 1px;
}


/***    , ,  ***/

#bottom_copyright {
	margin: 15px 0 0;
	padding: 0 400px 0 0;
	position: relative;
	zoom: 1;
}

#counters {
	position: absolute;
	width: 400px;
	top: 50%; right: 0;
	margin-top: -16px;
	text-align: right;
}

#bottom_copyright p {
	font-size: 8pt;
	margin: 0; padding: 0;
}




/****   *****/

.center {
	text-align: center;
}

.floatR { float: right; }

.date_gray {
	background: #dbdbdb;
	padding: 2px;
}
.cWhite {
	color: #fff;
}
.cWhite a {
	color: #fff;
}
img.thin_border {
	border: 1px solid #171717;
}
img.thick_border {
	border: 3px solid #171717;
}

img.inTextLeft {
	float: left;
	border: 1px solid #171717;
	padding: 0;
	margin: 3px 9px 3px 0;
}

img.inTextRight {
	float: right;
	border: 1px solid #171717;
	padding: 0;
	margin: 3px 0 3px 9px;
}











/* pager */

p.pager {
	margin: 1em 0; padding: 0;
	text-align: left;
}
p.pager span {
	background: #efefef url(/themes/dirt2008/img/gray_bg.gif);
}
p.pager b {
	padding: 0 3px;
	background: #fa7700 url(/themes/dirt2008/img/pager_now_bg.gif);
	font-weight: normal;	color: #fff;
}

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


h2.base_gray, h2.base_yellow, h2.base_dark {
	font-size: 100%; text-align: left;
	color: #171717;
	padding: 0;
	margin: 0 0 10px;
	zoom: 1;
}

h2.base_gray { background: #95a4b2 url(/themes/dirt2008/img/h_gray_bg.png) no-repeat left bottom; }
h2.base_yellow { background: #ffcd31 url(/themes/dirt2008/img/h_yellow_bg.png) no-repeat left bottom; }
h2.base_dark { color: #ffcd31; background: #171717 url(/themes/dirt2008/img/h_dark_bg.png) no-repeat left bottom; }

h2.base_gray b, h2.base_yellow b, h2.base_dark b {
	display: block;
	padding: 0 0 0 30px;
	min-height: 28px; line-height: 26px;
	text-transform: uppercase; font-weight: normal; 
}
h2.base_gray b { font-weight: bold; background: url(/themes/dirt2008/img/h_gray_left.png) no-repeat left center; }
h2.base_yellow b { background: url(/themes/dirt2008/img/h_yellow_left.png) no-repeat left center; }
h2.base_dark b { background: url(/themes/dirt2008/img/h_dark_left.png) no-repeat left center; }



/****    *****/

div.news_news_block {
	margin: 1em 0 2.5em;
}
div.news_news_block h3 {
	margin: 0 0 .7em;
	color: #f00;
}
div.news_news_block h4 {
	margin: 0 0 .7em;
}
div.news_news_block h6 {
	color: #7f7f7f;
	margin: .7em 0;
}
div.news_news_block h6 a {
	color: #7f7f7f;
}
div.news_news_block h6 em {
	color: #171717;
	font-style: normal;
	margin-right: 1em;
}
div.news_news_block p {
	margin: 1em 0;
}

div.news_news_block p.image_wrap {
	text-align: left;	
}

img {
 max-width: 345px;
 height: auto;
 width: auto\9; /*  ie8 */
}


#img {
max-width:100%;
}


/*    -   */

div.news_news_block h5 { 
	font-size: 85%;
	font-weight: normal;
	margin: 3em 0 0;
}
div.news_news_block h5 span { 
	padding: 3px 5px;
	margin-right: 1em;
	background: #efefef url(/themes/dirt2008/img/gray_bg.gif);
}
div.news_news_block h5 span a { 
	padding: 5px 0 5px 25px;
}
div.news_news_block h5 span.comment_read a { 
	background: url(/themes/dirt2008/img/news_comment_read.gif) no-repeat left center;
}
div.news_news_block h5 span.comment_add a { 
	background: url(/themes/dirt2008/img/news_comment_add.gif) no-repeat left center;
}

div.news_news_block dl {
	margin: 1em 0;
	padding: 0;
	overflow: hidden;
}

div.news_news_block dl dt {
	float: left;
	margin: 0; padding: 0;
border: 0px solid;
}
div.news_news_block dl dt img {
	border: none;
}

div.news_news_block dl dd {
	padding: 0 0 0 205px;
	margin: 0;
	
}

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



.title {
	font-weight: bold;
	margin-left: 15px;
}
.rdate {
	color: #990000;
}


.gdate { /* ?? */
	color: Silver;
}


form {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
input.silver {
border: 1px solid silver;
}
.pn-title {
font-weight: bold;
}
.pn-content-page-title {
font-weight: bold;
}





h3.new_block, div.block {
	background: #171717 url(/themes/dirt2008/img/header_dark_bg.png) no-repeat left center;
	min-height: 28px; line-height: 26px;
	font-size: 100%; text-transform: uppercase; text-indent: 0; font-weight: normal; text-align: left;
	white-space: nowrap;
	color: #ffcd31;
	padding: 0 0 0 30px;
	margin: 0;

}

div.lcon {
	padding: 10px;
	margin: 0 0 10px;
	text-align: left;
	background: #efefef url(/themes/dirt2008/img/gray_bg.gif);
	zoom: 1;
}

div.lcon p, div.lcon h5, div.lcon h4 {
	margin: .5em 0;
}
div.ccon {
	padding: 10px;
	text-align: center;
}
div.cblock {

}







h1.base {
	color: #c3c3c3;
	text-transform : uppercase;
	margin: 3px 0 3px 10px;
	font-weight: normal;
	width: 950px;
}





h2.base {
	color: #FFFFFF;
	text-transform : uppercase;
	display : inline;
	margin-right: 10px;
	font-weight: normal;
}
h3.base {
	font-weight: bold;
	margin: 1em 0;
}

h3, h4 {

	margin: 1em 0;
	font-size: 115%;

}

h5 {
	margin: 1em 0;
	font-size: 100%;

}

h6 {
	margin: 1em 0;
	font-size: 85%;

}

td.grey {
	background: #EFEFEF;
}
td.hline { background : #171717; }






td.sh_up {
	background: url(https://www.dirt.ru/themes/Dirtru2/img/sh_up.gif);
}


img.inews {
	margin-right: 5px;
	padding: 2px 2px 2px 2px;
	border: 1px solid Silver;
}

/* forum css */
hr	{ height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}
.bodyline	{ background-color: #FFFFFF; border: 0px #98AAB1 solid; }
.forumline	{ background-color: #FFFFFF; border: 2px #006699 solid; }
td.row1	{ background-color: #EFEFEF; }
td.row2	{ background-color: #DEE3E7; }
td.row3	{ background-color: #D1D7DC; }
td.rowpic {
		background-color: #FFFFFF;
		background-repeat: repeat-y;
}
th	{
	color: #FFA34F; font-weight : bold;
	background-color: #006699; height: 25px;
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
			background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}
td.cat,td.catHead,td.catBottom {
	height: 29px;
	border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
	font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
	background-color: #D1D7DC; border: #FFFFFF; border-style: solid;
}
th.thHead,td.catHead { border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop	 { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }
.maintitle	{
	font-weight: bold;
        font-size: 120%; 
	text-decoration: none; line-height : 120%; color : #000000;
}
.gen {  }
.genmed {   }
.gensmall { font-size: 85%; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: #DD6900; text-decoration: underline; }
.mainmenu		{ color : #000000 }
a.mainmenu		{ text-decoration: none; color : #006699;  }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }
.cattitle		{ font-weight: bold; letter-spacing: 1px; color : #006699}
a.cattitle		{ text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }
.forumlink		{ font-weight: bold;  color : #006699; }
a.forumlink 	{ text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }
.nav			{ font-weight: bold;  color : #000000;}
a.nav			{ text-decoration: none; color : #006699; }
a.nav:hover		{ text-decoration: underline; }
.topictitle,h2	{ font-weight: bold;  color : #000000; }
h1 { font-weight: bold;  display: inline; }
h3 {
	font-weight: bold;
	color : #000000;
	margin-bottom: 0px;
	margin-top: 2px;
}
a.topictitle:link   { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover	{ text-decoration: underline; color : #DD6900; }
.name			{ color : #000000;}
.postdetails		{  color : #000000; }
.postbody { line-height: 160%}
a.postlink:link	{ text-decoration: none; color : #006699 }
a.postlink:visited {  text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}
.code {
	font-family: Courier, 'Courier New', sans-serif;  color: #006600;
	background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
.quote {
	 color: #444444; line-height: 125%;
	background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}


/*    */

input.post, textarea.post, select {
	background: #FFFFFF;
	border: 1px solid silver; 
}
input.button {
	background: #171717;
	color : #fff;
	border: 1px solid black; 
}
input.mainoption {
	background-color : #FAFAFA;
	font-weight : bold;
}
input.liteoption {
	background-color : #FAFAFA;
	font-weight : normal;
}
.helpline { background-color: #DEE3E7; border-style: none; }

input, textarea, select {
zborder: 1px solid silver; 
}

input { text-indent : 2px; }



.postbody { line-height: 18px}

/*   */
#menu__toggle {
  opacity: 0;
}

/*   */
.menu__btn {
  display: flex; /*  flex    */
  align-items: center;  /*    */
  position: fixed;
  top: 20px;
  left: 20px;  width: 26px;
  height: 26px;  cursor: pointer;
  z-index: 2;
}
/*  "" */
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;  width: 100%;
  height: 2px;  background-color: #616161;
  z-index: 2;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

/*   */
.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;  width: 300px;
  height: 100%;  margin: 0;
  padding: 80px 0;  list-style: none;
  text-align: center;  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  z-index: 1;
}

/*   */
.menu__item {
  display: block;
  padding: 12px 24px;  color: #333;  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;  text-decoration: none;
}
.menu__item:hover {
  background-color: #CFD8DC;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  transition-duration: .25s;
}.menu__box {
  transition-duration: .25s;
}.menu__item {
  transition-duration: .25s;
}
