body {
	background: #C5AB33 url(/images/other/img02.jpg) no-repeat;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #541919;
	overflow-x: hidden;
}

a {color: #003366;font-weight: bolder;}
a:visited {color: #663366;}
a:active {color: #0000ff;font-weight: bolder;}

.display_none {
display: none;
}

#header	{
    margin: 0;
	clear:both;
	text-align:right;
	color: #B43939;
	font-size: 1.2em;
	font-weight: normal;
	font-style: italic;
    margin-bottom: 1em;
}
#header a {color: #FFFFFF;font-size: 2em;margin: 0;}
#header p {margin: 0;}


#body {
    display:flex;
    flex-direction:row;
    max-width: 100%;
}

#sidebar2 {/*Справа для социальных сетей*/
    order: 3;
    /*overflow:hidden; */
    overflow:auto; 
    border-bottom: 4px solid #D1BC5C;
    width:250px; 
    flex:  0 0 250px;
    /*height: 900px;*/
    /*display:none;*/
}

#sidebar {
    order: 1;
    /*overflow:hidden; */
    overflow:auto; 
    border-bottom: 4px solid #D1BC5C;
    width:300px; 
    flex:  0 0 300px;
    /*height: 900px;*/
}
#sidebar ul {margin:0;padding:0; font-size: 120%;list-style-type: none;}
#sidebar ul ul {padding-left: 20px;font-size: 100%;}
#sidebar a {display: block;padding: 7px;border-top: 1px solid #D1BC5C;font-weight: bold;}
#sidebar ul ul a {padding: 5px;}
#sidebar a:hover, #menu .active a 
{background: #C29434;text-decoration: none;color: #FFFFFF;}
#sidebar .none a {text-decoration: none;color: #6F6F6F;}


.content {
    /*width: 100%;*/
    max-width: 100%;
    order: 2;
    display:flex;
    flex-wrap:wrap;
    overflow:auto; 
    align-items: flex-start;
    /*flex-direction: column;*/
    background-position: 50% 50%;
    background-repeat: no-repeat;  
    background-size: 100%;
}
.content h1{
	margin: 0;
}


.special_text{/*Некоторые тексты лучше читаются на выделенном фоне*/
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	margin: 5px;
    Overflow: auto;
}
.special_text p{
	margin: 0.5em;
}

.single_text{/*Стандартный фон для текстов*/
	width:100%;
	/*background-color: rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	margin: 5px;
    Overflow: auto;*/
}

#footer {
	clear:both;
	border-top: 1px solid #D1BC5C;
	background: #C29434;
	padding: 10px 20px 10px 20px;
	overflow:hidden 
}





/*img.attachment-thumbnail 
	{float: left; margin: 5px; padding: 5px; border: 1px solid #999;}*/



.small_shrubs {
	display: block;
	padding: 5px;
	border: 1px solid #D1BC5C;
	margin: 5px;
	margin-bottom: 20px;
}

.small_vine_title {
	display: block;
	padding: 5px;
	border: 1px solid #D1BC5C;
	float: left;
	width: 100%;
	/*height:270px;*/
	margin: 5px;
	margin-bottom: 20px;
	text-align:center;
}
.small_vine_title h2{
	margin: 0px;
}
.small_vine_title img{
	align-self:center;
}


.small_vine {
	display: block;
	padding: 5px;
	border: 1px solid #D1BC5C;
	float: left;
	width: 210px;
	/*height:270px;*/
	margin: 4px;
	margin-bottom: 20px;
	text-shadow: white 0 0 2px;
	background-color: rgba(255, 255, 255, 0.5); 
	border-radius: 5px;
}
.small_vine img {
	/*width: 70px;
	height:70px;*/
	/*border-radius: 8px;*/
	border-radius: 12px 4px 12px 4px;
	float: left;
	margin: 5px;
}
.small_vine h2 {
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	color: #541919;
	font-weight: 700;
	text-indent: 0;
	margin: 0;
	line-height: 1.2em;
}
.small_vine p {
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.1em;
	color: #191919;
	font-weight: 500;
	text-indent: 0;
	line-height: 1.4em;
	margin: 0
}
.small_vine a:hover, .small_vine .active a {
	background: #C29434;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: none;
}
.small_vine p:hover{
	background: #C29434;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: none;
}



