/* Start:/bitrix/templates/vilchuk/template_styles.css?167701724210703*/
@charset "utf-8";

/*стандартная очистка тегов*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}

body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a {text-decoration: underline;}
a:hover, a:active {text-decoration: none;}
div.break {clear: both;}
html {overflow-y: scroll;}



/*верстка*/
body { 
color: #fff;
font: 400 1em/1.2em "Comfortaa", cursive;
background: #fff;
}

h1 {
color: #ff8800;
font: 700 1.3em/1.5em "Comfortaa", cursive;
background: #fff;
}

h2 {
color: #ff8800;
font: 700 1em/1.2em "Comfortaa", cursive;
background: #fff;
margin-top: 1.2em;
}

h3 {
color: #ff8800;
font: 700 1em/1.2em "Comfortaa", cursive;
background: #fff;
margin-top: 1.2em;
}

p,
.modern-page-navigation
{
color: #333;
font: 300 0.8em/1.2em Trebuchet MS, sans-serif;
margin-bottom: 1.2em;
}

p a,
.modern-page-navigation a
{
display: inline !important;
color: #ff8800;
font-weight: 700;
}


#bheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 48px;
background: #302a2c url("/im/header-bg.gif")  repeat-x  0 100%;
z-index: 10;
min-width: 300px;
}

#blogo {
height: 100%;
background: url("/im/vilchuk-logo-s.png") no-repeat 20px 50%;
}

#bmenu-mini {
background: url("/im/menu-mini.png") no-repeat 0 0;
width: 20px;
height: 20px;
position: absolute;
display: block;
margin: auto;
top: 0px;
left: auto;
right: 20px;
bottom: 0px;
cursor: pointer;
}

#bmenu-mini a {
display: block;
width: 20px;
height: 20px;
}

#bmenu {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 30;
}

#bmenu-mini:hover  + #bmenu,
#bmenu:hover  {
display: block;
}

#bmenu ul.menu {
list-style: none;
background-color: #e6e6e6;
border-right: 1px solid #afafaf;
border-bottom: 1px solid #8c8c8c;
padding: 5px 10px;
}

#bmenu ul.menu  li {
padding: 5px 10px;
border-top: 1px solid #8b8889;
}

#bmenu ul.menu > li:first-child {
border-top: none;
}

#bmenu ul.menu  li  a {
color: #302a2c;
text-decoration: none;
}

#bmenu ul.menu > li.current,
#bmenu ul.menu > li:hover,
#bmenu ul.menu > li:hover > a,
#bmenu ul.sub-menu > li.current,
#bmenu ul.sub-menu > li:hover,
#bmenu ul.sub-menu > li:hover > a {
color: #ff8800;}

#bmenu ul.sub-menu  {
padding-top: 5px;
}

#bmenu ul.sub-menu li {
padding-left: 10px;
}

.bmenu-mini-close-button a {
display: block;
float: right;
margin: 10px 10px 0 0;
width: 20px;
height: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAK5QTFRFtbW1t7e30NDQ39/ft7e3t7e3t7e3t7e34eHht7e3t7e3tbW1tra2t7e30dHRt7e34+Pj4uLiwcHB0tLStbW139/fsbGxsbGxsrKyvr6+v7+/sbGxsrKys7OzsrKysbGxsrKyx8fHsbGxsbGxsbGxsrKy1dXVrq6ur6+vu7u7vr6+v7+/w8PDxMTExsbGzc3Nzs7O0NDQ0dHR6enp+Pj4+fn5+vr6+/v7/f39/v7+xmwZfAAAACp0Uk5TAAAAAAUGBwgIDA0OEBAQERYeVFp0g7Kzs76+wMHBwsPDw8TFxsjM3t7emMB4AwAAAMdJREFUGNN9kckSgjAMQFMQEQRxwRVFcVeQRqQN/v+PScf10DGHJvNmmqYvYHb7U499wpv1uyb09mm2cN/MXVzSfQ8G59udb60ns7ZY3c4DSLKKiMeBYkGMRFWWQCdCEsRXDmPOSpUYdcBor1ES4abR2NSFxHXbAAPsHZIkPp6ohDsbFGT+HKWU16I+cO6zJ2TOEoUUpRS4rFu/IGuOilKIshg12X+ou657SDeSbnjtN7VCtOpqyfmv5FxJbg1Ph/C7jvB4GrYeoiIpaLkZlw4AAAAASUVORK5CYII=') top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}

.bmenu-mini-close-button a:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}


