body {
            font-family: Arial;
            margin: 0;
            padding: 0;
        }

        .element-block {
            margin: 20px;
        }

        .element-header {
            font-size: 2.5em;
            cursor: pointer;
            margin-bottom: 10px;
            border: 3px #e9e9e9 solid;
            display: block;
            padding: 7px;
            width: 250px;
        }

        .element-header:hover {
         border: 3px #01a5cb solid;
        }

        .year-list {
            display: none;
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
            flex-flow: row wrap;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .elements-container ul{
            display: flex;
            flex-flow: row wrap;
        }

        .year-list li {
            cursor: pointer;
            padding: 5px;
            font-size: 1.3em;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        
        .year-list li:hover {
            background-color: #f0f0f0;
        }
        
        .year-list li.active {
            background-color: #01a5cb;
            color: white;
            font-weight: bold;
        }

        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .gallery img {
            width: 130px;
            height: 130px;
            object-fit: cover;
            cursor: pointer;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(73, 72, 72, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
        }

        .modal img {
            max-width: 100%;
            max-height: 100%;
        }

        .modal .controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            width: 100%;
            justify-content: space-between;
        }

        .modal .controls button {
            background: none;
            border: none;
            color: white;
            font-size: 3em;
            cursor: pointer;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-align: center;
        }

/* Footer */


footer {
    max-width: 100%;
    background-color: #fff;
    margin-top: 5px;
    overflow: hidden; 
    border-top: 8px  #e9e9e9 solid;
    }
    
    .container-ft {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 0;
    overflow: hidden; 
     }
     
    .f-left { 
    float: left;
    width: 45%;
    text-align: right;
    padding-right: 40px;
    }
    
    .f-left p {
    font-size: 1.3em;
    color: №000;
    margin-top: 10px;
    }
    
    .f-right {
    float: left;
    width: 45%;
    text-align: left;
    }
    
    .f-right p {
    font-size: 1.3em;
    color: #000;
    line-height: 1em; 
    }
    
    .f-right a {
    font-size: 1em;
    color: #000;
    text-decoration: none;
    }
    
    .f-right a:hover {
     text-decoration: underline;
    }
    
    @media screen and (max-width: 600px) {
    .f-left, .f-right { 
    width: 100%;
    padding: 0;
    text-align: center;
    margin-bottom: 20px;
    }
    .f-left p {
     font-size: 0.7em;
     }
    .f-left a {
    font-size: 0.7em;
    }
    }
    
    .footer_h4 {
    font-size: 2em;
    font-style: normal;
    font-weight: bold;
    color: #000;
    margin-bottom: 7px;
    margin-top: 10px;
    }
    
    a.tt {color: #4c362a; text-decoration: underline;  font-size: 15pt;}
    a:hover.tt {text-decoration: none;}