/* --------------- reset.css --------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;                               /* обнуляем отступы и убираем бордюры */
    vertical-align: baseline;          /* приводим все к одной базовой линии */
    background: transparent;      /* чтобы не проскакивали левые фоны, установленные по умолчанию */
    font-size: 100%;                     /* размер шрифта всем одинаковый */
}
a {                                               /* ссылка не в общем списке чтобы не сбрасывать outline по умолчанию */
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline:none;
}
table {                        /* устраняем отступы между ячейками таблицы */
    border-collapse: collapse;
    border-spacing: 0;
}
td, td img {
    vertical-align: top;            /* возвращаем привычное вертикальное выравнивание */
}
input, select, button, textarea {
    margin: 0;                 /* убираем отступы по умолчанию для элементов форм (в частности для checkbox и radio) */
    font-size: 100%;             /* делаем размер шрифтов везде одинаковым */
    outline: none;
}
input[type="text"], input[type="password"], textarea {
    padding: 0;                 /* убираем внутренние отступы для текстовых полей */
}
input[type="checkbox"] {         /* вертикальное выравнивание чекбоксов и радиобатонов относительно меток */
    vertical-align: bottom;
}
input[type="radio"] {
    vertical-align: text-bottom;
}
sub {
    vertical-align: sub;
    font-size: smaller;
}
sup {
    vertical-align: super;
    font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}
nav ul {
     list-style:none;
}
/* --------------- /reset.css --------------- */

/* --------------- базовые настройки ---------*/
html {
    min-height:100%; /* всегда показываем вертикальную полосу прокрутки  */
}
body {
    color: #000;
    text-align: left;
    font-size: 1em; /* используем безопасные шрифтовые CSS стеки */
    min-height:100%;}
.imgleft{
    float:left;
    margin: 5px 5px 5px 5px;
    max-width:200px;
    max-height:300px;
}
.imgright{
    float:right;
    margin: 5px 5px 5px 5px;
    max-width:200px;
    max-height:300px;
}

