:root {
    --font-family: "Montserrat", sans-serif;
    --second-family: 'Druk Wide Cy Web Bold Regular', sans-serif;
}  

html, body {
    width: 100%;
    height: 100%;
}

body {
    background: black;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 100%;
}

.forFlex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 1900vw;
    @media (max-width: 728px){
        height: 1900vw;
    }
}




/*Первый экран*/
header {
    padding-left: 1.5vw;
    padding-top: 2.9vh;
    padding-bottom: 0;

    @media (max-width: 728px){
        padding-left: 4vw;
        padding-top: 4vw;
    } 
}
header img {
    height: 4.1vw;
    @media (max-width: 728px){
        height:  12vw;
    }
}
.main {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url(image/backgroundWithoutSVG.png);
    background-repeat: no-repeat;
    height: 100vh;
    background-size: cover;
    margin-bottom: 16px;
    @media (max-width: 728px){
        margin-bottom: 16px;
        background-position: 10%;
    }

}

.event {
    padding-left: 12vw;
    margin-top: 14vh;
    width: 75vw;
    height: 51.5vh;
    @media (max-width: 728px){
        width:  75vw;
        padding-left: 0vw;
        margin-left: auto;
        margin-right: auto;
    }

}

.event-date {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 1.2vw;
    line-height: 122%;
    color: #fff;
    padding-bottom: 0;
    @media (max-width: 728px){
        font-size: 3.5vw;
    }
    
}

.event-description {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1vw;
    line-height: 140%;
    margin: 0;
    color: #fff;
    @media (max-width: 728px){
        font-size: 3vw;
    }
}

.event-title {
    font-family: var(--second-family);
    font-size: 3vw;
    line-height: 113%;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    padding-top: 5.5vh;
    @media (max-width: 728px){
        font-size: 4.5vw;
    }
}

.event-paragraphs1 {
    margin-top: 5.2vh;
    @media (max-width: 728px){
        width: 70vw;
    }


}
.event-paragraphs2 {
    margin-top: 5vh;
    @media (max-width: 728px){
        width: 70vw;
    }
    column-count: 2;
    column-gap: 30px;
}




/*Group2*/

.large_group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8vh;
    @media (max-width: 728px){
        margin-bottom: 6vh;
    }

}
.large_group img {
    width: 90vw; 
}

/*Group3*/
.container_groups3 {
    display: flex;
    justify-content: center;
    margin-bottom: 8vh;

    @media (max-width: 728px){
        margin-bottom: 5vh;
    }
    
    
}
.separator_group3 img {
    width: 43vw;
}

.separator_group3 {
    width: 90vw;
    display: flex;
    justify-content: space-between;
    
}

.group3 {
    display: flex;
    flex-direction: column;
    height: 95vw;
    justify-content: space-between;
}



/*Группа Кинетического стола*/

.content_centre {
    display: flex;
    justify-content: center;
    margin-bottom: 8vh;
    @media (max-width: 728px){
        margin-bottom: 5vh;
    }

}
.separator {
    width: 90vw;
    display: flex;
    justify-content: space-between;
    @media (max-width: 728px){
        flex-direction:column;
    }
    
}
.left {
    display: flex;
    flex-direction: column;
    /*Эта определяет растояние между столом и голо*/
    height: 227vw;
    justify-content: space-between;
    @media (max-width: 728px){
        height: 505vw;
        margin-bottom: 10vw;
    }

}
.kt_left {
    width: 36vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*Эта определяет растояние между столом внутри*/
    height: 73vw;
    @media (max-width: 728px){
        width: 90vw;
        height: 170vw
    }
}

.text {
    display: flex;
    flex-direction: column;
    height: 29.5vh;
    justify-content: space-around;
    @media (max-width: 728px){
        height: 18vh;
        margin-top: -8vw;
    }


}
.title {
    font-family: var(--second-family);
    font-size: 2.9vw;
    line-height: 113%;
    color: #fff;
    margin-bottom: 3vh;
    @media (max-width: 728px){
        font-size:4.9vw;
        margin: auto;
    }
}

.description {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.2vw;
    line-height: 160%;
    margin: 0;
    color: #fff;
    @media (max-width: 728px){
        font-size:2.4vw;
        margin: auto;
        text-align: center;
    }
}


.kt_right{
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 70vw;
    @media (max-width: 728px){
       display: none;
    }

}



.holo_left {
    width: 38vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
        /*Эта определяет растояние между голо внутри*/
    height: 145vw;
    @media (max-width: 728px){
        width: 90vw;
        height: 320vw;
    }

}

.right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /*Эта определяет растояние между столом и голо*/
    height: 227vw;
    justify-content: space-between;
    @media (max-width: 728px){
        height: 285vw;
    }
    
    
}

.holo_right {
    width: 48vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 160vw;
    /*Эта определяет растояние между голо внутри*/
    @media (max-width: 728px){
        width: 90vw;
        height: 285vw;

    }
}

.holo_right img {
    width: 48vw;
    @media (max-width: 728px){
        width: 90vw;

    }
}
.text_holo {
    height: 14vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.holo_left_text {
    display: flex;
    flex-direction: column;
    height: 13vw;
    justify-content: space-between;
    @media (max-width: 728px){
        height: 35vw;
    }

}
/*ТЕКСТ взять образцом отсюда*/

.left_LED {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45vw;
    @media (max-width: 728px){
        width: 90vw;
        order: 1;
    }
}



.right_LED {
    width: 42vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media (max-width: 728px){
        width: 90vw;
    }
}

.right_LED img {
    @media (max-width: 728px){
        margin-bottom: 10vw;
    }
}



.text_LED {
    width: 35.4vw;
    height: 19vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media (max-width: 728px){
        width: 90vw;
        height: 35vw;
        margin-bottom: 30vw;
        padding-top: 15vw;
    }

}

.text_block {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28vw;
}


.text_domna {
    width: 36vw;
    height: 23vw;
    display: flex;
    flex-direction: column;
    @media (max-width: 728px){
        width: 90vw;
        height: 43vw;
    }
}

.text_block_left {
    display: flex;
    align-items: center;
    height: 23.6vw;
}

.left_domna {
    width: 38vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media (max-width: 728px){
        width: 90vw;
        height: 150vw;
        margin-bottom: 8vw;
        padding-top: 10vw;
    }

}

.right_domna {
    width: 48vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media (max-width: 728px){
        width: 90vw;
    }
}

.d_545 {
    width: 29vw;
    height: 41vw;
    @media (max-width: 728px){
        width: 90vw;
        height: 127vw;
    }
}

.d_520 {
    width: 27vw;
    height: 41vw;
    @media (max-width: 728px){
        width: 90vw;
        height: 136vw;
        margin-bottom: 6vh;
        margin-top: 6vh;
    }
}

.d_970 {
    width: 49.5vw;
    height: 29.3vw;
    @media (max-width: 728px){
        width:90vw; 
        height:53vw;
    }
}
.d_720 {
    width: 36.5vw;
    height: 29.3vw;
    @media (max-width: 728px){
        width:90vw; 
        height:72vw;
    }
}

.separator_column {
    width: 90vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;



}

.stroke {
    display: flex;
    justify-content: space-between;
    @media (max-width: 728px){
        flex-direction: column;
        height: 130vw;
        margin-top: -8vw;
    }
}

.end {
    padding-bottom: 16vh;
    @media (max-width: 728px){
        padding-top: 6vw;
        padding-bottom: 14vh;

    }
}

.modal__wrapper {
    height: auto;
}

.forFlex {
    height: auto;
}