#bpage {
padding: 48px 5px 50px 5px;
min-width: 208px;
}

.bcontainer {
width: 100%;
margin: 0 auto;
}

.img-item {width: 50%;}
.img-item a {display: block;}
.img-item-inner {margin: 5px;}
.img-item-inner:hover {z-index: 20;}

.img-item img {
vertical-align: top;
width: 100%;
max-width: 300px;
min-width: 100px;
z-index: 1;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
}

.img-item.w25  {width: 25% !important;}
.img-item.w50  {width: 50% !important;}
.img-item.w100  {width: 100% !important;}


.notransform .img-item img {max-width: 100% !important; min-width: 50px !important;}
.notransform .img-item:hover img {transform: none;}
.notransform .img-item-inner {margin: 20px;}


a.img-item-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.5em;
color: #ff8800;
font-weight: 700;
background: url("/im/opacity-90-wt.png");
z-index: 1;
}

.img-item:hover a.img-item-title  {display: none;}


#bfooter {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 3em;
background: url("/im/opacity-90-pixel.png");
border-top: 1px solid  rgba(205, 205, 205, 0.9);
z-index: 10;
}

#bautor {display: none;}

#bphone {
color: #302a2c;
font: 400 .8em/1em 'Comfortaa', cursive;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto auto 15px;
height: 1em;
}

#bphone a {
color: #ff8800;
text-decoration: none;
}



#bsocseti {
display: block;
position: absolute;
height: 30px;
margin: auto;
top: 0;
right: 10px;
left: auto;
bottom: 0;
}

#bsocseti a {
display: block;
width: 30px;
height: 30px;
margin-right: 5px;
float: left;
}

#bsocseti a.ss-mail {background: url("/im/btn-mail.png") no-repeat 0 0;}
#bsocseti a.ss-vk {background: url("/im/btn-vk.png") no-repeat 0 0;}
#bsocseti a.ss-fb {background: url("/im/btn-fb.png") no-repeat 0 0;}
#bsocseti a:hover {opacity: 0.5;}


@media only screen 
and (max-width: 310px)
and (max-device-width: 310px)
{
#bsocseti {display: none;}
}


@media only screen 
and (min-width: 310px) 
and (min-device-width: 310px) 
{
.img-item.w25  {width: 100% !important;}
.img-item.w50  {width: 100% !important;}
}


@media only screen 
and (min-width: 310px) 
and (min-device-width: 310px) 
and (orientation: landscape) 
{
.bcontainer {max-width: 470px;}
.img-item  {width: 33.33%;}

.img-item.w25  {width: 25% !important;}
.img-item.w50  {width: 50% !important;}
}


@media only screen 
and (min-width: 425px) 
and (min-device-width: 425px) 
{
.bcontainer {max-width: 625px;}
.img-item:hover   img {
transform: scale(1.25);
z-index: 3;
-webkit-transition: all 0.2s ease-out 0s, z-index  0s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s, z-index  0s ease-out 0s;
-o-transition: all 0.2s ease-out 0s, z-index  0s ease-out 0s;
transition: all 0.2s ease-out 0s, z-index  0s ease-out 0s;
}
}


@media only screen 
and (min-width: 633px) 
and (min-device-width: 633px) 
{
.bcontainer {max-width: 938px;}
.img-item  {width: 33.33%;}
#bheader {height: 94px;}
#bpage {padding-top: 94px;}

#blogo {
width: 437px;
background: url("/im/vilchuk-logo.png") no-repeat 20px 50%;
}
}