.big_vine {
    max-width: 99%;
	font-size: 1.2em;
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #541919;
}
.big_vine h1 {
	line-height: 1.8em;
	font-size: 1.2em;
	color: #541919;
	font-weight: 700;
	text-indent: 0;
	margin: 1px;
	text-align: center;
}
.big_vine h2 {
	line-height: 1.8em;
	font-size: 1em;
	color: #541919;
	font-weight: 600;
	text-indent: 0;
	margin-left: 2em;
}
.big_vine p {
	line-height: 1.8em;
	color: #541919;
	font-weight: 500;
	text-indent: 0;
}
.big_vine img {
	margin: 5px; 
	padding: 5px; 
	border: 2px solid #999; 
	border-radius: 8px; 
	float: left;
	max-width: 96%;
    max-width: -moz-calc(100% - 30px);
    max-width: calc(100% - 30px);
	height: auto;
    width: 30%;
    width: calc(33% - 24px);
    cursor:pointer;

}
.big_vine img:focus{
    width:auto;
	float: none;
}



.buhlo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.buhlo img{
	margin: 5px; 
	padding: 5px; 
	border: none;
	border-radius: 8px;
    width: auto;
    cursor: default;
}
.buhlo_item {
    flex-direction: column;
    flex-basis: 30%;
    flex-grow: 1;
	border: 1px solid #D1BC5C;
	margin: 4px;
	margin-bottom: 20px;
	background-color: rgba(255, 255, 255, 0.5); 
	border-radius: 5px;
	font-size: 0.8em;
}



.small_blog {
	display: block;
	padding: 5px;
	border: 1px solid #D1BC5C;
	float: left;
	width: 100%;
	/*width: 442px;*/
	/*height:270px;*/
	margin: 4px;
	margin-bottom: 20px;
	text-shadow: white 0 0 2px;
	background-color: rgba(255, 255, 255, 0.5); 
	border-radius: 5px;
}
.small_blog img {
	width: 200px;
	height:200px;
	/*border-radius: 8px;*/
	border-radius: 12px 4px 12px 4px;
	float: left;
	margin: 5px;
}
.small_blog h2 {
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	color: #541919;
	font-weight: 700;
	text-indent: 0;
	margin: 0;
	line-height: 1.2em;
}
.small_blog p {
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.1em;
	color: #191919;
	font-weight: 500;
	text-indent: 0;
	line-height: 1.4em;
	margin: 0
}
.small_blog a:hover, .small_vine .active a {
	background: #C29434;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: none;
}
.small_blog p:hover{
	background: #C29434;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: none;
}



.climat {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.climat h3{
    font-weight: normal;
    font-style: italic;
    font-size: 1em;
}
.climat_big_image {
    flex-direction: column;
	border: 1px solid #D1BC5C;
	margin: 4px;
	margin-bottom: 4px;
	background-color: rgba(255, 255, 255, 0.5); 
	border-radius: 5px;
	/*font-size: 0.8em;*/
}
.climat_big_image img{
	/*margin: 5px; 
	padding: 5px; 
	border: none;
	border-radius: 8px;*/
    /*width: auto;*/
    /*cursor: default;*/
}
.climat_prew_image {
    flex-direction: column;
    flex-basis: 30%;
    flex-grow: 1;
	border: 1px solid #D1BC5C;
	margin: 4px;
	margin-bottom: 4px;
	background-color: rgba(255, 255, 255, 0.5); 
	border-radius: 5px;
	font-size: 0.8em;
}
.climat_prew_image img{
	/*margin: 5px; 
	padding: 5px; 
	border: none;
	border-radius: 8px;*/
    width: auto;
    cursor:pointer;
}




#copyr {
	float: left;
	margin: 5px;
	clear: both;
}
#copyr2 {
	float: left;
	width: auto;
	height: auto;
	margin: 5px 15px 5px 15px;
	text-align:center;
}
#copyr2 p {
	font: 1em Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	font-weight: bolder;
	text-shadow: white 0 0 2px;
}
#copyr3 {
	float: right;
	margin: 2px;
	width: 320px;
}


