/* ======================= General Style ======================= */
.FontDOC {font-family: Arial, Helvetica, sans-serif; background:#f5fffe; color:black; font-size: calc(16px + 1vw); font-style:normal; font-weight:normal; text-align:justify; }
.FontC { font-weight:normal; text-align:center; }
.FontCH {font-size:2vw; font-weight:900; text-align:center; padding-bottom: 0.7vw; }
.FontCH2 {text-align:center; padding-bottom: 0.5vw; padding-top: 0.7vw; }
.FontJ {text-align:justify; }
.FontJM {font-weight:normal; text-align:justify; margin-left:3vw; }
.FontR {text-align:right; }
.FontL {text-align:left; }
.FontTema {font-style:italic; font-weight:900; text-align:left; padding-bottom: 0.7vw; padding-top: 0.7vw; color:olive; }
.FontTemaC {font-style:normal; font-weight:900; text-align:center; padding-bottom: 0.7vw; padding-top: 0.7vw; color:olive; }
.aligncenter {text-align: center; }
.slide { border-radius: 20px; }
TopBottom {padding-bottom: 0.5vw; padding-top: 0.5vw; }
.tabPhot00{width: 100%; display: block; }
.st0 {width:90%; margin:auto; background:#f5fffe; padding:10pt;}
.st-1 {padding:7px; background:#000; border: thick solid #8ba1d3; color:#FFF; font-size: calc(16px + 1vw); font-weight:bold; font-family: Arial,Sans-Serif}
.st-2 {padding:5px; background:#415274; border: 3px solid #8ba1d3; color:#FFF; font-size: calc(16px + 1vw); font-style:normal; font-weight:bold; font-family: Arial,Sans-Serif; text-align:left; cursor:pointer}
.st-3 {float:right; color:#abffff; border: double solid #8ba1d3;} 
.st-3:hover {color:#ffff00} 
.st-4 {font-family:Arial, Helvetica, sans-serif; font-size: calc(16px + 1vw); font-style:normal; font-weight:normal; color:black; text-align:left}
.tabPhot00{width: 98%; text-align:center; ; border-radius: 5%;}
.tabPhot01{width: 98%; text-align:center; ; border-radius: 5%;}
.Phot00 {width: 100%; display: block; }
.Phot01 {width: 3%; display: block; }
/* .st-9 {padding:7px; background:#FFFFFF; color:#000000; font-size: 110%; font-family: Arial,Sans-Serif; text-align:justify;} */
.st-9 {padding:7px; background:#FFFFFF; color:#000000; font-size: calc(16px + 1vw); font-family: Arial,Sans-Serif; text-align:justify;}
.mst-9 {font-weight: bold; font-size: calc(16px + 1vw); font-family:Arial, Helvetica, sans-serif}
a.mst-9:link {text-decoration:underline; color:#0000ff}
a.mst-9:active {text-decoration:underline; color:#0000ff}
a.mst-9:visited {text-decoration:underline; color:#0000ff}
a.mst-9:hover {text-decoration:none; color:#FF0000}
.leftfoto{float:left;margin: 4px 10px 2px 0px; }
.st100 {width:100%; background:#f5fffe;align-items: center;}
ColB {color:blue; }
ColR {color:red; }
ColG {color:lime; }
ColY {color:yellow; }
ColO {color:olive; }
ColS {color:silver; }
ColGr {color:CadetBlue; }

/* ===================== ГЛАВНАЯ ========================= */
#main {background:#63554a; leftmargin: 0; topmargin: 0; marginwidth: 0; marginheight: 0; font-size: 0; height: 100vh; }

.container {
 display: grid;
 grid-template-columns: 1fr 6fr 1fr 1fr 6fr 1fr 1fr 6fr 1fr 1fr 6fr 1fr;
 grid-template-rows: 3% auto auto auto 1%;
 gap: 0px 0px;
 grid-template-areas: 
". . . . . . . . . . . . "
"a a a a a a . d . . e . "
"a a a a a a . . . . . . "
"b b b b c . . f . . g . "
". . . . . . . . . . . . ";
}

.pic1 { grid-area: a; }
.pic2 { grid-area: b; }
.pic3 { grid-area: c; }
.pic4 { grid-area: d; }
.pic5 { grid-area: e; }
.pic6 { grid-area: f; }
.pic7 { grid-area: g; }

.tabPhot00{width: 100%; display: block; }
.grayscales {filter: grayscale(100%); transition: 1s; width: 100%; }
.grayscales:hover { filter: grayscale(0); }

@media (max-width: 768px) {
.container {
 display: grid;
 grid-template-columns: 1fr 6fr 1fr 1fr 6fr 1fr;
 grid-template-rows: 2% auto auto 5% auto 5% auto 1%;
 gap: 0px 0px;
 grid-template-areas: 
". . . . . . "
"a a a a a a "
"b b b b c . "
". . . . . . "
". d . . e . "
". . . . . . "
". f . . g . "
". . . . . . ";
}
}
/* ===================== Медицина ========================== */
#DOC {font-family: Arial, Helvetica, sans-serif; background:#f5fffe; color:black; font-size: calc(16px + 1vw); font-style:normal; font-weight:normal; text-align:justify; margin: 1.5vw; height: 100vh; }
.conDOC {
 display: grid;
 grid-template-columns: fr fr fr fr fr fr;
 grid-template-rows: auto auto auto;
 gap: 5px 5px;

 grid-template-areas: 
"D01 D02 D03 D04 D05 D06"
"D07 D08 D09 D10 D11 D12"
"D13 D14 D15 D16 D17 D18"
}
.pic01 { grid-area: D01; }
.pic02 { grid-area: D02; }
.pic03 { grid-area: D03; }
.pic04 { grid-area: D04; }
.pic05 { grid-area: D05; }
.pic06 { grid-area: D06; }
.pic07 { grid-area: D07; }
.pic08 { grid-area: D08; }
.pic09 { grid-area: D09; }
.pic10 { grid-area: D10; }
.pic11 { grid-area: D11; }
.pic12 { grid-area: D12; }
.pic13 { grid-area: D13; }
.pic14 { grid-area: D14; }
.pic15 { grid-area: D15; }
.pic16 { grid-area: D16; }
.pic17 { grid-area: D17; }
.pic18 { grid-area: D18; }

A IMG {border: 1px solid blue; }
a img:active {border: 2px double red; }
a img:visited {border: 1px red; }
a img:hover {border: 2px solid red; }

@media (max-width: 768px) {
.conDOC {
 display: grid;
 grid-template-columns: fr fr fr;
 grid-template-rows: auto auto auto auto auto auto;
 gap: 5px 5px;

 grid-template-areas: 
"D01 D02 D03"
"D04 D05 D06"
"D07 D08 D09"
"D10 D11 D12"
"D13 D14 D15"
"D16 D17 D18"
}
}
/* ===================== TV ========================= */
#TV {font-family: Arial, Helvetica, sans-serif; background:#f5fffe; color:black; font-size: calc(16px + 1vw); font-style:normal; font-weight:normal; text-align:justify; margin: 1.5vw; height: 100vh; }
.table {display: table; width: 100%; box-sizing: border-box; border-collapse: collapse; border: 1px solid #555; empty-cells: hide; }
.table-caption {display: table-caption; padding: 2vw; color: #333; font-size: 1.6vw; text-align: center; }
.table-colgroup {display: table-column-group; }
.table-col {display: table-column; }
.table-thead {display: table-header-group; }
.table-tbody {display: table-row-group; }
.table-tfoot {display: table-footer-group;}
.table-tr { display: table-row; }
.table-th { display: table-cell; padding: 10px; border: 1px solid #555; text-align: center; }
.table-thw {display: table-cell; padding: 10px; border: 1px solid #555; text-align: center; background:#fff;}
.table-th3 {display: table-cell; position: relative; padding: inherit;}
.table-td {display: table-cell; border: 1px solid #555; text-align: justify; padding: 0vw 2vw 0vw 1vw; }
.table-tdw {display: table-cell; border: 1px solid #555; text-align: justify; padding: padding: 0vw 2vw 0vw 1vw; background:#fff;}
<!--
.table-td {display: table-cell; border: 1px solid #555; text-align: justify; padding: 0.1vw 2vw 0.1vw 2vw; }
.table-tdw {display: table-cell; border: 1px solid #555; text-align: justify; padding: 0.1vw 2vw 0.1vw 2vw; background:#fff;} -->
.table-thead .table-th, .table-thead .table-td {background: #f9f9f9; }
.table-tbody .table-th, .table-tbody .table-td {background: #fff; }
.table-tfoot .table-th, .table-tfoot .table-td {background: #f4f6ff; }
/* ===================== Дневник питания ========================== */
#DN {font-family: Arial, Helvetica, sans-serif; background:#f5fffe; color:black; font-size: calc(16px + 1vw); font-style:normal; font-weight:normal; text-align:justify; margin: 1.5vw; height: 100vh; }