body.home {
line-height: 1;
/*background-image:url('../images/bochki_sky.jpg');*/
background-attachment: fixed;
min-width:700px;
opacity: 0.9; 
/* margin-left: 200px; накладывается на правый блок*/
}

body.indleft {
	padding-top: 0px;
	justify-content: center;
  	
	}
	
body.indleft p {
	margin:0cm;
	margin-bottom:.0001px;
	text-align:top;
	}

body.indleft ul {	
	list-style-type: none;
	}
	
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   copy-past from http://webimho.ru/topic/3687/
 <style>
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;
}  */
/* HTML5 display-role reset for older browsers */

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

article {
  height : 100%;
  vertical-align: top;
}

video.wrap {
    max-width: 100%;
    height: auto;
}

table {
border-collapse: collapse;
border-spacing: 0;
background:none;
table-layout:fixed;
}

   .brd
   {
 /*   border: 2px double black; /* Параметры границы */
  	padding: 0px; /* Поля вокруг текста */
/*	background: #fc3; /* Цвет фона */
/*  border-collapse:collapse; /*убирать двойные линии*/
  cellspacing:0;
  cellpadding:0;
  width:100%;
   }
   
   table.F4 {
    width: 60%; /* Ширина таблицы */
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
    border-spacing: 1px; /* Расстояние между ячейками */
   }

/*.F4  td, th {
    background: maroon; /* Цвет фона ячеек */
/*    padding: 5px; /* Поля вокруг текста */
/*   }*/

   .btn
   {
		/*border:0px single black;*/
		padding-left:15px;
		padding-right:10px;
		width:100;
		height:27;
		background:#3A3A3A;
	}

a
{text-decoration:none;
color: navy;}

a.whiteref
   {
		font-size:8.5pt;font-weight:bold;font-family:"Verdana","sans-serif";color:blue;vlink:purple; alink:red;
    }

body.home a.whiteref
	{
font-size:10.0pt;font-family:"Verdana","sans-serif";color:white;vlink:purple; alink:red;
   }

a.button7
   {
  
  font-weight: 700;
  color: white;
  text-decoration: none;
  display: inline;
  padding: .6em 1em calc(.6em + 3px);
  /*padding: .6em 1em calc(.6em + 3px);*/
  
  border-radius: 10px;
  /*background: rgb(64,64,64);*/
  box-shadow: 0 -3px rgb(53,53,53) inset;
  transition: 0.2s;
  background-image: url('../images/chain.jpg');
}

a.button7:hover
{ 
/*background: rgb(155, 155, 155); */
background-image: url('../images/smoke.png');
}

a.button7:active
{
  /*background: rgb(33,33,33);
  box-shadow: 0 3px rgb(206,206,206) inset;*/
  background-image: url('../images/smoke.png');
}

a#ButtonActv
{
  /* background: rgb(33,33,33);
  box-shadow: 0 3px rgb(206,206,206) inset; */
  background-image: url('../images/smokeV.png');
}


ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

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


h1
{
	
	color: black;
	
	font-weight: 700;
	text-shadow: 2px 2px 4px gray;
	margin-bottom: 20px;
}

#headerMain {
  width:50%;
  min-width:50%;
  height: 195px;
  margin:0px 20px auto;
  /*z-index:0;*/
  position:relative;
}
 

.mainM {
  display: -webkit-flex; 
-webkit-flex-wrap: wrap;
  /*display: flex;*/
  /*flex-flow: row wrap;*/
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 350px;
  margin: 0 auto;
  margin-bottom: 5px;
  margin-top: 5px;
  border: 0px solid #f5f5f5;
  /*background-color: gray;  #404040; */
}


p.rmenu 
{
	margin:0cm;
	margin-bottom: .0001px;
	text-align: center';
	font-weight: 700;
	font-size:10.0px;
	font-family:"Verdana","sans-serif";}

p.rmenu:hover {
background: linear-gradient(to right, #F6EFD2, #CEAD78);
}


section{
	align:center;
    display:table;
	text-align: justify;
	line-height: 150%;
	margin-bottom: 15px;
	font-family:"Verdana","sans-serif";
    font-size:12px;
}


div.osnova {
  display: inline-block;
  vertical-align: top;
  /*width: 100px;
  height: 100px;
  background: red;
  color: white;*/
}

div.chess {
  display: -webkit-flex; 
-webkit-flex-wrap: wrap;
  /*display: flex;*/
  /*flex-flow: row wrap;*/
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 750px;
  margin: 0 auto;
  margin-bottom: 5px;
  margin-top: 5px;
  border: 0px solid #f5f5f5;
  /*background-color: gray;  #404040; */
}

div.chess < div {
    display: flex;
    justify-content: space-between;
border: 1 px solid #f5f5f5;
}

div.advrt {
	background-color: white;
	font-size: 12.0px;
	font-family: Helvetica,sans-serif;
	color: #A0645E";
}


div#tog > span:hover {
    cursor: pointer;
}