.contents{ list-style-type:none; counter-reset:list; }
/* цвет чисел */
.contents li:before{ color:#555; }
/* уровень 0 */
.contents li.top{ counter-increment:list; counter-reset:list1; }
.contents li.top:before{ content:counter(list) '. '; }
/* уровень 1 */
.contents li.sub_1{ counter-increment:list1; counter-reset:list2; }
.contents li.sub_1:before{ content:counter(list) '.' counter(list1) '. '; }
/* уровень 2 */
.contents li.sub_2{ counter-increment:list2; }
.contents li.sub_2:before{ content:counter(list) '.' counter(list1) '.' counter(list2) '. '; }




/**
 * Переключаемая боковая панель навигации
 * выдвигающаяся по клику слева
 */
 
.nav {
    display:none;
    /*  ширна произвольная, не стесняйтесь экспериментировать */
    width: 300px;
    /*min-width: 320px;*/
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно левого края страницы */
    left: -300px;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: left 0.1s;
    -moz-transition: left 0.1s;
    transition: left 0.1s;
    /* определяем цвет фона панели */
    background: #dc8c28;
    /* поверх других элементов */
    z-index: 2000;
}
 
/**
 * Кнопка переключения панели
 * тег <label>
 */
 
.nav-toggle {
    /* абсолютно позиционируем */
    position: absolute;
    /* относительно левого края панели */
    left: 300px;
    /* отступ от верхнего края панели */
    top: 0;
    /* внутренние отступы */
    padding: 0.2em;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: inherit;
    /* цвет текста */
    color: #dadada;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    font-size: 1.8em;
    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)
*/
 
.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
}
 
/* цвет текста при наведении */
 
.nav-toggle:hover {
    color: #f4f4f4;
}
 
/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */
 
[id='nav-toggle'] {
    position: absolute;
    display: none;
}
 
/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/
 
[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 1em;
}
 
/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */
 
[id='nav-toggle']:checked ~ .nav {
    left: 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='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(320px);
    -moz-transform: translateX(320px);
    transform: translateX(320px);
}*/
 
/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X), 
 * вы можете испльзовать любой другой значок
*/
 
[id='nav-toggle']:checked ~ .nav > .nav-toggle: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;
    }
}
 

 
/**
 * Формируем стиль заголовка (логотип) панели 
*/
 
/*.nav h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}
 
.nav h2 a {
    color: #dadada;
    text-decoration: none;
    text-transform: uppercase;
}*/
 
 
/*плавное появление заголовка (логотипа) при раскрытии панели */
 
/*[id='nav-toggle']: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.5em;
    margin: 0.8em;
    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;
}
.nav > ul > li > ul > li {
    line-height: 1.5em;
    margin: 0.3em;
}
 
[id='nav-toggle']: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: 1.4em;
    /*color: #dadada;*/
    color: #ffffff;
    width: 100%;
    text-decoration: none;
    text-shadow: 1px 1px 1px #0f0f0f;
    /* плавный переход */
    -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 > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    /*font-family: 'Open Sans', sans-serif;*/
    font-weight: 500;
    font-size: 1.2em;
    /*color: #dadada;*/
    color: #f0f0f0;
    width: 100%;
    text-decoration: none;
    text-shadow: 1px 1px 0.5px #0f0f0f;
    /* плавный переход */
    -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: #c0c0c0;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}
 
