html {
    scroll-behavior: smooth;
}

:root {
    --color1: #FFFFFF;
    --color2: #030303;
    --color3: #9D8665;
    --color_line: #710707;
    --font1: 18px;
    --font2: 22px;
    --font3: 28px;
    --font4: 32px;
    --font5: 80px;    
}
h1{ 
    margin: 0px;
    padding-top: 1px;
    padding-bottom: 0px;
    align-items: center; 
    font-family: 'Forum', cursive;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font3);
    line-height: 50px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color1);
    transition: 0.7s;                
      
}
h2{ 
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    font-family: 'Forum', cursive;
    font-style: normal;
    font-weight: normal;
    font-weight: 300; 
    font-size: var(--font5);
    height: 90px;
    letter-spacing: 5px;
    text-transform: uppercase;     
}

h3{ padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    font-family: 'Forum', cursive;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font4);
    line-height: 35px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color2);
}
h4 {padding-top: 0px;
    padding-bottom: 0px;
    font-family: 'Roboto', sans-serif;
    font-style:normal;
    margin: 0px;
    font-style: normal;
    font-weight: bold;
    font-size: var(--font3);
    line-height: 33px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: var(--font2);

}
a {
font-family: 'Roboto', sans-serif;
font-size: var(--font2);
 
}
    .header_container
    {   width: 100%;
        display: flex;        
        margin: 0px auto;    
        height: 152px;
        justify-content: center;
        align-items: center;    
        background: var(--color2);
        margin-bottom: -2px;           
    }    

        .header_Block {
            display: flex;
            width: 100%;
            max-width: 1440px;
            margin: 0px auto;  
            align-items: center;
            justify-content:space-between
        }   

            .header_Block_1 {
                display: flex;
                height: 50px;
                width: 195px;
                align-items: center; 
                cursor: pointer;                                                            
            }

            .header_Block_1>a {
                display: block;
                height: 50px;
                width: 195px;
                position: absolute;
                object-fit: cover;
                z-index: 5;
            }

            .header_Block_1:hover svg {
                fill: var(--color3);
            }
            .header_Block_1:hover h1 {
               color: var(--color3);
               
            }
           
                .header_Block_1_1 {
                    display: flex;
                    margin-bottom: 3px;
                    width: 49px;
                    height: 26px;
                    margin-right: 20px; 
                    align-items: center;
                }
              
                .header_Block_1_1>svg {
                    fill: var(--color1);
                    transition: 0.7s;                    
                }

                .header_Block_1_2 {
                    display: flex;
                    margin-left: 6px;
                    align-items: center; 
                    color: var(--color1);        
            }
           
            .header_menu {
                display: flex;                
                width: 775px;
                height: auto;               
                flex-direction: row;
            }

            .header_online {
               display: none;
            }

            .header_Block_2 {
                display: flex;  
                flex-direction: row;
                justify-content: space-between;                           
                width: 100%;                
            }

            
                
            .header_Block_nav {
                display: flex;
                margin-left: -40px;
                width: 100%;     
                list-style: none;
                justify-content: space-between;
            }

                .header_Block_nav>li {
                   z-index: 4;                    
                }

                    .header_Block_nav>li>a {
                        list-style-type: inherit;
                        text-decoration: none;
                        font-style: normal;
                        letter-spacing: 2px;
                        font-weight: 200;
                        color: var(--color1);
                        transition: 0.8s;                                                                                    
                    }

                     .header_Block_nav li:hover a {
                        color: var(--color3);                        
                    }                  
                    
                    .burger {
                        display: none;
                        z-index: 4;
                    }
                    .burger:hover .bar{
                        background-color: var(--color3);
                    }
                    .burger:active .bar{
                        background-color: var(--color3);
                    }

                     .bar {
                        display: block;
                        width: 32px;
                        height: 3px;
                        margin: 5px auto;
                        transition: 0.3s;
                        background-color: var(--color1);
                    }

                    .burger.active .bar:nth-child(2) {
                        opacity: 0;
                    }
                    
                    .burger.active .bar:nth-child(1) {
                        transform: translateY(8px) rotate(45deg);
                    }
                    
                    .burger.active .bar:nth-child(3) {
                        transform: translateY(-8px) rotate(-45deg);
                    }
                
                    .header_image {
                        display: none;
                        width: 100vw;
                        
                    }
                    .header_image>div img{
                        width: 100%;
                        height: auto;
                    }
                    .hed_img1_1 {
                        display: none;
                    }

                    .hed_img1_2 {
                        display: none;
                        
                    }

                    .hed_img2 {
                        display: none;                       
                    }
                    .header_line {
                        display: none;
                        height: 2px;
                       
                    }



           
    
main {
    display: flex;
    width: 100%;    
    align-items: center;   
    flex-direction: column;
    
}
        .welcome_container {
            display: flex;
            width: 100%;
            margin: 0px auto;    
            justify-content: center;
            align-items: center;
            flex-direction: row-reverse;
            background: var(--color2); 
            
        }
            .welcome_Block {
                display: flex;
                flex-direction: row;
                max-width: 1440px;
                max-height: 842px;
                padding-left: 20px;
                padding-right: 20px;
                width: 100%;
                height: 100%;
                justify-content: space-between;
                margin-bottom: 1px; 
            }
                .welcome_Block_1 {
                    display: flex;
                    flex-direction: column;
                    margin-right: -200px;
                    margin-top: 150px;
                    max-width: 598px;
                    width: 100%;    
                    height: 390px;
                    z-index: 2;   
                    pointer-events: none;                                                         
                }
                    .welcom_text1>h2 {
                        width: 100%;
                        line-height: 91px;
                        margin-right: -500px;
                        margin-bottom: 86px;
                        color: var(--color1);
                        pointer-events: none;
                        cursor: none;                                            
                    }

                    .welcom_text2 {
                        font-family: 'Roboto', sans-serif;
                        margin-right: -500px;
                        padding-top: 30px;
                        font-style: normal;
                        font-weight: 300;
                        font-size: var(--font3);
                        line-height: 33px;
                        letter-spacing: 2px;
                        color: var(--color1);    
                    }
                .discover_Louvre_button {
                    display: flex;
                    margin-top: 75px; 
                    width: 360px;
                    height: 75px;                    
                    border: none;
                    border-radius: 10px;
                    background:var(--color_line);                   
                    text-align: center;
                    letter-spacing: 2px;
                    color: var(--color1);
                    cursor: pointer;
                    transition: 0.8s;
                    
                }
                    .discover_Louvre_button>a {
                        display: block;
                        width: 100%;
                        height: 50px;
                        padding-top: 25px;                   
                        list-style:none;  
                        appearance: none;
                        text-decoration:none;
                        font-family: 'Roboto', sans-serif;
                        font-style:normal;
                        font-weight: 200;
                        font-size: var(--font2);
                        line-height: 26px;
                        letter-spacing: 2px;
                        color: var(--color1); 
                        
                    }
                  
                    .discover_Louvre_button:hover {
                        background-color: var(--color3);
                        
                    }
                    
                    .discover_Louvre_button:active {
                        transform: scale(0.8);
                    }
                    
                .welcome_Block_2 {
                    display: flex;
                    position: relative;
                    flex-direction: column;
                    align-items: flex-end;
                    z-index: 1;
                    max-width: 1000px;
                    width: 100%;    
                    max-height: 810px;
                    height: 100%; 
                    overflow-x: hidden;                    
                }
                .welcome_Block_2::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 99%;
                    width: 100%;
                    z-index: 3;
                    background: linear-gradient(to right, var(--color2),rgba(0, 0, 0, 0.5) 16.19%, rgba(0, 0, 0, 0) 33.73%);
                    pointer-events: none;
                }
                              

                .welcome_slider {
                    display: flex;
                    flex-direction: row;
                    position: relative;
                    left: 500%;
                    width: 700%;
                    height: 100%;
                                                                                                               
                }
               
                .welcome_slider_item {  
                    position: relative;
                    user-select: none;
                }
                    .welcome_slider_item img {
                        position: relative;                             
                        width: 100%;    
                        height: auto;
                        z-index: -1;  
                        user-select: none;
                    }

                   
                .welcome_slider_control {   
                    display: flex;
                    flex-direction: row;
                    align-items: center; 
                    justify-content: center;                                                      
                    background-color: var(--color2);
                    z-index: 3;                 
                    margin-top: -60px;
                    width: 600px;    
                    height: 120px; 
                }
                .number_welc {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 40px;
                    width: 76px;                   
                }
                    output[name="result_welc"] {
                        all:unset;                            
                        width: 60px;      
                        text-align: center;                                          
                        font-family: 'Roboto', sans-serif;
                        font-style:normal;
                        font-weight: 300;
                        letter-spacing: 2px;
                        font-size: var(--font2);
                        line-height: 40px;                        
                        color: var(--color1);                                         
                    }

                    .welcome_slider_control span {   
                        all:unset;                            
                        width: 60px;      
                        text-align: center;
                        font-family: 'Roboto', sans-serif;
                        font-style:normal;
                        font-weight: 300;
                        letter-spacing: 2px;
                        font-size: var(--font2);
                        line-height: 40px;                        
                        color: var(--color1);   
                                                                
                    }

                    .welcome_from {
                        display: flex;
                        flex-direction: row;
                    }

                .radio_welc {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-left: 55px;
                    margin-right: 60px;
                    height: 40px;
                    width: 180px;                   
                }
                .radio_welc_item {
                    position: absolute;
                    z-index: -1;
                    opacity: 0;
                }
               
                .radio_welc_item + label {        
                    position: relative;
                    padding: 0 0 0 40px;
                    cursor: pointer;
                    top: 0px;
                    left: 1px;
                    width: 17px;
                    height: 17px;
                }

                /* Оформление радио-кнопки */
                .radio_welc_item + label:before {
                    content: '';
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 17px;
                    height: 17px;                                        
                    background: var(--color1);
                    transition: 0.3s;
                }

                .radio_welc_item:not(:disabled):not(:checked) + label:hover::before {
                    background: var(--color3);
                }
                              

                /* Радио в состоянии неактивен */
                .radio_welc_item + label:after {
                    content: '';
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 17px;
                    height: 17px;
                    background: #D2B183;
                    opacity: 0;
                    transition: 0.2s;                    
                }
                

                .radio_welc_item:checked + label:after {
                    opacity: 1;
                }


                .left_welc {   
                    height: 40px;
                    width: 40px;
                    padding: 0;
                    text-align: left;                                               
                    border: none;
                    background: none;                     
                    cursor: pointer;                                           
                }
                .right_welc {   
                    height: 40px;
                    width: 40px;
                    padding: 0;
                    text-align: right;                                               
                    border: none;
                    background: none;                     
                    cursor: pointer;                                           
                }
                .left_welc  svg {  
                    transition: 0.3s; 
                    fill: var(--color1);                                           
                }
                .right_welc svg { 
                    transition: 0.3s;  
                    fill: var(--color1);                                            
                }
                
                .left_welc:hover  svg {  
                    fill: var(--color3);                                           
                }
                .right_welc:hover svg {  
                    fill: var(--color3);                                            
                }


    .visiting_container {
        display: flex;
        width: 100%;
        flex-direction: column;    
        align-items: center;
        background: var(--color1);
    }
        .visiting_Block {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 1440px;
            margin: 0px auto;
        }
            .visiting_Block_1 {
                margin-top: 75px;
                margin-bottom: 0px;
                color: var(--color3);                        
            }
            .visiting_Block_2 {
                width: 100%;
                height: 3px;
                background-color: var(--color_line);       
            }

            .visiting_Block_3 {
                margin-top: 0px;
                margin-bottom: 75px;
                display: flex;
                flex-wrap: wrap;    
                justify-content: space-between;             
            }

                .visiting_card {    
                    flex-direction: column;
                    width: 440px;
                    height: 422px;
                    margin-top: 78px;
                    gap:60px;
                    cursor: pointer;
                     
                }
                .visiting_card>a {
                    display: block;
                    position: absolute;
                    width: 440px;
                    height: 420px;
                    z-index: 1;                                           
                }
                   
                .visiting_card>a:hover ~.visiting_line {
                    width: 100%;
                }  
                    
                    .visiting_img img{    
                        width: 100%;
                        height: auto;
                        z-index: 2;                           
                    }
                    
                    
                    .visiting_title {
                        margin-top: 23px;                        
                    }

                    .visiting_line {
                        width: 300px;
                        height: 2px;
                        background-color: var(--color_line); 
                        margin-bottom: 10px;
                        margin-top: 9px;
                        transition: 0.8s;                
                    }
                    

                    .visiting_text>p {
                        font-family: 'Roboto', sans-serif;
                        font-style:normal;
                        font-weight: 200;
                        color: var(--color2);
                        margin-top: 9px;
                        margin-bottom: 1px;
                    }

                    .visiting_font {
                        font-size: var(--font1);
                        line-height: 21px;
                    }

    .explore_container {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        background: var(--color2);
        
    }
        .explore_Block {
            display: flex;
            width: 100%;
            max-width: 1440px;
            flex-direction: row;
            flex-wrap: wrap; 
            justify-content: space-between; 
        }
            .explore_Block_1 {
                display: flex;
                width: 660px;
                flex-direction: column;    
            }
                .explore_title {
                    margin-top: 75px;
                    color: var(--color1);
                    margin-bottom: 3px;    
                }

                .explore_line {
                    width: 100%;
                    height: 3px;    
                    margin-bottom: 52px;
                    margin-top: 25px;
                    background-color: var(--color_line);
                    z-index: 4;                                
                }

                .explore_text {
                    font-family: 'Roboto', sans-serif;
                    font-style:normal;
                    font-weight: 300;
                    line-height: 39px;
                    margin-top: 0px;
                    padding-right: 5px;
                    color: var(--color1);    
                }
                .explore-color-yellow {
                    color: #CAAA7D;
                }

            .explore_Block_2 {
                display: flex;
                flex-direction: row;
                height: 700px;
                width: 720px;
                margin-top: 90px; 
                margin-bottom: 75px;  
                z-index: 1;              
            }

            .explore_Block_img {  
                position: relative;                           
            }
            .explore_Block_img img { 
                width: 100%;
                height: auto;
                z-index: 2;                        
            }
            

            .explore_Block_divide {
                position: relative;
                display: flex;
                margin-left: -19px;
                margin-right: -19px;
                left: 100%;
                height: 100%;
                width: 39px;
                background: url(assets/svg/explore-slider.svg);
                background-position-y: center;
                z-index: 4;
            }
            
            .circle-explore { 
                position: relative;
                top: 50%;
                margin-top: -15px;
                margin-left: 5px;
                width: 30px;
                height: 30px;
                border-radius: 50%; 
                transition: 0.4s;
                z-index: 4;              
            }
            
            .circle-explore:hover {                           
                background-color: var(--color_line); 
                cursor: col-resize             
            }

            .explore_Block_filter {
                position: absolute;               
                width: 60%;
                height: 100%;
                top: 0; left: 0;
                z-index: 1;
                background-image: url('assets/img/Explore.jpg');
                background-size: cover; 
            }

            
    .video_container {
        display: flex;
        width: 100%;
        flex-direction: column;    
        align-items: center;
        z-index: 2;
        background: var(--color1);

    }
        .video_Block {            
            display: flex;
            flex-direction: column;
            width: 100%;            
            max-width: 1440px;
            margin: 0px auto; 
            align-items: center;
        }
        .video_Block_1 {
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;                    
        }

        .video_Block_1_1 {
            width: 610px;
            height: 90px;
            margin-top: 75px;
            margin-bottom: 75px;
            color: var(--color3);                 
        }
        .video_Block_1_2 {
            margin-top: 75px;
            margin-bottom: 75px;
            padding-top: 10px; 
            line-height: 38px;
            width: 720px;
            list-style-type: inherit;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-size: var(--font2);
            line-height: 38px;
            color: var(--color2);
            align-items: center;              
        }  
        .video_player{
            height: auto;
            max-width: 100%;
            position: relative;
            
       }
       .display {       
           display: flex;
           position: relative;
           width: 100%;           
           height: auto;
           object-fit: cover;
           justify-content: center;
           align-items: center;            
           z-index: 1;
       }
        .video{  
         position: relative;            
           width: 100%;
           height: auto;
           object-fit: cover;
           background-color: var(--color2);  
           z-index: -1;         
       }   
       .display_button {
        width: 220px;
        height: 220px;
       }
        .display_button[id='playDisplay'] {
            display: block;
            position: absolute;
            list-style:none;
            background: none;
            border: none;                     
            background-image: url("assets/video/play_big.svg");
            z-index: 2; 
            background-size: cover;          
            cursor: pointer;
        }
        .display_button[id='pauseDisplay'] {
            display: none;
            position: absolute;
            list-style:none;
            background: none;
            border: none;                     
            background-image: none;
            z-index: 2; 
            background-size: cover;          
            cursor: pointer;
        }
          
           
     
        .display_button:hover {
            opacity: 0.5; 
            transform: scale(1.01);   
        }
        
        .display_button:active {
            opacity: 0.5;
            transform: scale(1);  
        }
        .add_progres {
            display: none;
        }
        
        .progres_time2 {
            width: 100%;          
        }
        
        .controls{
            background: #000000;
            display: flex;
            position: relative;
            height: 85px;
            width: 100%;
            align-items: center;
            margin-bottom: 40px;
            z-index: 3;
        }     
            .video_button_play_stop[id="play"] {
                height: 30px;
                width: 23px;
                margin-left: 30px;
                list-style:none;
                background: none;
                border: none;
                cursor: pointer;
                background-image: url("assets/svg/play.svg");
                order: 1;
            }

            .video_button_play_stop[id="pause"] {
                display: none;
                height: 30px;
                width: 23px;
                margin-left: 30px;
                list-style:none;
                background: none;
                border: none;
                cursor: pointer;
                background-image: url("assets/svg/pause.svg");
                background-size: cover;
                order: 1;
            }
                        
            .video_button_play_stop:hover {
                opacity: 0.7;
                transform: scale(1.1); 
            }
            .video_button_play_stop:active {
                opacity: 0.7; 
                transform: scale(1);
            }   

          
            .progres_time {
                width: 929px;
                margin-left: 50px;
                order: 2;
            }

            .progress_t {               
                height: 8px;
                width: 100%;        
                outline: none;
                transition: background-color 450ms ease-in;
                -webkit-appearance: none;
            }
        
            .progress_t::-webkit-slider-thumb {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                -webkit-appearance: none;
                cursor: pointer;
                background: #FFFFFF;
            }
            .progress_t::-webkit-slider-thumb:hover {
                width: 20px;
                height: 20px;
                background: var(--color3);
                border: 2px var(--color_line);
            }            


            .progress_t2 {               
                height: 8px;
                width: 100%;        
                outline: none;
                background: linear-gradient(to right, var(--color_line) 0%, var(--color_line) 0%, #fff 43%, #fff 100%);
                transition: background-color 450ms ease-in;
                -webkit-appearance: none;
            }
        
            .progress_t2::-webkit-slider-thumb {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                -webkit-appearance: none;
                cursor: pointer;
                background: #FFFFFF;
            }
            .progress_t2::-webkit-slider-thumb:hover {
                width: 20px;
                height: 20px;
                background: var(--color3);
                border: 2px var(--color_line);
            }

            
            .video_button_sound {
                height: 30px;
                width: 38px;
                margin-left: 50px;
                list-style:none;
                background: none;
                border: none;
                cursor: pointer;
                background-image: url("assets/svg/sound.svg");
                background-size: cover;
                order: 3;
            }
            .video_button_sound:hover {
                opacity: 0.7;
                transform: scale(1.1);
            }
            
            .video_button_sound:active {
                opacity: 0.7;
                transform: scale(1);
            }
            
            .slider_sound {
                width: 155px;
                margin-left: 50px;
                order: 4;
            } 

            .progress_s {
                background: linear-gradient(to right, var(--color_line) 0%, var(--color_line) 43%, #fff 43%, #fff 100%);
                height: 8px;
                width: 100%;        
                outline: none;
                transition: background-color 450ms ease-in;
                -webkit-appearance: none;
            }
        
            .progress_s::-webkit-slider-thumb {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                -webkit-appearance: none;
                cursor: pointer;
                background: #FFFFFF;
            }
            .progress_s::-webkit-slider-thumb:hover {
                width: 20px;
                height: 20px;
                background: var(--color3);
                border: 2px var(--color_line);
            }  
        
            .video_button_screen {
                height: 36px;
                width: 36px;
                margin-left: 50px;
                list-style:none;
                background: none;
                border: none;
                cursor: pointer;
                background-image: url("assets/svg/screen.svg");
                order: 5;
            }
            
            .video_button_screen:hover {
                opacity: 0.7;
                transform: scale(1.1);
                }
        
            .video_button_screen:active {
                opacity: 0.7;
                transform: scale(1.0);            
            }
    
            .video_Block_2 {
                display: flex;
                flex-direction: column;
                align-items: center; 
                width: 100%;
                overflow-x: hidden;                                                        
            }
                
            .video_slider {
                    display: flex;
                    flex-direction: row;
                    position: relative;
                    width: 2428px;                     
                    height: 254px;                                       
                    justify-content: space-between;  
                    margin-bottom: 0px; 
                    left: 0;
                }
                                             
                    .video_slider_item {                                                                                                                      
                        width: 452px;   
                        height: 100%; 
                        background-color: #666666;   
                        text-align: center; 
                        font-size: 40px;                                                 
                    }

                .radio_vid {
                    display: flex;                   
                    justify-content: space-between;                   
                    margin-top: 40px;
                    margin-bottom: 75px;                    
                    height: 12px;
                    width: 200px;  
                                    
                }
                .radio_vid_item {
                    position: absolute;
                    opacity: 0;   
                }
               
                .radio_vid_item + label {        
                    position: relative;
                    cursor: pointer;
                    top: 0px;
                    left: 0px;
                    border-radius: 50%;  
                    width: 12px;
                    height: 12px;
                }

                /* Оформление радио-кнопки */
                .radio_vid_item + label:before {
                    content: '';
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;                                        
                    background: #999999;
                    transition: 0.3s;
                }

                .radio_vid_item:not(:disabled):not(:checked) + label:hover::before {
                    background: var(--color_line);
                }
                
                              

                /* Радио в состоянии неактивен */
                .radio_vid_item + label:after {
                    content: '';
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;  
                    background: var(--color2);
                    opacity: 0;
                    transition: 0.8s;                    
                }
                

                .radio_vid_item:checked + label:after {
                    opacity: 1;
                }


                .left_vid {   
                    text-align: center;
                    height: 20px;
                    width: 24px;
                    padding: 6; 
                    align-items: flex-start;                           
                    border: none;
                    background: none;                     
                    cursor: pointer;                     
                    z-index: 1;
                    margin-top: -3px;
                                       
                }
               
                .right_vid {   
                    text-align: center;
                    height: 20px;
                    width: 24px;
                    padding: 6;
                    align-items: flex-end;                            
                    border: none;
                    background: none;                     
                    cursor: pointer;  
                    margin-top: -3px;                    
                }
                .left_vid  svg {  
                    fill: #999999;  
                    z-index: -1;                   
                }
                .right_vid svg {  
                    fill: #999999;                                            
                }
                
                .left_vid:hover  svg {  
                    fill: var(--color_line);                                           
                }
                .right_vid:hover svg {  
                    fill: var(--color_line);                                            
                }       

        .gallery_container {
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: center;
            background: var(--color2);            
        }
            .gallery_Block {
                display: flex;
                width: 100%;
                max-width: 1440px;
                flex-direction: column;
                overflow: hidden;
                height: 2200px;                                    
            }
            .gallery_Block::before {
                margin-top: -20%;
                top: 100%;
                position: relative;
                content: '';
                min-height: 14%;
                max-height: 14%;
                background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.616), rgba(0, 0, 0, 0.932), rgb(0, 0, 0));
                z-index: 3;
            }
            
                .gallery_Block_1 {
                    display: flex;
                    width: 100%;
                    flex-direction: column;                        
                }
                    .gallery_title {
                        margin-top: 75px;
                        color: var(--color1);
                        margin-bottom: 75px;                        
                    }
    
                  
                .gallery_Block_2 {
                    width: 100%;
                    display: flex; 
                    margin-top: 0px;
                    margin-bottom: 75px;
                    flex-wrap: wrap;                    
                    flex-direction: column;
                    row-gap: 24px;
                    column-gap: 36px;                    
                    height: 2900px;       
                }
                    
                .gallery_random {  
                    max-width: 456px;
                    width: 100%;
                    height: auto;                   
                    order: 0; 
                    transition: all 0.8s ease 0s;
                }
               
                .gallery_random>img { 
                    width: 456px;
                    height: auto;
                                                         
                }
                       
.parallax {
    
    height: 400px;
    width: 100%;
    background-image: url(assets/img/parallax.jpg);
    background-size: cover;
    background-position: center;   
    background-attachment: fixed;
}    


    .tickets_container {
        display: flex;
        width: 100%;           
        flex-direction: column;    
        align-items: center;
        background: var(--color1);
    }


        .tickets_Block {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 1440px;
            margin: 0px auto;
        }

            .tickets_Block_1 {                
                margin-top: 75px;        
                color: var(--color3); 
            }

            .tickets_Block_2 {
                width: 100%;
                height: 3px;
                margin-top: 25px;
                background-color: var(--color_line); 
                    
            }

            .tickets_Block_3 {         
                display: flex;
                margin-top: 0px;
                margin-bottom: 70px;
                flex-direction: row;  
                justify-content: space-between;          
            } 
                    .tickets_Block_3_1 {
                        max-height: 550px;
                        max-width: 720px;
                        width: 100%;
                        height: auto;
                        margin-top: 75px;                                               
                    } 
                    .tickets_Block_3_1 img{
                        height: auto;
                        width: 100%; 
                        object-fit: cover;                                              
                    } 


                    .tickets_Block_3_2 {
                        display: flex;
                        margin-top: 0px;           
                        width: 100%;        
                        justify-content: space-between;
                        color: var(--color2);
                    }     
                        .tickets_Block_3_2_1 {       
                            height: 211px;
                            width: 270px;
                            margin-top: 75px; 
                            margin-left: 60px;                            
                        }  
                        .tickets_Block_3_2_1>h4 {
                            display: flex;
                            margin-bottom: 50px;
                        }

                        .tickets_Block_3_2_2 {        
                            margin-top: 75px; 
                            width: 150px;                                  
                        }
              
                        .element-wrapper {
                            padding-bottom: 25px;
                        }
                        .element-wrapper>label {
                           font-family: 'Roboto', sans-serif;
                            font-style:normal;
                            font-size: var(--font2);
                            font-weight: 300;            
                            color: var(--color2);
                            transition: 0.5s;         
                        }
                        
                        .element-wrapper>label:hover {
                           color: var(--color3);
                        }
                        
                        
                        /* 
                        //////////////////////
                        Стилизация radio 
                        //////////////////////
                        */

                        .radio {
                            position: absolute;
                            z-index: -1;
                            opacity: 0;   
                        }

                        .radio + label {        
                            position: relative;
                            padding: 0 0 0 40px;
                            cursor: pointer;
                        }

                        /* Оформление радио-кнопки */
                        .radio + label:before {
                            content: '';
                            position: absolute;
                            top: 0px;
                            left: 1px;
                            width: 13px;
                            height: 13px;
                            border: 2px solid var(--color2);
                            border-radius: 50%;
                            background: var(--color1);
                        }

                        /* Радио в состоянии неактивен */
                        .radio + label:after {
                            content: '';
                            position: absolute;
                            top: 5px;
                            left: 6px;
                            width: 7px;
                            height: 7px;
                            border-radius: 50%;
                            background: var(--color2);
                            opacity: 0;
                            transition: 0.2s;
                            
                        }
                        

                        .radio:checked + label:after {
                            opacity: 1;
                        }

                        /* 
                        //////////////////////
                        //////////////////////
                        */

                        .tickets_Block_3_2_2>h4 {        
                            text-align: right;
                            padding-bottom: 18px;      	
                        }
                        .tickets_Block_3_2_2>div>h4 {
                            display: flex;
                            margin-left: -24px;
                            margin-top: 50px;
                        }
                        
                        .tickets_Block_3_2_2>p {
                            display: flex;
                            margin-top: 5px;
                            margin-bottom: 4px;        
                            font-family: 'Roboto', sans-serif;
                            font-style:normal;
                            font-weight: 300;
                            color: var(--color2);
                        }
                        .price {
                            margin-top: 50px;
                            display: flex;
                        }
                        .price>span { 
                            display: block;
                            width: 70px;
                            padding-top: 0px;
                            padding-bottom: 0px;
                            font-family: 'Roboto', sans-serif;
                            font-style:normal;
                            font-style: normal;
                            font-weight: bold;
                            font-size: var(--font3);
                            line-height: 33px;
                            letter-spacing: 1.65px;
                            margin-right: 20px;
                         
                        } 
                        .price>a {
                            display: flex;
                            width: 65px;
                            margin-left: 10px;
                            padding-top: 0px;
                            padding-bottom: 0px;
                            font-family: 'Roboto', sans-serif;
                            font-style:normal;
                            font-style: normal;
                            font-weight: bold;
                            font-size: var(--font3);
                            line-height: 33px;
                           
                        } 
                            
                        .button_add_sub {
                            display: flex;
                            flex-direction: row; 
                            margin-top: 14px;
                            margin-bottom: 10px;
                            width: 144px;
                            height: 44px;
                            border: 3px var(--color2) solid;                            
                            list-style: none;
                        }

                        .button_add_sub>button {
                            width: 46px;
                            height: 50px;
                            outline: none;
                            padding: 0;                            
                            font-family: 'Roboto', sans-serif;
                            font-style:normal;       
                            line-height: 37px;
                            font-size: var(--font3);
                            border: none;
                            background: none; 
                            color: var(--color2);
                            cursor: pointer;
                        }
                        .button_add_sub>button:hover {
                            opacity: 0.8;
                        }
                    
                        
                        .number {
                            all:unset;                            
                            width: 60px;      
                            text-align: center;
                            font-size: var(--font2);
                            color: var(--color2);
                            font-family: 'Roboto', sans-serif;
                            line-height: 26px;
                            margin-right: -10px;
                            padding-left: 5px;                                                      
                              
                        }

                        .button_buy {        
                            margin-top: 55px;
                            width: 175px;
                            height: 50px;
                            margin-left: -23px;        
                            appearance: none;
                            list-style:none;
                            border-radius: 2px;
                            background: var(--color2);
                            font-family: 'Roboto', sans-serif;
                            font-style:normal;
                            font-weight: 300;
                            font-size: var(--font2);
                            line-height: 26px;
                            letter-spacing: 2px;
                            color: var(--color1);
                            cursor: pointer;
                            transition: 0.8s;                  
                        }
                        
                        .button_buy:hover {
                            border: 1px var(--color3) solid;
                            background: var(--color3);
                            color: var(--color2);       
                        }
                        
                        .button_buy:active {
                            transform: scale(0.99);
                            transition: 0.2s;

                        }

    
    .contacts_container {
        display: flex;
        width: 100%;
        flex-direction: column;    
        align-items: center;
    }
            .contacts_Block {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 1440px;
                margin: 0px auto;  

            }
                .contacts_Block_1 {
                    margin-top: 72px;                
                    color: var(--color3);                             
                }

                .contacts_Block_2 {
                    width: 100%;
                    height: 3px;
                    margin-top: 25px;                    
                    background-color: var(--color_line);       
                }

                .contacts_Block_3 {
                    margin-top: 0px;
                    margin-bottom: 75px;
                    display: flex;
                    flex-direction: row;    
                    justify-content: space-between;             
                }
                    .contacts_Block_3_1 {
                        display: flex;                          
                        width: 285px;
                        height: 244px;
                        margin-top: 75px;        
                        justify-content: space-between;                      
                        
                    }
                    
                        .contacts_Block_3_1>div>div {
                            display: flex;
                            margin-top: 25px;
                            flex-direction: column;                            
                        }
                    
                        .contacts_Block_3_1>div>div>p {
                            margin-top: 25px;
                            margin-right: -50px;
                            padding-top: 0px;
                            margin-bottom: 0px;
                            font-family: 'Roboto', sans-serif;
                            font-style:normal;
                            font-weight: 300;
                            color: var(--color2);                                                          
                        }
                        .contacts_Block_3_1>div>div>p>a {
                            text-decoration: none; 
                            color: var(--color2);                                                          
                        }
                        .contacts_Block_3_1>div>div>p>a:hover {
                            text-decoration: underline; 
                            color: var(--color_line);                                                     
                        }


                .contacts_Block_3_2 {                                                          
                    max-width: 960px; 
                    width: 100%;               
                    margin-top: 75px;                    
                } 
                .contacts_Block_3_2 img{
                    height: auto;    
                    width: 100%; 
                    z-index: -1;
                    opacity: 0.1;                       
                }  

    .footer_container {
                width: 100%;
                display: flex;
                margin: 0px auto; 
                justify-content: center;
                align-items: center;  
                flex-direction: column;
                background: var(--color2);   
            }            
        
                .footer_Box {
                    display: flex;
                    width: 100%;
                    max-width: 1440px;
                    height: 265px;
                    margin: 0px auto;
                    justify-content:space-between;
                                     
                }
                .footer_Block {
                    display: flex;
                    width: 100%;
                    height: 150px;
                    margin: 0px auto; 
                    margin-top: 75px; 
                }
                    .footer_Block_1 {
                        display: flex;
                        height: 50px;
                        width: 195px;
                        align-items: center; 
                        cursor: pointer;
                        transition: 0.7s;                                                               
                    }
                    .footer_Block_1>a {
                        display: block;
                        position: absolute;
                        width: 195px;
                        height: 50px;
                        z-index: 1;                    
                    }

                    .footer_Block_1:hover svg {
                        fill: var(--color3);
                    }
                    .footer_Block_1:hover div {
                       color: var(--color3);
                    }

                        .footer_Block_1_1 {
                            display: flex;
                            margin-bottom: 0px;   
                            width: 49px;
                            height: 26px;
                            margin-right: 20px; 
                            align-items: center;                            
                        }
                        
                        .footer_Block_1_1>svg {
                            fill: var(--color1);
                            transition: 0.7s;                    
                        }  

                        .footer_Block_1_2 {
                            display: flex;
                            align-items: center; 
                            margin-left: 6px;
                            font-family: 'Forum', cursive;
                            font-style: normal;
                            font-weight: normal;
                            font-size: var(--font3);
                            line-height: 50px;
                            letter-spacing: 5px;
                            text-transform: uppercase;
                            color: var(--color1);
                            transition: 0.7s;        
                        }
                                
                    .footer_Block_2 {
                        display: flex;
                        max-width: 720px;
                        width: 363px;
                        height: 150px;
                        min-width: 0px;
                        margin-left: 145px; 
                    }  

                        .footer_Block_nav {
                            display: flex;
                            padding-top: 7px;
                            margin-left: -40px;
                            margin-top: 5px;
                            margin-bottom: 3px;
                            width: 100%;     
                            list-style: none;
                            flex-flow: column wrap;
                            gap: 25px 165px;
                        }
        
                            .footer_Block_nav>li>a {
                                vertical-align: middle;
                                padding-top: 10px;
                                list-style-type: inherit;                                
                                text-decoration: none;
                                font-style: normal;
                                letter-spacing: 2px;
                                font-weight: 200;
                                color: var(--color1); 
                                transition: 0.7s;     
                            }
                            
                            .footer_Block_nav>li>a:hover {
                                color: var(--color3);
                            }


                        .icon_link {
                            display: flex;
                            flex-direction: row;
                            width: 360px;
                            height: 48px;
                            margin-left: 340px;                       
                            margin-top: 88px;                            
                            align-items: center;
                            vertical-align: middle;                          
                            list-style:none;        
                        }

                        .icon_link>li {
                            display: flex;
                            height: 48px;
                            width: 48px;
                            margin-left: 21px;
                            border-radius: 50%;
                            border: 1px #666666 solid;
                            transition: 0.7s;       
                        }
                        .icon_link>li>a>svg {      
                            background-repeat: no-repeat;
                            /*margin-right: 1px;*/
                            fill:var(--color1);
                            transition: 0.7s; 
                        }
                        .icon_link>li:hover a>svg {
                            fill: var(--color3);
                            
                        }
                        .icon_link>li:hover {                            
                            border: 1px var(--color3) solid;                            
                        }
    .footer_line {                
        width: 100%;
        height: 3px;
        background: #666666;
    }
    .footer_add {  
        display: flex;
        width: 100%;
        max-width: 1440px;
        height: 124px;
        margin: 0px auto;  
        align-items: center;
        justify-content:space-between;        
    }

    .footer_add_text  {
        width: 305px;
        height: 22px;
        font-family: 'Roboto', sans-serif;
        font-size: var(--font2);                                
        text-decoration: none;
        font-style: normal;
        letter-spacing: 2px;
        font-weight: 200;
        color: var(--color1); 
    }
    
    .footer_add_text a {                                        
        text-decoration: none;
        color: var(--color1);
        transition: 0.7s;         
    }
    
    .footer_add_text a:hover {
        color: var(--color3);

    }

    .footer_position1 {
        text-align: left;
    }
    .footer_position2 {
        text-align: center;
    }
    .footer_position3 {
        text-align: right;
    }

    .popup {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
        opacity: 0;
        visibility: hidden; 
        transition: 0.5s;                     
    }

    .popup_body {
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center; 
    }
    .popup_content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 40px;
        width: 1440px;
        height: 845px;
        background: var(--color1);
        z-index: 12;
        position: relative;       
    }
    .popup_close {
        position: absolute; 
        right: 30px;
        top: 30px;
    }
    .popup_close svg {
        stroke:#030303; 
    }

    .popup_left {
        display: flex;
        flex-direction: column;        
        width: 400px;
        height: 663px;
    }
    .popup_logo svg {
        fill: var(--color3);
        width: 85px;
        height: 41px;        
    }
    .popup_title {
        height: 52px; 
        margin: 0;       
        font-family: 'Forum', cursive;
        font-style: normal;
        font-weight: normal;
        font-size: 50px;
        line-height: 55px;
        text-transform: uppercase;
        color: var(--color3);        
    }
    .popup_left span {
        display: block;
        color: var(--color_line);
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 21px;         
        margin-top: 15px;
    }
    .popup_line_left {
        display: block;
        width: 100%;
        height: 1px;
        border: 1px var(--color_line) solid;
        background-color: var(--color_line);
        margin-top: 10px; 
    }

   .datatime {
        display: flex;
        flex-direction: row;
        margin-top: 60px;
        justify-content: space-between;             
    }

    /*
    //////////////////
     Дата
    //////////////////
    */
    .dataBox { 
        width: 100%;
        height: 100%;;       
    }

    .data { 
        display: block;
        position: relative;    
        width: 189px;
        height: 44px;   
        outline: none;       
        padding: 0;
        margin: 0;
        text-align: center;
        border: 1px var(--color2) solid;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal; 
        font-size: var(--font1);                          
    }

    .labData{
        position: absolute; 
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: var(--font1);        
    }

    .labData::before {
        content: 'Data';
        position: relative; 
        z-index: 11;      
        left: 45px;
        top: 13px; 
        width: 80px;
        transition: 0.4s;     
    }
    .data::before { 
        padding: 0;
        width: 15px;
        height: 15px;
        position: relative;
        top: -3px;
        left: 15px;
        content: url('assets/svg/date.svg');
        transition: 0.4s;                    
    }
    .data::-webkit-calendar-picker-indicator {
        position:relative;
        right: 14px;       
        margin: 0;
        background: url('assets/svg/arrow.svg') no-repeat center;
        width: 15px;
        height:15px; 
        cursor: pointer;
        transition: 0.4s;              
    }

    .data:empty{
        color: var(--color1);       
    }
    .data:valid {
        color: var(--color2);        
    }
    .data:focus{
        color: var(--color2);        
    }
    .dataBox:hover .labData::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .dataBox:hover .data::-webkit-calendar-picker-indicator {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .dataBox:hover .data::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }

    /*
    //////////////////
     Время
    //////////////////
    */
    .timeBox { 
        width: 100%;
        height: 100%;
        margin-right: -16px;       
    }

    .time { 
        display: block;
        position: relative;    
        width: 190px;
        height: 44px;   
        outline: none;       
        padding: 0;
        margin: 0;
        text-align: center;
        border: 1px var(--color2) solid;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal; 
        font-size: var(--font1);                          
    }

    .labTime{
        position: absolute; 
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: var(--font1);           
    }

    .labTime::before {
        content: 'Time';
        position: relative; 
        z-index: 11;      
        left: 45px;
        top: 13px; 
        width: 100px;
        transition: 0.4s; 
           
    }
    .time::before { 
        padding: 0;
        width: 15px;
        height: 15px;
        position: relative;
        top: -3px;
        left: 15px;
        content: url('assets/svg/time.svg');
        transition: 0.4s;
    }
    .time::-webkit-calendar-picker-indicator {
        position:relative;
        right: 14px;       
        margin: 0;
        background: url('assets/svg/arrow.svg') no-repeat center;
        width: 15px;
        height:15px; 
        cursor: pointer;
        transition: 0.4s;             
    }

    .time:empty{
        color: var(--color1);       
    }
    .time:valid {
        color: var(--color2);        
    }
    .time:focus {
        color: var(--color2);        
    }
    .timeBox:hover .labTime::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .timeBox:hover .time::-webkit-calendar-picker-indicator {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .timeBox:hover .time::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    /*
    //////////////////
     Имя
    //////////////////
    */
    .nameBox {
        margin-top: 21px;
        width: 398px;
        height: 43px;
        
    }

    .nameBook {
        height: 41px;    
        width: 340px;        
        outline: none; 
        text-align: left;
        padding-left: 43px;
        padding-right: 15px;
        text-decoration: none;
        color: var(--color2);
        border: 1px var(--color2) solid;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal; 
        font-size: var(--font1);
    }
  
    .nameBook::-webkit-input-placeholder {
        color: var(--color2);
        transition: 0.4s;
    }
    .labName {
        position: absolute;
    }

    .labName::before { 
        padding: 0;
        width: 15px;
        height: 15px;
        position: relative;
        top: 15px;
        left: 15px; 
        content: url('assets/svg/name.svg');
        transition: 0.4s;  
    }
    .nameBox:hover .labName::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .nameBox:hover .nameBook::-webkit-input-placeholder {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    
    /*
    //////////////////
     Email
    //////////////////
    */
    .emailBox {
        margin-top: 22px;
        width: 398px;
        height: 43px;
        width: 100%;
    }

    .emailBook {
        height: 41px;    
        width: 340px;        
        outline: none; 
        text-align: left;
        padding-left: 43px;
        padding-right: 15px;
        text-decoration: none;
        color: var(--color2);
        border: 1px var(--color2) solid;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal; 
        font-size: var(--font1);
    }
  
    .emailBook::-webkit-input-placeholder {
        color: var(--color2);
        transition: 0.4s;
    }
    .labEmail {
        position: absolute;
    }

    .labEmail::before { 
        padding: 0;
        width: 15px;
        height: 15px;
        position: relative;
        top: 15px;
        left: 15px; 
        content: url('assets/svg/e-mail.svg');
        transition: 0.4s;  
    }
    .emailBox:hover .labEmail::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .emailBox:hover .emailBook::-webkit-input-placeholder {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    /*
    //////////////////
     Phone
    //////////////////
    */
    .telBox {
        margin-top: 22px;
        width: 398px;
        height: 43px;
        width: 100%;
    }

    .telBook {
        height: 41px;    
        width: 340px;        
        outline: none; 
        text-align: left;
        padding-left: 43px;
        padding-right: 15px;
        text-decoration: none;
        color: var(--color2);
        border: 1px var(--color2) solid;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal; 
        font-size: var(--font1);
        transition: 0.4s;
    }
  
    .telBook::-webkit-input-placeholder {
        color: var(--color2);
    }
    .labTel{
        position: absolute;
    }

    .labTel::before { 
        padding: 0;
        width: 15px;
        height: 15px;
        position: relative;
        top: 10px;
        left: 15px; 
        content: url('assets/svg/tel.svg');
        transition: 0.4s;  
    }
    .telBox:hover .labTel::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .telBox:hover .telBook::-webkit-input-placeholder {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    /*
    //////////////////
     typeTicket
    //////////////////
    */
    .typeTicketBox {
        margin-top: 22px;
        width: 398px;
        height: 43px;
        width: 100%;
    }

    .typeticket {
        height: 46px;    
        width: 400px;        
        outline: none; 
        text-align: left;
        padding-left: 43px;
        padding-right: 15px;
        text-decoration: none;
        appearance: none;
        color: var(--color2);
        border: 1px var(--color2) solid;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal; 
        font-size: var(--font1);
        cursor: pointer;
        transition: 0.4s;   
            
    }
    .labTicket {
        position: absolute;
    }

    .labTicket::before { 
        padding: 0;
        width: 15px;
        height: 15px;
        position: relative;
        top: 12px;
        left: 15px; 
        content: url('assets/svg/ballot.svg');
        transition: 0.4s;  
    }
    .labTicket::after { 
        padding: 0;
        width: 15px;
        height: 15px;
        position: relative;
        top: 15px;
        left: 353px;        
        content: url('assets/svg/arrow.svg');
        transition: 0.4s;  
    }
    .typeTicketBox:hover .labTicket::before {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .typeTicketBox:hover .labTicket::after {
        filter:invert(50%) sepia(100%) hue-rotate(340deg) brightness(50%);
    }
    .typeTicketBox:hover .typeticket{
        color: var(--color3);
    }
    .typeTicketBox:focus-within .typeticket{
        color: var(--color2);
    }
    .entryTicketBox {
        display: flex;
        flex-direction: column;
        margin-top: 22px;
        width: 368px;
        height: 118px;
        border: 1px var(--color2) solid;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;    
        
    }
    .entryTitle {
        margin-bottom: 5px;
        margin-top: 8px;
        width: 108px;
        height: 18px;
        color: var(--color3);
        font-family: 'Forum', cursive;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;        
        text-transform: capitalize;
        text-align: left;
    }
    .entryLine {        
        width: 100%;
        height: 0.1px;        
        border: 1px var(--color_line) solid;
    }

    .entryPerson {        
        margin-top: 15px;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%; 
    }
    .age {
        display: flex;
        width: 50%;
        height: 80px;
        flex-direction: column;
        justify-content: space-between;
                        
    }
    .age>span {       
        display: block;
        margin-top: 5px;
        margin-bottom: 10px;
        height: 20px;
        width:140px;
        color: var(--color2);        
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal; 
        font-size: var(--font1);       
    }
    .count {
        display: flex;
        width: 50%;
        height: 100%;
        align-items: flex-end;        
        flex-direction: column;
        justify-content: space-between;
    }

    .countbtn {
        display: flex;
        flex-direction: row;
        justify-content: space-between; 
        width: 103px;
        height: 23px;
        border: 1px var(--color2) solid;
        vertical-align:middle;
        margin-bottom: 10px;
    }
    .countbtn>button {
        width: 33px;
        height: 23px;
        outline: none;
        padding: 0;                            
        font-family: 'Roboto', sans-serif;
        font-style:normal;
        font-size: var(--font1);
        border: none;
        background: var(--color2); 
        color: var(--color1);
        cursor: pointer;
    }
    .countbtn>button:hover {
        opacity: 0.8;
    }

    .number_count {
        all:unset;                                    
        width: 35px;
        margin-left: 5px;
        margin-right: -5px;
        align-items: center;     
        text-align: center;
        font-size: var(--font1);
        color: var(--color2);
        font-family: 'Roboto', sans-serif; 
    }

    .popup_right {
        display: flex;
        flex-direction: column;        
        width: 470px;
        height: 615px;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 25px;
        padding-bottom: 25px;
        border: 1px var(--color2) solid; 
        /*background-image: url(assets/img/payment.png); */
        background-size: cover;     
    }
       
        .overview{            
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            height: 151px;
                 
        }
        .overimg{
            background-image: url(assets/img/img-modal.png);
            width: 150px;
            height: 120px;
            background-size: cover;
        }
        .over_title{
            font-family: 'Roboto', sans-serif; 
            line-height: 37px;
            font-size: 32px;
            color: var(--color2);
        }
        .over_title2{
            font-family: 'Roboto', sans-serif; 
            margin-top: 2px;
            margin-bottom: 10px;
            line-height: 26px;
            font-size: 21px;
            color: var(--color_line);
        }
        .over_text {
            font-family: 'Roboto', sans-serif;
            font-style:normal;
            font-weight: 300;
            height: 21px;
            font-size: 18px;
            color: var(--color2);
            margin-bottom: 5px;
        }
        .icon1::before {
            position: relative;
            left: 0;
            top: 0;
            margin-right: 15px;
            content: url(assets/svg/date.svg);
        }
        .icon2::before {
            position: relative;
            left: 0;
            top: 0;
            margin-right: 15px;
            content: url(assets/svg/time.svg);
        }
        .icon3::before {
            position: relative;
            left: 0;
            top: 0;
            margin-right: 15px;
            content: url(assets/svg/check_circle_outline.svg);
        }
        


         .basic{
            display: flex;
            flex-direction: row;
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 22px;
            line-height: 26px;
            margin-top: 22px;
            width: 100%;
            height: 26px;
        }
        .basic>div {
            width: 200px;
            margin-right: -200px;
        }
        .senior>div {
            width: 200px;
            margin-right: -200px; 
        }

        .sum_price {
            display: block;
            width: 100%;
            text-align: right;           
        }
     
        .senior{
            display: flex;
            flex-direction: row;
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 22px;
            line-height: 26px;
            margin-top: 5px;
            width: 100%;
            height: 26px;
        }
        .count_tic {            
            margin-top: 2px;
            margin-right: 10px;
            text-align: center;
            width: 45px;
            height: 20px;
            border: 1px var(--color2) solid;
            background-color: var(--color2);
            color: #A4A4A3;
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            border-radius: 3px;            
        }
      
       

        .line{
            margin-top: 9px;
            width: 100%;
            height: 2px;
            background-color: var(--color_line);
            margin-bottom: 1px;
        }
        .total_price{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 32px;
            line-height: 37px;
            margin-top: 10px;
            width: 100%;
            height: 38px;
        }
        .bank_card{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 10px;
            width: 100%;
            height: 241px;
        }

        .card_face{     
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-radius: 5px;       
            width: 360px;
            height: 201px;
            padding-top: 10px;
            margin-right: -300px;
            background-color: #BCBCBC;
            box-shadow: 0 7px 15px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
        }

        .card_face span {
            color: var(--color2);
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            line-height: 14px;
            margin-top: 10px;
            margin-bottom: 5px;
            height: 13px;
        }
        .card_face .input {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
        }
        
        .card_number{
            height: 33px;
            width: 213px;            
        }
        .card_number input {
            outline: none;
            border: none;
            object-fit: cover;
            height: 100%;
            width: 100%;
        }
   
        .card_data{
            display: flex;  
            flex-direction: row;
            justify-content: space-between;
            outline: none;
            height: 33px;
            width: 213px; 
        }
        

        .card_month {            
            height: 33px;
            width: 88px;
        }
        .card_year {            
            height: 33px;
            width: 88px;
        }
        .card_data input {
            outline: none;
            border: none;
            padding-left: 10px;
            object-fit: cover;
            height: 100%;
            width: 100%;
        }
        .card_cardholder {
            height: 33px;
            width: 318px;
            margin-right: -105px;
        }
        .card_cardholder input {
            outline: none;
            border: none;
            object-fit: cover;
            height: 100%;
            width: 100%;
        }


        .card_face .img {
            margin-top: 34px;
            margin-right: 20px;
            width: 55px;
            display: flex;
            flex-direction: column;            
        }
        .visa{
            margin-top: -10px;
            width: 55px;
            height: 16px;
            background-size: cover;
            background-image: url(assets/svg/Visa.svg);
        }
        .master{
            margin-top: 15px;
            width: 53px;
            height: 32px;
            background-size: cover;
            background-image: url(assets/svg/Mastercard.svg);
        }
        
        .card_back{
            border-radius: 5px;
            margin-top: 30px;
            width: 360px;
            height: 211px;
            background-color: #939393;
            
            z-index: -1;
        }
        .line_black {
            margin-top: 25px;
            margin-bottom: 15px;
            height: 45px;
            width: 100%;
            background-color: var(--color2);
        }

        .card_back span {
            display: block;
            position: static;
            color: var(--color2);
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: normal;
            width: 57px;
            margin-left: 273px;           
        }
        .CVC_text1 {
            font-size: 12px;
            line-height: 14px;
        }
        .CVC_text2 {
            font-size: 10px;
            line-height: 12px;
        }
       
        .CVC_CVV {
            position: relative;
            margin-left: 265px;
            height: 33px;
            width: 73px;
            margin-top: 5px;
            margin-bottom: 8px;
            margin-right: -105px;
        }

        .CVC_CVV input {
            outline: none;
            border: none;
            object-fit: cover;
            height: 100%;
            width: 100%;
            z-index: 1;
        }
        

        .btnBook {
           display: table-cell;
           vertical-align: middle;
            margin-top: 34px;
            width: 220px;
            padding-top: 8px;
            height: 37px;
            background-color: var(--color_line);
            color: var(--color1);
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: 300;
            font-size: 22px;
            text-align: center;
            align-self: flex-end;
            transition: 0.3s;
        }
        .btnBook:hover {
            background-color:var(--color3);
            cursor: pointer;
        }
        
        input[type='email']:valid {
            border: 1px solid green;
        }
        input[type='text']:valid {
            border: 1px solid green;
        }
        input[type='number']:valid {
            border: 1px solid green;
        }
        input[type='tel']:valid {
            border: 1px solid green;
        }
                            
        input[type='email']:invalid {
            border: 1px solid red;
        }
        input[type='text']:invalid {
            border: 1px solid red;
        }
        input[type=number]:invalid {
            border: 1px solid red;
        }
        input[type=tel]:invalid {
            border: 1px solid red;
        }