@media only screen 
and (min-width: 480px) 
and (min-device-width: 480px) 
{
#bautor {
color: #302a2c;
font: 400 0.8em/1em 'Comfortaa', cursive;
display: block;
margin: auto;
height: 1em;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: 0;
margin-left: 15px;
}

#bphone {
color: #302a2c;
font: 400 .8em/1em 'Comfortaa', cursive;
display: block;
margin: auto;
position: absolute;
height: 1em;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}

}


@media only screen 
and (min-width: 890px),
only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) 
{
body {font: 400 1.2em/1.4em 'Comfortaa', cursive;}
.bcontainer {max-width: 1250px;}
.img-item  {width: 25%;}

#bmenu-mini {display: none;}
.bmenu-mini-close-button  {display: none;}

#bmenu {
display: block !important;
background-color: transparent;
}

#bmenu ul.menu {
list-style: none;
background-color: transparent ;
border: none;
padding: 0;
}

#bmenu ul.menu  li {
padding: 0;
border: none;
}

#bmenu ul.menu  li  a {color: none;}

#bmenu ul.menu > li.current,
#bmenu ul.menu > li:hover,
#bmenu ul.menu > li:hover > a,
#bmenu ul.sub-menu > li.current,
#bmenu ul.sub-menu > li:hover,
#bmenu ul.sub-menu > li:hover > a
{color: none}

#bmenu ul.sub-menu  {padding: 0;}
#bmenu ul.sub-menu li {padding: 0;}

#bmenu {
display: block;
height: 1.8em;
margin: auto;
position: absolute;
top: 0;
right: 20px;
bottom: 0;
left: auto;
background-color: none;
}

#bmenu ul.menu {list-style: none;}

#bmenu ul.menu > li {
display: inline;
float: left;
position: relative;
padding: 0.2em 0;
}

#bmenu ul.menu > li:after {
content: "/";
color: #fff;
margin: 0 8px;
}

#bmenu ul.menu > li:last-child:after {
content: "";
margin: 0;
}

#bmenu ul.menu > li.current,
#bmenu ul.menu > li:hover,
#bmenu ul.menu > li:hover > a,
#bmenu ul.sub-menu > li:hover > a
{color: #ff8800;}

#bmenu ul.menu > li > a {
color: #fff;
text-decoration: none;
}

#bmenu ul.sub-menu {
display: none;
list-style: none;
background-color: #e6e6e6;
border-right: 1px solid #afafaf;
border-bottom: 1px solid #8c8c8c;
padding: 8px 8px 8px;
position: absolute;
top: 2em;
right: 0;
z-index: 20;
}

#bmenu ul.sub-menu::before {
content: "";
display: block;
border-bottom: 5px solid #e6e6e6;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
top: -5px;
right: 16px;
z-index: 20;
margin-left: -5px;
}

#bmenu ul.sub-menu::after {
content: "";
display: block;
position: absolute;
left: 0;
top: -5px;
z-index: 19;
width: 100%;
height: 5px;
}

#bmenu ul.sub-menu > li {
padding: 4px 8px;
border-top: 1px solid #8b8889;
}

#bmenu ul.sub-menu > li:first-child {
border-top: none;
}

#bmenu ul.sub-menu > li > a {
color: #302a2c;
text-decoration: none;
}

#bmenu ul.menu > li:hover > ul.sub-menu {
display: block;
}

}


@media only screen 
and (min-width: 1025px) 
and (min-device-width: 1025px) 
{
body {font: 400 1.5em/1.8em 'Comfortaa', cursive;}
.bcontainer {max-width: 1563px;}
.img-item  {width: 20%;}
#bmenu {height: 2em;}
}


#bphone .smart_br {display: block;}
#bphone .smart_txt {display: none;}

@media only screen 
and (min-width: 640px) 
and (min-device-width: 640px) {
  #bphone .smart_br {display: none;}
  #bphone .smart_txt {display: inline; margin: 0 1em;}
}

/* End */
/* /bitrix/templates/vilchuk/template_styles.css?167701724210703 */