/**
 * анимируем линию подчеркивания 
 * ссылок при наведении
 */
 
.nav > ul > li > a:hover:before {
    width: 0%;
    background: #c0c0c0;
    -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;
}
 
/* фон затемнения на основной контент 
 * при этом элементы блокируютя
 * спорная такая фича, если оно вам надо
 * просто раскомментируйте
*/
 
/*
.mask-content {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
}
 
[id='nav-toggle']:checked ~ .mask-content {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s, visibility .5s;
    transition: opacity .5s, visibility .5s;
}
*/

@media (max-width: 1200px) {
    #sidebar2 {display:none;}
}

@media (max-width: 1000px) {
    .buhlo_item {flex-basis: 40%;flex-grow: 1;}
}

@media (max-width: 500px) {
    .buhlo_item {flex-basis: 100%;flex-grow: 1;}
}

@media (max-width:800px){
    #header {margin-left: 50px;}
    #footer {margin-left: 50px;}
	#sidebar {
	    display: none;/*решил скрыть меню на смартфонах*/
	    margin-left: 50px;
		width:90%;
        flex: 0 0 90%;
	}
	#sidebar2 {
	    margin-left: 50px;
		width:90%;
        flex: 0 0 90%;
	}
    #sidebar ul {font-size: 140%;}
    #sidebar ul ul {font-size: 90%;}
	#body{flex-direction:column-reverse;}
	.nav {display: block;}
    .content {margin-left: 50px;}
}

@media  (max-width: 799px) {
    .nav {
      margin: 0;
      /*width: 90%;*/
      box-shadow: none;
      padding: 0;
    }
    #header {margin-left: 0;}
    #footer {margin-left: 0;}
	#sidebar {margin-left: 0;}
 	#sidebar2 {margin-left: 0;}
    .content {margin-left: 0;}
}

@media  (max-width: 500px) {
    .small_vine {width: 100%;}
}

#social_group {
    width: 100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
#social_group h2{
    margin: 0;
    text-align: center;
}

#av_groups_ {order: 1;}/*ARS-VINE*/
#as_groups_ {order: 2;}/*ARS-GARDEN*/
#ig_groups_ {order: 3;}/*Инстаграм*/
#ok_group_widget_ {order: 4;}/*Одноклассники*/
#vk_groups_ {order: 5;}/*Вконтакте*/
#eh_groups_{order: 6;}/*EH-SAD-VINOGRAD*/
#blog_groups_ {order: 7;}/*Блог на ARS-VINE*/
#mm_groups_ {order: 8;}/*Мой мир*/

#blog_groups_, #as_groups_, #av_groups_, #mm_groups_, #ig_groups_, #vk_groups_, #ok_group_widget_, #eh_groups_{
    width: 330px;
    margin: 5px 5px 5px 5px;
    border: 2px solid #918C2C;
    border-radius: 5px;
    padding: 5px;
    opacity: 0.8;
    transition: 0.7s;
}

#blog_groups_:hover, #as_groups_:hover, #av_groups_:hover, #mm_groups_:hover, #ig_groups_:hover, #vk_groups_:hover, #ok_group_widget_:hover, #eh_groups_:hover {
  opacity: 1;
  border: 2px solid #D1BC5C;
  transition: 0.7s;
}


/*Правим размеры в галерее*/
.bwg_container {
    width: 100%;
}
.bwg_container img {
    width: 100%;
}
/*.big_vine .Best_Wordpress_Gallery img {
    width: 100%;
}*/


#ez-toc-container{
    background: #e2d599;
}
.ez-toc-title{
    font-size: 1.2em !important;
    font-weight: 600 !important;
    color: #541919 !important;
    text-shadow: #763434 1px 1px 2px;
}
.ez-toc-link{
    font-size: 1.2em !important;
    font-weight: 500 !important;
    color: #541919 !important;
    text-shadow: #763434 0px 0px 1px !important;
}
