details {
border: 1px solid #685389;
    margin: 0 2em .4em 2em;
    padding: 1.04%;
    color: #ec6b0b;
    text-shadow: 4px 1px 6px #060606, 0px 0px 0px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
 
details {
margin: 1em;
cursor: pointer;
}
 
summary {
    cursor: pointer;
    margin: -1%;
    padding: 3px 10px;
    background: -webkit-linear-gradient(top, #1c1b1d 8%, #352f40 50%);
}



.animate2{
  position:relative;
  margin:0 auto;/* устанваливаем блок div по центру страницы*/
  width:480px; /* Ширина */
  height: 360px;  /* Высота */                
}

.animate2 img {
  position:absolute; /* абсолютное позиционирование*/
  left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
  top: 0; /* выравниваем картинки по левому верхнему углу div-а */  
}


.animate2 img.first { /* первая картинка полностью прозрачная */
  opacity:0;
  filter:alpha (opacity=0);
}

.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */
  opacity:1;
  filter:alpha (opacity=100);
}

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */
  opacity:0;
  filter:alpha (opacity=0);
}

.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
  -moz-transition: all 2s ease;
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}






.ih-item.square30 .info {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.square30 {
  position: relative;
  width: 300px;
  height: 180px;
  border: 0px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.ih-item.square30.effect14.colored .info {
  background: #1a4a72;
}
.ih-item.square30.effect14.colored .info h9 {
  background: rgba(12, 34, 52, 0.6);
}
.ih-item.square30.effect14 .img {
  opacity: 1;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square30.effect14 .info {
  background: #333333;
  visibility: hidden;
  opacity: 0;
    width: 300px;
    height: 183px;
    margin-top: -185px;
  pointer-events: none;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 0.35s ease 0.2s;
  -moz-transition: all 0.35s ease 0.2s;
  transition: all 0.35s ease 0.2s;
}
.ih-item.square30.effect14 .info h9 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  margin: 30px 0 0 0;
}
.ih-item.square30.effect14 .info p {
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #bbb;
  padding: 20px 20px 20px;
  text-align: center;
}
.ih-item.square30.effect14 a:hover .img {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}
.ih-item.square30.effect14 a:hover .info {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.ih-item.square30.effect14.left_to_right .img {
  -webkit-transform: translateX(0) rotate(0);
  -moz-transform: translateX(0) rotate(0);
  -ms-transform: translateX(0) rotate(0);
  -o-transform: translateX(0) rotate(0);
  transform: translateX(0) rotate(0);
}
.ih-item.square30.effect14.left_to_right a:hover .img {
  -webkit-transform: translateX(100%) rotate(180deg);
  -moz-transform: translateX(100%) rotate(180deg);
  -ms-transform: translateX(100%) rotate(180deg);
  -o-transform: translateX(100%) rotate(180deg);
  transform: translateX(100%) rotate(180deg);
}

.ih-item.square30.effect14.right_to_left .img {
  -webkit-transform: translateX(0) rotate(0);
  -moz-transform: translateX(0) rotate(0);
  -ms-transform: translateX(0) rotate(0);
  -o-transform: translateX(0) rotate(0);
  transform: translateX(0) rotate(0);
}
.ih-item.square30.effect14.right_to_left a:hover .img {
  -webkit-transform: translateX(-100%) rotate(-180deg);
  -moz-transform: translateX(-100%) rotate(-180deg);
  -ms-transform: translateX(-100%) rotate(-180deg);
  -o-transform: translateX(-100%) rotate(-180deg);
  transform: translateX(-100%) rotate(-180deg);
}

.ih-item.square30.effect14.top_to_bottom .img {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.ih-item.square30.effect14.top_to_bottom a:hover .img {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

.ih-item.square30.effect14.bottom_to_top .img {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.ih-item.square30.effect14.bottom_to_top a:hover .img {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}






.style_prevu_kit
{
     display: inline-block;
    border: 0;
    border-radius: 19px;
    width: 80px;
    height: 80px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);

}
.style_prevu_kit:hover
{
box-shadow: 0px 0px 38px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 600ms ease-in;
    transform: scale(3.0);
}



.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}


<!---84--->
.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 100%;
}

.ih-item.circle {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.ih-item.circle .img {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
  border-radius: 50%;
}
.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.square {
  position: relative;
  width: 100px;
  height: 100px;
  border: 8px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.circle.effect1 .spinner {
  width: 100px;
  height: 100px;
border: 10px solid #fbfbfb24;
    border-right-color: #1413139e;
    border-bottom-color: #ec6a0c;
  border-radius: 50%;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
  position: absolute;
  top: 10px;
  bottom: 0;
  left: 10px;
  right: 0;
  width: auto;
  height: auto;
}
.ih-item.circle.effect1 .img:before {
  display: none;
}
.ih-item.circle.effect1.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect1 .info {
  top: 10px;
  bottom: 0;
  left: 10px;
  right: 0;
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h9 {
    color: #ec6b0b;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 7px;
    top: 4px;
    left: 0px;
    font-family: comfortaa;
    padding: 55px 0 0 0;
    height: 110px;
    text-shadow: 0 0 16px black, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
  color: #bbb;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
    margin-top: 11px;
    margin-left: 16px;
    font-family: people;
    font-size: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
  opacity: 1;
}





.imgholder{
	position:relative;
	width:120px;
	height:120px;
	border-radius:0px;
	float:left;
	margin:40px 30px;
}
/* thumbnails style */
.imgholder img{
	position:absolute;
	left:16px;
	top:1px;
	width:110px;
	height:110px;
	z-index:5;
	opacity:0.9;
	filter: alpha(opacity = 50);
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	box-shadow:0 0 5px #000;
	
	transition: 
		opacity 0.7s ease-out 0.3s;
	-moz-transition: 
		opacity 0.7s ease-out 0.3s;
	-webkit-transition: 
		opacity 0.7s ease-out 0.3s;
}
.imgholder:hover img{
	opacity:1;
	filter: alpha(opacity = 100);
}
.imgholder figcaption{
	position:absolute;
	left:0;
	top:120%;
	width:120px;
	color:#ec6b0b;
	text-shadow:-1px -1px 0 #fff;
	z-index:4;
}
/* decorations style */
.imgholder .circle{
	position:absolute;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
}
.imgholder .outer1{
	top:-7px;
	left:8px;
	width:110px;
	height:110px;
	z-index:2;
	
	border:8px solid;
	border-color:#1a191bf2;
	box-shadow:0 0 3px #b1a5c5;
	-moz-box-shadow:0 0 3px #b1a5c5;
	-webkit-box-shadow:0 0 3px #b1a5c5;
	
	background: #ffffff;
	background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
	background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
	
	transition: 
		box-shadow 1s ease-out,
		border-color 1s;
	-moz-transition: 
		-moz-box-shadow 1s ease-out,
		border-color 1s;
	-webkit-transition: 
		-webkit-box-shadow 1s ease-out,
		border-color 1s;
}
.imgholder:hover .outer1{
	border-color:#0e0d0d;
	box-shadow:0 0 10px #0e0d0d;
}
.imgholder .outer2{
	top:-9px;
	left:6px;
	width:110px;
	height:110px;
	z-index:1;

	
	border:10px solid;
	border-color: #2e2b3126;
	box-shadow:0 0 3px #ec6b0b;
	-moz-box-shadow:0 0 3px #ec6b0b;
	-webkit-box-shadow:0 0 3px #ec6b0b;
	opacity:0;
	filter: alpha(opacity = 0);
		
	transition: 
		opacity 0.7s ease-out 0.3s,
		box-shadow 0.7s ease-out 0.3s;
	-moz-transition: 
		opacity 0.7s ease-out 0.3s,
		-moz-box-shadow 0.7s ease-out 0.3s;
	-webkit-transition: 
		opacity 0.7s ease-out 0.3s,
		-webkit-box-shadow 0.7s ease-out 0.3s;
}

.imgholder:hover .outer2{
	opacity:1;
	filter: alpha(opacity = 100);
	box-shadow:0 0 20px #ec6b0b;
}


/* Скроллбар*/

::-webkit-scrollbar
{
width: 7px;
height: 1px;
}
::-webkit-scrollbar-track-piece
{
background-color: #131314;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 2px;
background-color: #131314;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 2px;
background-color: #131314;
-webkit-border-radius: 5px;
}


scrollbar-3dlight-color: #131314;
scrollbar-arrow-color: #131314;
scrollbar-base-color: #131314;
scrollbar-darkshadow-color: #131314;
scrollbar-face-color: #131314;
scrollbar-highlight-color: #131314;
scrollbar-shadow-color: #131314;
scrollbar-track-color: #131314;



#pun-main #post-form h2, .punbb .main h1 {
/* display: none; */
border-style: none solid solid none;
border-width: 0 0;
text-align: center;
margin-left: -50px;
width: 971px;
height: 47px;
font: small-caps; color: #9b9b9b!important; 
 !important; font: 18px "book antiqua" !important;
text-align: center;
background: url(.) no-repeat 0px -20px;
padding: 60px 0px -0px !important;

}

/*подфорумы */
.mirage  {
        background: url(http://se.uploads.ru/5fqNX.png)  no-repeat center bottom, url(http://sf.uploads.ru/BpxSC.png)  no-repeat center top, url(http://s8.uploads.ru/VFQW0.png) repeat-y top center transparent;
    width: 360px;
    text-align: center;
    margin-left: 0px !important;
    font: small-caps 700 9pt "Arial" !important;
}






a.permalink {
font: small-caps 700 10pt "book antiqua" !important;}


.punbb .post-sig dt {background: url(
http://s8.uploads.ru/MeK6E.png);  height: 5px; width: auto; margin: left; border: none;}
.post-sig dd p {text-align: center;}

html {background: url("http://sa.uploads.ru/MZswU.png") 50% 0% no-repeat #1e121a;
background-attachment: fixed;
}
body {background: url('http://s7.uploads.ru/4ne1C.png') 50% 100% no-repeat, url('http://s5.uploads.ru/LP0Un.png') 50% 0% no-repeat ,url('http://s7.uploads.ru/cOTgn.png') 50% -70% repeat-y transparent;
}

#pun-ulinks, #pun-ulinks .container, #pun-ulinks li, #pun-ulinks li a, #pun-ulinks li a   {font: small-caps; color: #01011f61  !important; text-align: center; font: small-caps 700 9pt "book antiqua" !important; text-shadow: none !important; letter-spacing: 2px;}

#pun-navlinks a  {font: small-caps; color: #927634!important; text-align: center;  position:relative; z-index:2000 !important; !important; font: 16px "book antiqua" !important;}



.punbb table Div.icon {float: left; display: block; width: 80px; margin-bottom: 20px;height: 80px;margin-top: -20px;margin-left: 30px;border-style: none; background-image: url(http://se.uploads.ru/jETr5.png);  background-repeat: no-repeat; position: relative; }
.punbb table div.inew {background: url(http://s3.uploads.ru/bI2Mi.png) no-repeat; position: relative; margin-left: 31px;}
TR.isticky Div.icon {background: url(http://s8.uploads.ru/wuaLQ.png) no-repeat; position: relative; margin-left:1px;MARGIN-BOTTOM: 18PX;}
TR.iclosed Div.icon {background: url(http://sf.uploads.ru/spYuI.png); position: relative; margin-left: 1px;}

#pun-stats ul.container {
background-image: url("");
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: 10px 10px;
background-repeat: no-repeat;
background-size: auto;
padding-left: 70px;
padding-top: 20px;}



#pun-status .container {
margin-top: 30px!important;
font: small-caps; text-align: center;  position:relative; font: 12px "book antiqua" !important;
text-align: center;
}

/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
 .punbb-admin, .punbb a:link, .punbb a,  .punbb a:visited,  #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited
{
  border-bottom: 0px none #000;
  text-decoration: none;
color: #c5c0c0;
    text-shadow: 0px 1px 0px #0202025c, 1px 1px 5px rgba(0, 0, 0, 0.32)!important;
 -webkit-transition: color 1s ease;
    -khtml-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -o-transition: color 1s ease;
    }





  

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
 color: #FF8400; 
font-weight: bold;
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
 color: #fd7300; 
font-weight: bold;
text-shadow: 2px 1px 2px #0000009c, 0px 0px 0px rgba(0, 0, 0, 0.3);

  border-bottom: 0px none #000;
 text-decoration: none;
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #00FF37;
 color: #00FF37; 
font-weight: bold;
 text-shadow: 1px 1px # ;
  }

.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span, #pun-title, #pun-title .container, .punbb .modmenu .container,
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer, .punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3, .punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd, .punbb .info-box, .punbb #pun-main .info-box .legend,
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl, .punbb textarea, .punbb select, .punbb input
 {background-color: transparent;
  color: #101010a6 ; }

.punbb-admin #pun-admain h2 {background-position : center;
  background-color: transparent;
  color: #FCFF00;
font-style: normal;}

.offline li.pa-online strong {
  font-weight: normal }

.punbb .container, .punbb .post-body, .post h3, #pun-title,
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post, #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, .punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body, .punbb .post h3 span, .post-links ul, .post-links, .usertable table, .punbb th, #pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span, #pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend, .punbb .divider, .punbb .formal fieldset .post-box, .punbb .info-box, li.pa-online, .punbb .post-sig dt {
  border-color: transparent; 
  }

.punbb #pun-main .quote-box, .punbb #pun-main .code-box {
background-clip:padding-box;
-moz-background-clip: padding-box;
border-width: 16px 15px;
-moz-border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 repeat;
-webkit-border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 repeat;
-o-border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 repeat;
border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 fill repeat;
    color: #ec6a0cbd;
}

.punbb textarea  {
box-shadow: inset 0px -11px 40px rgba(#000000);
background-clip:padding-box;
-moz-background-clip: padding-box;
border-width: 16px 15px;
-moz-border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 repeat;
-webkit-border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 repeat;
-o-border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 repeat;
border-image: url(http://s7.uploads.ru/hWL91.png) 30 25 25 29 fill repeat;
}

li#navindex {display: none;}
#title-logo-tdr img {width: 1px; height: 1px;}
#pun th {visibility: hidden;}
#pun-main div.catleft, #pun-main div.catright {display: none}
#pun-index .modlist {display: none; }
#pun-announcement.section h2 span {display: none; }
#pun-title .title-logo span {display: none;}
.blockquote, .blockcode, .scrollbox, pre {border:none; }
#pun-announcement {margin-top: 27px !important;}
#viewprofile h2 span, #profilenav h2 span {display: none;}
#navawards a {display: none; font-size: 0px;}
#pun-ulinks li.item7 {font-size: 0px;}
.lastedit {display:none;}
.punbb .main .post-content td{border:none 0 transparent;}
#pun-announcement.section h2 span {display: none; }
#pun-stats h2 span, .category h2 span {visibility:hidden!important;}




<style type="text/css">
/*------------------------------- Меню ------------------------------------*/
#nav {width:200px; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background: transparent url(.) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#D1EEEE; text-decoration:none; font-size:12px; font-weight:normal; padding: 0 0 0 4px; cursor:pointer; background: url(.);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(.) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://sh.uploads.ru/VZqyS.jpg) no-repeat right top;}
 

#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background: url(http://sa.uploads.ru/8EbvT.jpg) no-repeat right top; cursor:pointer;}
 
/* Моделирование списка по умолчанию */
 
#nav li:hover {position:relative; z-index:200; cursor:pointer;}
 
#nav li:hover ul.sub
{left:1px; top:35px; background: #181818; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:245px; font-weight:normal; cursor:pointer;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:242px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none; border:1px solid #181818; cursor:pointer;}
#nav li ul.sub li a.fly
{background:#181818 url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background:#bdbdbd; color:#000; border-color:#fff; cursor:pointer;}
#nav li:hover ul.sub li a.fly:hover
{background:#68838B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#fff; cursor:pointer; left:1px;}
 
 
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:245px; top:-4px; background: #181818; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; z-index:400; height:auto;}
 
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#bdbdbd url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#000; border-color:#fff;}
 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#181818 url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
</style>









.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(12, 12, 12, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
				

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

.view {
   width: 190px;
   height: 190px;
   margin: 10px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 0px 0px 9px #1c1d21;
   -moz-box-shadow: 0px 0px 9px #1c1d21;
   box-shadow: 0px 0px 9px #1c1d21;
   cursor: default;
left: 6px;
top:-16px;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 190px;
   height: 190px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}


/* Базовый контейнер табов */

.Mirage {
    width: 472px;
    height: 444px;
    position: relative;
left: -43px;
    top: -56px;
}

.Mirage > input {
    display: none;
}

.Mirage > div {
    position: absolute;
    box-sizing: border-box;
    top: 23px;
    left: -18px;
    bottom: 0px;
    right: -19px;
    border-radius: 0px;
    padding: 0px 0em;

    z-index: 0;

    transition: all 0.5s ease 0s, z-index 0s 0.5s;
}

.Mirage > div > *:first-child {
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: -29px;
    width: 126px;
    margin-left: 41px;
    height: 23px;

    font-family: georgia;
    font-size: 14px;

 text-shadow: 3px 1px 1px #000000, 0px 0px 0px rgba(0, 0, 0, 0.3);
background-color: #0a0a0a;
    border: solid 1px rgba(96, 77, 127, 0.59);
border-radius: 5px;

    color: #8c8282;
    line-height: 23px;
    cursor: pointer;
    text-align: center;

    transition: all 0.5s ease 0s;
}

.Mirage > div > *:not(:first-child) {
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.Mirage > div:nth-of-type(1) > *:first-child { left: 0px; }
.Mirage > div:nth-of-type(2) > *:first-child { left: 131px; }
.Mirage > div:nth-of-type(3) > *:first-child { left: 263px; }
.Mirage > div:nth-of-type(4) > *:first-child { left: 395px; }

.Mirage > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.Mirage > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.Mirage > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.Mirage > input:nth-of-type(4):checked ~ div:nth-of-type(4) {
    z-index: 10;
    transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}

.Mirage > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.Mirage > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.Mirage > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.Mirage > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child {
    color: #ec6b0b;
    transition: all 0.5s ease 0.5s;
}

.Mirage > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.Mirage > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.Mirage > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.Mirage > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child) {
    opacity: 1;
    transition: all 0.5s ease 0.5s;
}









/* Двухсторонняя картинка с ссылками 3 сообщение */


.image-effect-fall-back {
    width: 626px;
    height: 237px;
    position: relative;
    margin: 0 auto;
    -webkit-perspective: 626px;
    perspective: 626px;
}
 
.image-effect-fall-back .image-layer{
    position: absolute;
    top:0;
    left: 0px;
    height: 237px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: 1;
}
 
.image-effect-fall-back:hover .image-layer{
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    overflow: visible;
}
 
.image-effect-fall-back .image-layer img{
    height: 100%;
}
 
.image-effect-fall-back .image-layer:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
 
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
    transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}
 
.image-effect-fall-back:hover .image-layer:before {
    opacity: 0.3;
}
 
.image-effect-fall-back .share-layer{
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 100%;
    height: 100px;
    opacity: 0;
    z-index: 10;
 
    -webkit-transition: 0.6s;
    transition: 0.6s;
 
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
}
 
.image-effect-fall-back:hover .share-layer {
    opacity: 1;
 
    -webkit-transform: rotateX(0deg) translateY(-70px);
    transform: rotateX(0deg) translateY(-70px);
}
 
/*стили для всех кнопок*/
.share-button{
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    padding: 12px;
    width: 90px;
    border-radius: 2px;
    margin:	25px 10px;
}
 
/*цвет кнопок социальных сетей*/
.share-via-vk {
    background-color:#4C75A3;
}
 
.share-via-facebook {
    background-color:#3b5998;
}
 
.share-via-twitter {
    background-color:#00aced;
}





/* Двухсторонняя картинка 1 сообщение темы */
}

Mirage613{
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #ff0000;
  text-align: center;
  margin: 2rem 0;
}

.wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
    width: 400px;
  margin: 0rem;
  cursor: pointer;
}

.container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-perspective: 1800px;
	        perspective: 1800px;
}

.front,
.back{
  background-size: cover;
	background-position: center;
	-webkit-transition: -webkit-transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: -webkit-transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
	-o-transition: transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	text-align: center;
	min-height: 237px;
	height: auto;
	border-radius: 0px;
	color: #fff;
	font-size: 1.5rem;
min-width: 626px;
}

.back{
  background: #000000;
  background: -webkit-linear-gradient(45deg,  #000000 0%,#2d2d31a6 100%);
  background: -o-linear-gradient(45deg,  #000000 0%,#2d2d31a6 100%);
  background: linear-gradient(45deg,  #000000 0%,#2d2d31a6 100%);
}

.front:after{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #00000030;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 0px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform 1.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}





#left-panel {
  top:12px;
  padding:0;
  margin-left:-224px;
  z-index:1000;
  left: 0px;
position: absolute;
}
.content-L {
      padding: 12px;
    width: 191px;
    height: 360px;
    overflow-y: auto;
    left: 12px;
    margin-top: 10px !important;
    position: absolute;
    font-family: people;
    color: #0aa5f1a3 !important;
    font-size: 12px;
}

.content-L a {
    color: #bcb9bf !important;
}



#pun-viewtopic .post h3 {
    background: transparent url(http://forumfiles.ru/files/0017/d2/ef/69812.png) no-repeat scroll center top;
    width: 1034px !important;
    height: 78px;
    margin-top: -11px;
    margin-bottom: 4px;
    margin-left: -19px;
    padding-top: 14px;
}