div.popup :not(:last-child) {
	position : absolute;
	z-index: 10;
}

/*div.popup :first-child {
	position : absolute;
	z-index: 10;
}*/

div.popup :last-child {
	position : relative;
	z-index: 9999;
}

.m-fadeOut1 {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s;
}
.m-fadeIn1 {
	display: inline-table;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s;
  /*z-index: 1*/
}

.m-fadeOut2 {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s;
}
.m-fadeIn2 {
	display: inline-table;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s;
  /*z-index: 2;*/
}

.m-fadeOut3 {
  display: inline;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s;
}
.m-fadeIn3 {
	display: inline-table;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s;
}

.m-fadeOut4 {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s;
}
.m-fadeIn4 {
	display: inline-table;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s;
}

.fly_pics {
	display: inline;
	position: relative;
	margin-left: 20 px;
	height: 500 px;
	width: 300 px;
	z-index: 9000;
	background-color: #D3D3D3;
	font-style: Verdana; 
	font-size: medium;
}

.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

#drop_tara {
        margin: 30px 0 50px 0;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 12px;
    }
    
    #drop_tara .wrapper {
        display: inline-block;
        width: 165px;
        margin: 5px 10px 10px 5px;
        height: 20px;
        position: relative;
    }
    
    #drop_tara .parent {
        height: 100%;
        width: 100%;
        display: block;
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        border-radius: 5px;
        background: #F9F9F9;
        border: 1px solid #AAA;
        border-bottom: 1px solid #777;
        color: #282D31;
        font-weight: bold;
        z-index: 2;
        position: relative;
        -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
        -webkit-transition-delay: .8s;
        text-align: center;
    }
    
    #drop_tara .parent:hover,
    #drop_tara .content:hover ~ .parent {
        background: #fff;
        -webkit-transition-delay: 0s, 0s, 0s;
    }
    
    #drop_tara .content:hover ~ .parent {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index: 0;
    }
    
    #drop_tara .content {
        position: absolute;
        top: 0;
        display: block;
        z-index: 1;
        height: 0;
        width: 165px;
        padding-top: 30px;
        -webkit-transition: height .5s ease;
        -webkit-transition-delay: .4s;
        border: 1px solid #777;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.4);
    }
    
    #drop_tara .wrapper:active .content {
        height: 123px;
        z-index: 3;
        -webkit-transition-delay: 0s;
    }
    
    #drop_tara .content:hover {
        height: 123px;
        z-index: 3;
        -webkit-transition-delay: 0s;
    }
    
    
    #drop_tara .content ul {
        background: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    #drop_tara .content ul a {
        text-decoration: none;
    }
    
    #drop_tara .content li:hover {
        background: #eee;
        color: #333;
    }
    
    #drop_tara .content li {
        list-style: none;
        text-align: left;
        color: #888;
        font-size: 11px;
        line-height: 30px;
        height: 30px;
        padding-left: 10px;
        border-top: 1px solid #ccc;
    }
    
    #drop_tara .content li:last-of-type {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
	
	#drop_prom {
        margin: 30px 0 50px 0;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 12px;
    }
    
    #drop_prom .wrapper {
        display: inline-block;
        width: 165px;
        margin: 5px 10px 10px 5px;
        height: 20px;
        position: relative;
    }
    
    #drop_prom .parent {
        height: 100%;
        width: 100%;
        display: block;
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        border-radius: 5px;
        background: #F9F9F9;
        border: 1px solid #AAA;
        border-bottom: 1px solid #777;
        color: #282D31;
        font-weight: bold;
        z-index: 2;
        position: relative;
        -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
        -webkit-transition-delay: .8s;
        text-align: center;
    }
    
    #drop_prom .parent:hover,
    #drop_prom .content:hover ~ .parent {
        background: #fff;
        -webkit-transition-delay: 0s, 0s, 0s;
    }
    
    #drop_prom .content:hover ~ .parent {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index: 0;
    }
    
    #drop_prom .content {
        position: absolute;
        top: 0;
        display: block;
        z-index: 1;
        height: 0;
        width: 165px;
        padding-top: 30px;
        -webkit-transition: height .5s ease;
        -webkit-transition-delay: .4s;
        border: 1px solid #777;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.4);
    }
    
    #drop_prom .wrapper:active .content {
        height: 123px;
        z-index: 3;
        -webkit-transition-delay: 0s;
    }
    
    #drop_prom .content:hover {
        height: 123px;
        z-index: 3;
        -webkit-transition-delay: 0s;
    }
    
    
    #drop_prom .content ul {
        background: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    #drop_prom .content ul a {
        text-decoration: none;
    }
    
    #drop_prom .content li:hover {
        background: #eee;
        color: #333;
    }
    
    #drop_prom .content li {
        list-style: none;
        text-align: left;
        color: #888;
        font-size: 11px;
        line-height: 30px;
        height: 30px;
        padding-left: 10px;
        border-top: 1px solid #ccc;
    }
    
    #drop_prom .content li:last-of-type {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }