body {

    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
   
}

/* Шапка */

.Header {

    display: flex;
    justify-content: right;
    position: fixed;
    width: 100vw;
    height: 5vh;
    align-items: center;
    z-index: 130;
    

}
.Burger {

    width: 50px;
    height: 40px;
    display: grid;
    align-items: center;
    cursor: pointer;
    margin-right: 60px;
    z-index: 130;
    border: 0;
    background: none;
    animation-name: appearance;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    

}
.Line1 {

    height: 5px; 
    background-color: rgb(255, 208, 0);
    width: 100%;
    padding-top: 1px; 

}
.Line2 {

    background-color: rgb(255, 208, 0); 
    width: 100%;
    height: 5px;
    padding-top: 1px;

}
.Line3 {

    height: 5px; 
    background-color: rgb(255, 208, 0);
    width: 100%; 
    padding-top: 1px;

}
.Place-Button-Up {

    width: 100vw;
    height: 0vh;
    display: flex;
    justify-content: center;

}
.Button-Up {

    opacity: 0;
    position: fixed;
    z-index: 140;
    transition: all 1.5s ease;
    transform: rotate(180deg);
    cursor: pointer;
    

}
.Button-Up.open {

    opacity: 1;

}



/* Конец шапки */ 

.First-Picture {

    background-image: url(ReadMoreContent/First_Pic.jpg);
    background-size: cover;
    width: 100vw;
    height: 100vh;
    animation-name: appearance;
    animation-duration: 1s;
    animation-delay: 1.5s;
    transition: transform 1s;   
    z-index: 99;
    opacity: 0;
    animation-fill-mode: forwards;


}

.Second-Picture {

    background-image: url(ReadMoreContent/Second_Pic.jpg);
    background-size: cover;
    width: 100vw;
    height: 100vh;
    transition: transform 1s;   
    z-index: 99;
    opacity: 1;
    animation-name: appearance;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
   
}

.Third-Picture {

    background-image: url(ReadMoreContent/Third-Pic.jfif);
    background-size: cover;
    width: 100vw;
    height: 100vh;
    transition: transform 1s;   
    z-index: 99;
    opacity: 1;
    animation-name: appearance;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
   
}

.Fourth-Picture {

    background-image: url(ReadMoreContent/Four-Pic.jpg);
    background-size: cover;
    width: 100vw;
    height: 100vh;
    transition: transform 1s;   
    z-index: 99;
    opacity: 1;
    animation-name: appearance;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;

}
.Fifth-Picture {

    background-image: url(ReadMoreContent/Five.jpg);
    background-size: cover;
    width: 100vw;
    height: 100vh;
    transition: transform 1s;   
    z-index: 99;
    opacity: 1;
    animation-name: appearance;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;

}
.Sixth-Picture {

    background-image: url(ReadMoreContent/Six-Pic.jpg);
    background-size: cover;
    width: 100vw;
    height: 100vh;
    transition: transform 1s;   
    z-index: 99;
    opacity: 1;
    animation-name: appearance;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;

}

@keyframes appearance {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}
.Place-For-Button {

    width: 100vw;
    height: 5vh;
    bottom: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    position: fixed;
    z-index: 100;
    transition: 0.7s transform;

}
.Place-For-Button.open {

    opacity: 1;

}
.Button {

    opacity: 0;
    cursor: pointer;
    position: fixed;
    z-index: 100;
    transition: all 1.5s ease;

}
.Button.open {

    opacity: 1;

}
.Load {

    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
    position: absolute;
    pointer-events: none;

}
.Dot-Line {

    background-color: red;
    width: 10px;
    height: 5px;
    animation: loading;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    z-index: 150;
    position: absolute;
    opacity: 0;

}

@keyframes loading {

    from{

        width: 20px;
        opacity: 1;

    }

    to{

        width: 300px;
        opacity: 0;

    }

}
.Sidebar {

    width: 15%;
    height: 100%;
    z-index: 100;
    top: 0;
    left: -15%;
    background-color: white;
    position: fixed;
    transition: left 0.5s ease;

}
.Sidebar.open {
    
    left: 0;

}
.Overlay {

    opacity: 0;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    transition: all 0.5s ease;
    visibility: hidden;

}
.Overlay.open {

    opacity: 1;
    visibility: visible;

}
.Content-In-Sidebar {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 60%;

}
.Page-Sidebar {

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: rgb(66, 40, 19);
    text-decoration: none;
    font-size: 22px;
    margin-top: 3%;
    

}
.Heading-Slide {

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 50px;
    margin-left: 5%;
    margin-top: 5%;
    color:rgb(255, 208, 0);

}