/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//    блок стилей для горизонтального экрана настольного компьютера                                                       //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 2560px) and (orientation: landscape) { 

body, html {width:100%; height: 100%; margin:0; padding: 0;}


h1, h2, h3 {text-align: center;
    display: block;
    font-size: 30px;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

p {font-family: arial; font-size: 18px; text-align: justify; text-indent: 50px; padding: 0 80px 0 80px; }
ul.hr > li {display: inline-block; margin-right: 5px; border: 1px solid #000; padding-left: 3px; padding-right: 3px; line-height: 1.5; margin-bottom: 3px; background-color: #90EE90;     
                             font-size:14px; text-decoration: none; white-space: nowrap;}
ul.hr {margin: 0; padding: 4px; text-align: center;}   
ul.hr > li > a:visited {  color: black; text-decoration: none;}
ul.hr > li > a:hover {  color: blue;   border-bottom: .07em solid; text-decoration: none;}
ul.hr > li > a:active {  color: #497DDD;   border-bottom: 1px solid; text-decoration: none;}
ul.hr > li > a:link {  color: black;   border-bottom: 1px solid; text-decoration: none; font-family: arial; font-weight: bold; }

.eightyproc{width:80%; border: 1px solid black;}


.raw {font-size:18px; font-family: courier; color: #2F4F4F; font-weight:600; margin-left: 80px; margin-right: 80px;}   


} /* закрыли media screen для десктопов*/     
/*  конец блока стилей для горизонтального экрана настольного компьютера  */





/* далее - начало блока стилей для вертикального экрана смартфона */ 
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//    блок стилей для вертикального экрана смартфона                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


@media screen  and (min-width: 100px) and (orientation: portrait) { 
    
body, html {width:100%; height: 100%; margin:0; padding: 0;}

h1, h2, h3 {text-align: center;
    display: block;
    font-size: 30px;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right:0;
    font-weight: bold;
}

p {font-family: arial; font-size: 18px; text-align: justify; text-indent: 20px; padding: 0 10px 0 10px; }
ul.hr > li {display: inline-block; margin-right: 0px; border: 1px solid #000; padding-left: 3px; padding-right: 3px; line-height: 1.5; margin-bottom: 3px; background-color: #90EE90;     
                             font-size:14px; text-decoration: none; white-space: nowrap;}
ul.hr {margin: 0; padding: 4px; text-align: center;}   
ul.hr > li > a:visited {  color: black; text-decoration: none;}
ul.hr > li > a:hover {  color: blue;   border-bottom: .07em solid; text-decoration: none;}
ul.hr > li > a:active {  color: #497DDD;   border-bottom: 1px solid; text-decoration: none;}
ul.hr > li > a:link {  color: black;   border-bottom: 1px solid; text-decoration: none; font-family: arial; font-weight: bold; }

.eightyproc{width:80%; border: 1px solid black;}

 ul.raw {font-size:18px; font-family: courier; color: #2F4F4F; font-weight:600; text-indent: 0; margin-left: 10px; margin-right: 10px; padding: 10px;}