/*-----------Шрифты----------*/
@font-face {
    font-family: OswaldMedium;
    src: 
    url("fonts/Oswald-Medium.woff2") format("woff2"),
    url("fonts/Oswald-Medium.woff") format("woff"),
    url("fonts/Oswald-Medium.ttf") format("truetype");

}
@font-face {
    font-family: OswaldRegular;
    src: 
    url("fonts/Oswald-Regular.woff2") format("woff2"),
    url("fonts/Oswald-Regular.woff") format("woff"),
    url("fonts/Oswald-Regular.ttf") format("truetype");
}
@font-face {
    font-family: RobotoCondensedRegular;
    src: 
    url("fonts/RobotoCondensed-Regular.woff2") format("woff2"),
    url("fonts/RobotoCondensed-Regular.woff") format("woff"),
    url("fonts/RobotoCondensed-Regular.ttf") format("truetype");
}

/*----@media (display,width) ----*/
@media screen and (width > 1000px) {
div.note {display: block;
    width: 45%;
}
div.article{
    width: 50%;
}
div.books {
    width: 50%;
}}
@media screen and (width < 1000px) {
    div.note {
        display: none;
    }
    div.article{
        width: 90%;
    }
    div.books {
        width: 90%;
    }
}
/* -------Базовая разметка------ */
html, body {
    padding: 0px;
    margin: 0px;
}
body {
    padding-top: 15px;
}
header a {
    display: flex;
    padding: 0px;
    margin: 0px;
    text-align: left;
    border-top: 5px solid #e61f1a;
    border-bottom: 5px solid #e61f1a;
    text-decoration: none;
}
header > a > img {
    float: left;
    padding: 0px;
    margin: -20px 5px -20px 5px;
}
header > a > h1 {
    font-size: 2.5em;
    font-family: OswaldMedium;
    color: #e61f1a;
    margin: auto 0px;
    padding: 0px;
}
div {
    font-family: RobotoCondensedRegular;

}
/* -------Навигация по сайту------ */
ul.navMain {
    display: flex;
    list-style-type: none;
    margin: 0;
    margin-left: 82px;
    padding: 0;
}
ul.navMain > li > a, ul.navMain > li > span {
    display: block;
    padding: 5px 15px;
    text-decoration: none;
    font-size: 1.35em;
}
ul.navMain > li > a {
    font-family: OswaldMedium;
    color: #e61f1a;
    border-bottom: 5px solid #ffffff;
}
ul.navMain > li > a:hover {
    border-bottom: 5px solid #e61f1a;
}
ul.navMain > li > span {
    font-family: OswaldMedium;
    border-bottom: 5px solid #000000;
}
/* -------Footer: информация о сайте------ */
footer {
    display: flex;
    margin-bottom: 2.5%;
    margin-top: 2.5%;
    margin-left: 5%;
    border-top: 5px solid #e61f1a;
    padding-top: 20px;
    padding-bottom: 2%;
}
footer > p {
    display: block;
    font-size: 1.1em;
    font-family: OswaldMedium;
    color: #e61f1a;
    margin: 0px;
}
footer > p > span {
    font-size: 1.3em;
    vertical-align: super;
    margin: 0px;
    padding: 0px;
    padding-right: 2px;
}
footer > ul{
    display: block;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    margin-left: 50px;
}
footer > ul > li{
    font-family: OswaldRegular;
    color:#000000;
    padding-bottom: 8px;
}
footer > ul > li > a{
    font-family: OswaldRegular;/*RobotoCondensedRegular;*/
    text-decoration: none;
    color:#1d632c;
    font-size: 1.1em;
}

footer > ul > li > a:hover{
    border-bottom: #1d632c 2px solid;
}
footer > ul > li > details > summary,footer > ul > li > dialog > span.close{
    cursor: pointer;
}
/*details > summary::marker {RobotoCondensedRegular      content: "˃ ";}*//*details[open] > summary::marker {   content: "˅ ";}*/
footer > ul > li > details {
    font-size: 1.1em;
}
footer > ul > li > details > p{
    margin: 0px;
    padding: 0px;
    padding-top: 5px;
    font-family: RobotoCondensedRegular;
    color: #da0400;
}
/* Open state of the dialog  */
dialog:open {
    opacity: 1;
    transform: scaleX(1);
}
/* Closed state of the dialog   */
dialog {
    opacity: 0;
    transform: scaleX(0);
    transition:opacity 0.7s ease-out,transform 0.7s ease-out,overlay 0.7s ease-out allow-discrete,display 0.7s ease-out allow-discrete;
    border:none;
    /* Equivalent to   transition: all 0.7s allow-discrete; */
}
dialog > h3 {
    font-family: OswaldRegular;
    color:#1d632c;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    text-align: center;
    font-size: 1.45em;
}
dialog > p {
    max-width: 600px;
    font-family: RobotoCondensedRegular;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    text-indent: 2em;
    font-size: 1.15em;
}
dialog > div {
    text-align: right;
    margin-top: 4px;
    padding-top: 9px;
    border-top:#000000 3.5px solid;
}
dialog > div > a {
    display: inline-flex;
    text-decoration: none;
    color:#000000;
    font-family: OswaldMedium;
}
dialog > div > a:hover {
    color:#1d632c;
}
dialog > div > a:focus{
    outline: none;
}
dialog > div > a > span{
    margin: 0px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0px;
    font-size: 1em;
}
dialog > div > a > span.imgClose {
    width: 25px;
    height: 25px;
    content: url("icon/close.png");
    background-color: #000000;
    margin: 0px;
    margin-right: 3px;
    padding: 0px;

}
dialog > div > a:hover > span.imgClose {
    background-color: #1d632c;
}
dialog:focus {
    outline: none;
}
/* Before open state  ,attr(data-width 20px)*//* Needs to be after the previous dialog:open rule to take effect,     as the specificity is the same */
@starting-style {
    dialog:open {
        opacity: 0;
        transform: scaleX(0);
    }
}
/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
    background-color: transparent;
    transition:display 0.7s allow-discrete,overlay 0.7s allow-discrete,background-color 0.7s;
    /* Equivalent to  transition: all 0.7s allow-discrete; */
}
dialog:open::backdrop {
    background-color: rgb(0 0 0 / 25%);
}
/* This starting-style rule cannot be nested inside the above selector  because the nesting selector cannot represent pseudo-elements. */
@starting-style {
    dialog:open::backdrop {
        background-color: transparent;
    }
}