@media (min-width: 900px) {
body {
    display: flex;
	flex-flow: row wrap;	
	overflow: auto;
	background-color: #CBD3D6;
	margin-right: calc( (100vw - 480px)/(1580 - 580) * (120 - 10) + 10px);
	margin-left: calc( (100vw - 480px)/(1580 - 580) * (120 - 10) + 10px);
	font-family: 'Arial';
	font-size: calc((100vw - 420px)/(1680 - 320) * (24 - 20) + 20px);
}
}

    body > * {
		flex: 1 100%;
	}
	
	@media (max-width: 899px) {
    body {
		display: flex;
	    flex-flow: row wrap;	
	    overflow: auto;
	    background-color: #CBD3D6;
	    margin: 0;
	    font-family: 'Arial';
	    font-size: calc((100vw - 420px)/(1680 - 320) * (24 - 20) + 20px);
    }
    }
	
	
a:link {
	color: #000000;
}

a:visited {
    color: #555555;
}

a:active {
    color: #FF0000;
}


header {
	background-image: url('images/top.jpg');   /* ___ВРЕМ... Поз.2 - вставить картинку фона "шапки". */
	background-color: #545554;   /* ___ВРЕМ... Поз.3 - цвет фона-подложки был #000000. */	
	flex-basis: 100%;
	display: flex;
	min-height: 32px;
	height: calc( (100vw - 480px)/(1580 - 580) * (120 - 10) + 10px);
	max-height: 60px;
}

    /** Кнопка-"бургер" в верхней_панели, исходно скрыта. */
    .btnBurger {
		display: none;
	}
	
    /** Для "бургера". Ссылка "Подписаться" в верхней_панели (появляющаяся при указанном-узком вьюпорте). */
    .a_subs {
		display: none;
	}

    /** Для "бургера" (при указанном-узком вьюпорте). */
	@media (max-width: 560px) {		
	.panelTop > * {                 /** Все потомки в этом объекте строчно-блочные. */
        display: inline-block;
    }
		
		/** Кнопка-"бургер" в верхней_панели (появляется при узком вьюпорте). */
        .btnBurger {
		    display: block;
		    width: 28px;
		    height: 27px;
		    background-color: #B3B3B3;
		    margin: 2px 6px auto 10px;
		    border: none;
		    cursor: pointer;
	    }
	
	        /** Полоски в кнопке-"бургере". */
            .btnBurger hr {
				width: 20px;
		        height: 2px;
				background-color: #545554;
				border: none;
	        }
				
			/** Вторая и третья полоски в кнопке-"бургере" - задан отступ от верхнего элемента (так сделан межстрочный интервал). */
			#hrBtn_line-height {
				margin-top: -1px;
			}
		
		/** Ссылка "Подписаться" в верхней_панели (появляется при узком вьюпорте). */
		.a_subs {				
			/** Расположение - у правого края. */
			right: 12px;
			position: absolute;
				
		    margin: 6px 0 auto 0;
			border: none;
		}
		
		    /** Шрифт в ссылке "Подписаться" в верхней_панели - в стиле ссылок формы_подписки (но цвет светлый, для контраста). */
		    .aPageSubs_font {
			    color: #C0C0C0;			
				font-family: Trebuchet MS, Helvetica, sans-serif;
				font-size: 16px;
				font-weight: bold;
		    }
	}


/* Два блока (меню и контент) под "шапкой". */
.main_div {
	flex: 2 0%;
	align-items: stretch;
	height: 100vh;
	overflow: auto;
}


/* Блок слева - панель_меню. */
.divMenu {
	background-image: url('images/left.jpg');   /* ___ВРЕМ... Поз.4 - вставить картинку фона панели меню. */
	background-color: #cbd3d6;
	flex: 0 20%;
	min-width: 154px;
	max-width: 154px;    
	padding: 10px 5px 0 5px;
	line-height: 28px;
}

    /** Размер шрифта (уменьшенный) в подсказках к ссылкам-пунктам основного меню. */
	.divMenu img {
		font-size: calc((100vw - 420px)/(1680 - 320) * (16 - 11) + 11px);
	}
	
    /** Форма подписки-Subscribe. */
    .formSubs {
		background-color: #222000;   /* ___ВРЕМ... Был цвет формы_подписки: #222000. */
		max-width: 170px;
		padding: 4px 4px 7px 4px;
		line-height: 21px;
	}

	
	/** Для "бургера". Скрытие панели_меню при указанном-узком вьюпорте. */
	@media (max-width: 560px) {
    .divMenu {
        display: none;
    }
	}
	
	/** Выключатель-checkbox в <input>'е, открывающий/скрывающий бургер-меню; постоянно скрыт. */
	#menuCSS {
		display: none;
	}
	
	/** (Это обертка-модальное_окно.) Панель_меню, открывающаяся (с фиксированной шириной),
	 * как модальное_окно, поверх остального контента при нажатии "бургера". Исходно скрыто.
	 */
	.labelBurger {
		display: none;
	}
	
	    /** При включенном выключателе - открывается модальное_окно-обертка бургер-меню. */
	    #menuCSS:checked + .labelBurger {
			display: block;
			
			bottom: 0;
        	left: 0;
        	position: fixed;
        	right: 0;
        	top: 0;
        	background-color: rgba(0,0,0,0);
        	z-index: 10;
		}
		
		/** Кнопка-"крестик" закрытия бургер-меню. */
		.spanCloseMenuBurg {
			display: block;
			width: 28px;
	        height: 27px;
	        background-color: #B3B3B3;
			color: #545554;
	        margin: 2px 6px 0 10px;
			padding: 2px 0 0 6px;
	        border: none;
			cursor: pointer;
			font-size: 24px;
			font-weight: bold;
		}
		
		/** Бургер-меню. */
		.menuBurger {
			background-image: url("images/left.jpg");   /* ___ВРЕМ... Поз.4 - вставить картинку фона панели меню. */
			background-color: #CBD3D6;
			width: 154px;
			padding: 17px 3px 0 10px;
			overflow: auto;
			line-height: 30px;
		}


/** Блок с контентом. */
@media (min-width: 580px) {
.divContent {
	background-image: url("images/Bg.jpg");   /* ___ВРЕМ... Поз.5 - вставить картинку фона блока контента. */
	background-color: #CBD3D6;
	padding-right: calc( (100vw - 480px)/(1850 - 420) * (50 - 10) + 10px);
	padding-left: calc( (100vw - 480px)/(1850 - 420) * (50 - 10) + 10px);
}
}
	
	/** Для "бургера" - это при указанном-узком вьюпорте, когда скрылась панель_меню. */
	@media (max-width: 579px) {
    .divContent {
		background-image: url("images/Bg.jpg");   /* ___ВРЕМ... Поз.5 - вставить картинку фона блока контента. */
	    background-color: #CBD3D6;
		padding: 0 8px 0 20px;
    }
	}