a, a:visited { /* порядок правил для ссылок имеет значение */
    color: #e6618c;
    text-decoration: underline;
}
a:hover {
    color: #fdf208;
    text-decoration:none;
}
a:focus, a:active {
    color: #c83867;
    text-decoration: underline;
}
h1, h2, h3, h4, h5, h6{
    font-weight:normal;
}
img{

    max-width:100%;
}
.clr{
    clear:both;
}
.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
/* --------------- /базовые настройки ---------*/
header{

    background-color: #bbbffa;
    background-size: cover;
    padding: 10px 10px 10px 10px;
    width: auto;
    margin:auto;

}
.imgleft{
    float:left;
    margin: 5px 5px 5px 5px;
    max-width:auto;
    max-height:122px;
}
.imgright{
    float:right;
    margin: 5px 5px 5px 5px;
    max-width:auto;
    max-height:122px;
}
body{
    background-color: #bbc1f2;
    background-size: cover;
    padding: 10px 1px 1px 10px;
    width:auto;
    margin:auto;

}
body>p{font-size:1.0em ;
    text-align:justify;
    margin-bottom: 1px;
    margin-top: 5px;
    color: black;
    text-indent: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

body>h2{font-size:1.75em ;
    margin-bottom: 1px;
    margin-top: 1px;
    color: #ff0404;
    text-indent: 20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align:center;
    font-weight: 600;
}
body>h4{font-size:1.3em ;
    margin-bottom: 1px;
    margin-top: 1px;
    color: black;
    text-indent: 20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align:center;
}

header>h1{
    font-size: 2.5em;
    font-family:'Oxygen', Arial, Helvetica, sans-serif ;
    font-style: italic;
    text-align:center;
    font-weight: 600;
    color:darkred ;
    margin-bottom: 25px;
    margin-top: 25px;
}
header>h2{
    font-size: 1.75em;
    font-family:'Oxygen', Arial, Helvetica, sans-serif ;
    font-style: italic;
    text-align:center;
    font-weight: 600;
    color:darkred ;
    margin-bottom: 25px;
    margin-top: 25px;
}
headr>hr{
    color: #a7a8b4;
    background-color:#a7a8b4 ;
    border:1px ;
    height:1px;
}

strong>p{font-size:1.75em ;
    text-align:center;
    margin-bottom: 1px;
    margin-top: 1px;
    color: black;
    text-indent: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

footer {
    background-color:rgba(68, 199, 230, 0.45);
    padding: 5px 5px 5px 5px;
    background-size: cover;
    text-indent: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    margin: 0 auto;}




section{background-color: #828de5;
    background-size: cover;
    padding: 10px 1px 1px 1px;

}
article{
    background-color: #828de5;
    background-size: cover;
    padding: 10px 1px 1px 1px;
    width: auto;
    margin:auto;
}



article>p{
    font-size:1.0em ;
    text-align:center;
    margin-bottom: 1px;
    margin-top: 1px;
    color: black;
    text-indent: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
article>h2{
    font-size:1.5em ;
    text-align:center;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #f80b0b;
    text-indent: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
    }




button {
    background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
    background: -webkit-gradient(linear, 0 0, 0  100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BB  D6', endColorstr='#ffffff');
    padding: 3px 7px;
    color: #101010;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #667;
    padding: 10px 10px 10px 10px ;
    font-size: 1.1em;
    font-weight: 600;
    height:50px;
    width:200px;
    margin-bottom:15px;
    margin-top:15px;

}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
  margin:auto;


}

thead th:nth-child(1) {
  width: 35%;
}

thead th:nth-child(2) {
  width: 10%;
}

thead th:nth-child(3) {
  width: 10%;
}
table>td{font-size: 4.1em;}





th,
td {
    padding: 5px;
    border-collapse: collapse;
    border: 1px solid purple;
}
/* Типографика */
html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}


thead th,
tfoot th {
  font-family:"Rock Salt",  cursive;
  font-size: 1.1em;
  text-align: center;
}

th {
  letter-spacing: 0px;
    }

td {
  letter-spacing: 0px;
   }

tbody td {
    text-align: center;
    font-size: 0.9em;
    font-family:serif;
    color: black;
    font-style:normal;
    font-weight: 400;

}

tfoot th {
  text-align: center;
  font-size: 0.75em;
  color: #ffffff
}
/* Графика и цвета */

thead,
tfoot {
  background: url(images/leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
  border: 3px solid purple;
}
/* Полосатая зебра */

tbody tr:nth-child(odd) {
  background-color: rgba(201, 117, 144, 0.38);
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(images/noise.png);
}

table {
  background-color: #ff33cc;
}
/* Заголовок */

caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #667;
  text-align: right;
  letter-spacing: 1px;
}

header>h2{
    font-size:2em ;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
    font-style:normal;
    font-weight: 600;
    color: firebrick
}


footer>p{
    font-size:1.5em ;
    text-align:justify;
    margin-bottom: 1px;
    margin-top: 1px;
    color: black;
    text-indent: 10px;
    padding-left: 10px;
    padding-right: 10px;

}
 footer>h2{
    font-size:2.5em ;
    text-align: center;
    margin-bottom: 1px;
    margin-top: 1px;
    color: #ff0707;
    text-indent: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
    }


}
.small{
    font-size:1.0em ;
    color: black;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 10px;
    text-indent: 20px;
    padding-left: 10px;
    padding-right: 10px;
}
a, a:visited { /* порядок правил для ссылок имеет значение */
        color: #000000;
        text-decoration: underline;
        font-weight: 600;
}
    a:hover {
        color: #fc0a0a;
        text-decoration:none;
}
    a:focus, a:active {
        color: #c83867;
        text-decoration: underline;
}
.center {
    max-width:300px;
    margin: 0px auto;
}

.flex-container {
    display: flex;
    justify-content: center;
}
.flex-item {
    width: 200px;
    height: 300px;
    padding: 1px 1px 1px 1px;
    margin: 5px 0px 5px 0px
}


@media screen and (max-width:1537px){
    header>h1 {
        font-size: 2.2em;}
    footer>p{font-size: 1.3em;}
    footer>h2{font-size: 2.2em;}
    strong>p{font-size: 1.5em;}

}
   @media screen and (max-width:1451px) {
    button{
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px ;
        font-size: 1.0em;
        font-weight: 600;
        height:40px;
        width:175px;
        margin-bottom: 15px;
        margin-top: 15px; }
    .flex-item {
        width: 180px;
        height: 300px;
        padding: 1px 1px 1px 1px;
        margin: 5px 0px 5px 0px;}
    footer>p{font-size: 1.2em;}
    footer>h2{font-size: 2.1em;}
    strong>p{font-size: 1.4em;}
}




    @media screen and (max-width:1295px) {
    header>h1 {
        font-size: 2.0em;
        }
    header>h2{
        font-size:1.5em;
        }
    body>p{
        font-size: 1.0em;
        }
    body>h2{
        font-size: 1.5em;
        }
    body>h4{
        font-size: 1.3em;
        }
button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.8em;
        font-weight:400;
        height:45px;
        width:155px;
        margin-bottom: 10px;
        margin-top: 11px;
        }
    .flex-item {
        width: 165px;
        height: 300px;
        padding: 1px 1px 1px 1px;
        margin: 5px 0px 5px 0px;
        }
    footer>p{font-size: 1.1em;}
    footer>h2{font-size: 2.0em;}
    strong>p{font-size: 1.3em;}

}
    @media screen and (max-width:1191px) {
    header>h1 {
        font-size: 1.7em;
        }
    button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.7em;
        font-weight:200;
        height:45px;
        width:145px;
        margin-bottom: 10px;
        margin-top: 11px;
        }
    .flex-item {
        width: 150px;
        height: 255px;
        padding: 1px 1px 1px 1px;
        margin: 5px 0px 5px 0px;
        }
    footer>p{font-size: 1.1em;}
    footer>h2{font-size: 2.0em;}
    strong>p{font-size: 1.3em;}
}
    @media screen and (max-width:1059px){
    header>h1 {
        font-size:1.4em;
        }
    button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.7em;
        font-weight:200;
        height:45px;
        width:125px;
        margin-bottom: 10px;
        margin-top: 11px;
        }
}
    @media screen and (max-width:923px){
    header>h1 {
        font-size:1.1em;
        }
    body>p{
        font-size: 0.8em;
        }
    body>h2{
        font-size: 1.1em;
        }
    body>h4{
        font-size: 1.1em;
        }
    button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.7em;
        font-weight:200;
        height:45px;
        width:115px;
        margin-bottom: 10px;
        margin-top: 11px;
        }
    thead th,
    tfoot th {
        font-size: 0.9em;
        }
}
    @media screen and (max-width:849px){

    header>h1 {
        font-size:1.1em;
        }
    body>p{
        font-size: 0.6em;
        }
    body>h2{
        font-size: 1.1em;
        }
    body>h4{
        font-size: 0.9em;
        }

    button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.6em;
        font-weight:200;
        height:40px;
        width:85px;
        margin-bottom: 10px;
        margin-top: 11px;
        }
    article>h2
        {
        font-size: 1.1em ;
        font-weight:400;
        }
    article>p{
        font-size:0.8em ;
        }
    thead th,
    tfoot th {
        font-size: 0.7em;
        }
    tbody td {

        font-size: 0.7em;

}
    footer>p{font-size: 1.0em;}
    footer>h2{font-size: 1.8em;}
    strong>p{font-size: 1.1em;}
}
    @media screen and (max-width:639px){
    header>h1 {
        font-size:0.9em;}
    body>p{
        font-size: 0.6em;
        }
    body>h2{
        font-size: 0.9em;
        }
    body>h4{
        font-size: 0.8em;
        }

    button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.7em;
        font-weight:200;
        height:45px;
        width:80px;
        margin-bottom: 10px;
        margin-top: 11px;
        margin: 1px 1px 1px 1px;
        }
    article>h2
        {
        font-size: 0.9em ;
        font-weight:400;
        }
    article>p{
        font-size:0.6em ;
        }
    thead th,
    tfoot th {
        font-size: 0.7em;
        }
    footer>p{font-size: 0.9em;}
    footer>h2{font-size: 1.0em;}
    strong>p{font-size: 1.0em;}
}
   @media screen and (max-width:517px){
    header>h1 {
        font-size:0.7em;
        }
    header>h2 {
           font-size:0.7em;}
    body>p{
        font-size: 0.5em;
        }
    body>h2{
        font-size: 0.7em;
        }
    body>h4{
        font-size: 0.9em;
        }
    thead th,
    tfoot th {
        font-size: 0.6em;
        }
   tbody td {

    font-size: 0.65em;

       }
    button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.7em;
        font-weight:200;
        height:45px;
        width:80px;
        margin-bottom: 10px;
        margin-top: 11px;
        margin: 1px 1px 1px 1px;
       }

    article>h2
        {
        font-size: 0.7em ;
        font-weight:400;
        }
    article>p
       {
        font-size:0.7em ;
        }
    footer>p{font-size: 0.8em;}
    footer>h2{font-size: 0.8em;}
    strong>p{font-size: 0.7em;}
}
    @media screen and (max-width:423px){
    header>h1 {
        font-size:0.7em;
        }
    body>p{
        font-size: 0.5em;
        }
    body>h2{
        font-size: 0.7em;
        }
    body>h4{
        font-size: 0.9em;
        }
    button
        {
        padding: 3px 7px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #667;
        padding: 10px 10px 10px 10px;
        font-size: 0.7em;
        font-weight:200;
        height:45px;
        width:80px;
        margin-bottom: 10px;
        margin-top: 11px;
        margin: 1px 1px 1px 1px;
        }
    article>h2
        {
        font-size: 0.7em ;
        font-weight:400;
        }
    article>p{
        font-size:0.7em ;
        }
    thead th,
    tfoot th {
        font-size: 0.5em;
        }
    tbody td {
        font-size: 0.6em;
        }
    footer>p{font-size: 0.7em;}
    footer>h2{font-size: 0.7em;}
    strong>p{font-size: 0.7em;}
}