@media (max-width: 600px) { html {  font-size: 16px;  } }
@media (min-width: 600px) and (max-width: 1200px) { html { font-size: 18px; } }
@media (min-width: 1200px) { html { font-size: 20px;  } }

h2 {font-size: 1.4rem; color: black; font-family: serif, helvetica; text-align: center;}
strong { font-size: 1.1rem;}
strong.uprazd {color: red ; font-size: 1.1rem;}
h3 {font-size: 1.3rem; }
h4 {font-size: 1.25rem;  text-align: left}
h5.club {font-family: arial; font-style: italic}

P {font-size: 1rem; text-align: justify; text-indent: 1em;  margin-right: 25px}
p.citata {font-size: 1rem; text-align: justify; font-style:italic; margin-right: 25px}
p.gorod {font-size: 1rem; text-align: left; text-indent: 0em}
ul.flagname {font-size: 1rem; text-align: justify;}
table {  font-size: 1rem; width: 98%; text-indent: 0em; padding-left: 12px; }

table.alphabet p {font-size: 1.1rem; text-indent: 0em}

dir.citata {font-size: 1rem; text-align: justify; font-style:italic}

#thanks {font-size: 1rem; font-style: italic; text-align: right;}
#litera {color: #ff0000; font-size: 1.7rem; text-align: left; font-weight: bold; } 
#copyright {font-size: 0.7rem; text-indent: 0em; margin-left: 15px}
#more {font-size: 1rem; text-indent: 0em; text-align: left; font-family: helvetica, serif;}

#lists {font-size: 1.2rem; text-align: left; text-indent: 0em}
#comments {font-size: 1rem; text-align: justify; font-style:italic; text-indent: 3em; margin-left:55}
IMG.first {float: left;   margin-left: 0;}
span.maly {font-size: 1.05rem;}
span.malyred {font-size: 1.05rem; color: red;}


A:link { color: navy }          
A:visited { color: #800080 }    
A:active { color: green }      

A.domoj:link {color: blue; font-family: arial; font-weight: bold; font-size: 0.7rem;}
A.domoj:visited {color: #800080; font-family: arial; font-weight: bold; font-size: 0.7rem;}
A.domoj:active {color: green; font-family: arial; font-weight: bold; font-size: 0.7rem;}

ul.native {font-family: arial; font-weight: bold; text-align: left; list-style: disk; font-size: 1.02rem; }
li.idem {color: gray}
ul.russ {font-family: arial; text-align: left; list-style: circle }

li {border-bottom: dotted 1px; border-color: gray }

body {background: #eaeaea}






/**
 * настройка хедера на всех страницах
 */

.nadmenu {
width: 100%;
	
background: #A9A9A9;
 border: 1px solid #eaeaea; }  
.menu {
	width: 100%;
 display: table;
   margin-left: auto;  margin-right: auto; }   
@media screen and (min-width: 1200px) {  .menu {
 width: 80%;
   }   }
@media screen and (min-width: 2400px) {   .menu {
	width: 50%;
    }  }
.menu ul {
 display: table-row;
             }

.menu li {
 display: table-cell;
	background: #A9A9A9; 
border-top: none;
border-bottom: none;
border-right: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
font-family: verdana, Helvetica, arial, sans-serif;
font-size: 0.7rem
}

.menu li:not(:last-child) {border-right: none; }
.menu ul li:hover, .menu a:hover {
	background: #666;
}

.menu li a {
	display: block;
	padding: 8px 50px;
	color: #fff;
	text-align: center;
}




/**
 * настройка переключающейся боковой панели
 */

.nav {
    /*  задаем ширину панели */
    width: 120px;
    min-width: 320px;
    /* фиксируем и выставляем высоту панели  Раньше было 100% т.е. максимум */
    height: 100%-100px;
    position: fixed;
    /* это расстояние от верха  ранее оно было 0 */
    top: 100px;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно правого края страницы */
    right: -320px;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    /* определяем цвет фона панели */
    background: #A9A9A9;
    /* поверх других элементов */
    z-index: 2000;
}


/**
 * Кнопка переключения панели
 * тег <label>
 */

.navigator {
    /* абсолютно позиционируем */
    position: absolute;
    /* относительно правого края панели */
    right: 320px;
    /* отступ от верхнего края панели */
    top: 1em;
    /* внутренние отступы */
    padding: 0.5em;
    /* этот бэкграунд относится только к значку гамбургера и мини кнопке  */
    background: #808080;
    /* здесь имеется в виду цвет текста касательно только значка гамбургер и крестика закрытия */
    color: #dadada;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта крестика и гамбургера */
    font-size: 1.2em;
    line-height: 1;
    /* всегда поверх других элементов страницы */
    z-index: 2001;
    /* анимируем цвет текста при наведении */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}


/* определяем текст кнопки 
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/

.navigator:after {
    content: '\2630';
    text-decoration: none;
}


/* цвет текста значка гамбургер и крестика закрытия при наведении */

.navigator:hover {
    color: #f4f4f4;
}



[id='navigator'] {
    position: absolute;
    display: none;
}


/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/

[id='navigator']:checked ~ .nav > .navigator {
    left: auto;
    right: 2px;
    top: 1em;
}


/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */

[id='navigator']:checked ~ .nav {
    right: 0;
    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
}


/* 
 * смещение контента страницы
 * на размер ширины панели,
*/

[id='navigator']:checked ~ main > article {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    transform: translateX(-320px);
}


/*
 * здесь задаем значок КРЕСТИК его кодом
*/

[id='navigator']:checked ~ .nav > .navigator:after {
    content: '\2715';
}


/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */

body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}


/**
 * для малых экранов смартфонов
 */

@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    .nav {
      width: 100%;
      box-shadow: none
    }
}



/*плавное появление заголовка (логотипа) при раскрытии панели */

[id='navigator']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


/**
 * формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
 */

.nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/**
 * здесь КОЛОР имеется в виду текста в меню БЕЗ ссылок     
 */

.nav > ul > li {
    line-height: 1.4;
    color: #f4f4f4;
    font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='navigator']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/* определяем интервалы появления пунктов меню */

.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}


/**
 * оформление ссылок пунктов меню  Цвет - это цвет НЕНАЖАТЫХ ссылок
 */

.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 0.9em;
    color: #dadada;
    width: 100%;
    text-decoration: none;
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}


/**
 * состояние ссылок меню при наведении  ЦВЕТ здесь это цвет ссылки при наведении мышки
 */

.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 15px;
}


/**
 * линия подчеркивания ссылок меню
 */

.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #3bc1a0;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}


/**
 * анимируем линию подчеркивания 
 * ссылок при наведении  БЭКГРАУНД это цвет линии которай при наведении мыши уезжает вправо и становится прозрачной
 */

.nav > ul > li > a:hover:before {
    width: 0%;
    background: #3bc1a0;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

.nav > ul > li > a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}



/**
 * попытка сделать динамическими
 * рисунки в хедере
 */

.probas { height: 80px}
@media screen and (max-width: 376px)
   {.probas { height: 26px} }
@media screen and (min-width: 377px) and (max-width: 456px)
   {.probas { height: 35px} }
@media screen and (min-width: 457px) and (max-width: 769px)
    { .probas { height:60px} }
@media screen and (min-width: 770px) and (max-width: 1100px)
    { .probas { height:70px} }