.buttonPages_5_6{
    grid-template-areas: 
    "button_up"
    "button_down";  
    margin-left: 10vw;
    visibility: hidden;
   
}
.button_down{
    grid-area: button_down;
    width: 25px;
    height: 25px;
    align-self: center;
    margin-top:100px;
    cursor: pointer;
   
}

.button_up{
    grid-area: button_up;
    width: 25px;
    height: 25px;
    align-self: center;
    margin-top:350px;
    cursor: pointer;
}

.button_down:hover{
    width:30px;
}
.button_up:hover{
    width:30px;
}

.page__5{
    visibility: hidden;
    margin-top: 986px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    z-index: -2; 
    grid-template-areas: 
    "HedingText"
    "text_p5";  
    width: 45vw; 
    display: none;
}

.contener1,.contener2,.contener3,.contener4,.contener5,.contener6,.contener7,.contener8,.contener9{
    position: absolute;
    visibility: hidden;
 
}

.heading1,.heading2,.heading3,
.heading4,.heading5,.heading6,
.heading7,.heading8,.heading9{
grid-area: HedingText;
display: grid;
width: 58vw;
margin-bottom: 30px;

}
.text1,.text2,.text3,.text4,.text5,.text6,.text7,.text8,.text9{
 grid-area: text_p5; 
 width: 58vw;
 margin-bottom: 30px;
 
}
.line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8{   
border-bottom: 1px ;
width: 58vw;
margin-left: 0px;

}

.HedingText{
font-style: normal;
font-weight: 500;
font-size: 49px;
line-height: 102.5%;
color: #333333; 
}
.text_p5{
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 24px;
color: #333333;
}

.promt,.promt_5{    
    grid-area:promt;
    width: 25px;
    z-index: 600; 
    justify-self: end;
    margin-top: -35px;
    padding-right: 40px;
    z-index: 200; 
  
}

.promt_text{   
   opacity: 1;

}
.promt:hover + .promt_text{
    transition: 1.2s;
 
    opacity: 1;
    visibility:visible;
   
}

.promt_text_5{
    grid-area:promt_text_5;
    opacity: 0;
    width: 255px;
    visibility: hidden; 
    margin-top: -190px;
    right: 395px;
    justify-self: end;
}
.promt_5:hover + .promt_text_5{
    transition: 1s;
    z-index: 200;
    opacity: 1;
    visibility:visible;
}
.baton_LP{
    grid-area:baton_LP;
    display: flex;
    width: 160px;
    height: 60px;
    border: 1px solid #333333;
    justify-content: center;
    align-items: center;
    margin-top: -50px;
    justify-self: end;
    margin-right: 8px;
}
.baton_LP:hover{   
    color:#FFFFFF;
    transition: 0.7s;
    background: #00C753;
    cursor: pointer;
    border:0px;
    z-index: 1000;
}

.text9{
    grid-area:text9;
    display: grid;
 
}
.heading9{ 
    grid-area:heading9;
    color: #3D37CD;
 
}
.finish{  
    display: none;
}

.masaick_5{
    visibility: hidden;
    margin-right:14vw;
    position: absolute;
    margin-top: 986px;
    display: none;
}

#masaic_5_0,#masaic_5_1,#masaic_5_2,#masaic_5_3,
#masaic_5_4,#masaic_5_5,#masaic_5_6,#masaic_5_7,
#masaic_5_8,#masaic_5_9,#masaic_5_10,#masaic_5_11,
#masaic_5_12,#masaic_5_13{
    position: absolute; 
    width: 280px;
    visibility: hidden;
}

#masaic_5_0{  
    z-index: 2; 
}
#masaic_5_1{
    margin-left: 40px;
    z-index: -1;
}
#masaic_5_2{
  
    margin-left: 98px;
}
#masaic_5_3{
    margin-left:182px;
}
#masaic_5_4{
    z-index: -2;
    margin-left: 26px;
}
#masaic_5_5{
    margin-left: -26px;
    z-index: 2;
}
#masaic_5_6{ 
    margin-left: 98px;
}
#masaic_5_7{
    margin-left: 183px;
}
#masaic_5_8{
    margin-left: -26px;
}
#masaic_5_9{
    margin-left: 140px;
}
#masaic_5_12{
    margin-left: 113px;
}
#masaic_5_13{
    margin-left:168px;
}


@media (min-width: 500px) and (max-height:800px){
    .buttonPages_5_6{
        grid-template-areas: 
        "button_up"
        "button_down";  
        left: 5vw;
        visibility: hidden;
        max-height: 900px;
        position: absolute;
        left: 0px;
    }
    .button_down{
        grid-area: button_down;
        width: 25px;
        height: 25px;
        align-self: center;
        top:80px;
       
    }
    .button_up{
        grid-area: button_up;
        width: 25px;
        height: 25px;
        align-self: center;
        top:80px;
    }


    #masaic_5_0,#masaic_5_1,#masaic_5_2,#masaic_5_3,
    #masaic_5_4,#masaic_5_5,#masaic_5_6,#masaic_5_7,
    #masaic_5_8,#masaic_5_9,#masaic_5_10,#masaic_5_11,
    #masaic_5_12,#masaic_5_13{
        position: absolute; 
        width: 330px;
    }
 }

@media (max-width: 767px ){
    .page__5{    
        width: 80vw; 
        position: fixed;
    }  
    .promt,.promt_5,.promt_text_5{
        display: none;      
    }
    .masaick_5{
       display: none;     
    }
    
    .heading1,.heading2,.heading3,
    .heading4,.heading5,.heading6,
    .heading7,.heading8,.heading9{
    
        width: 90vw;
    }
    .text1,.text2,.text3,.text4,.text5,.text6,.text7,.text8,.text9{  
     width: 90vw;
 
    }
    .line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8{   
        width: 90vw;
    }
    .buttonPages_5_6{
     
        position: absolute;
      
        left:-50px;
        z-index: 300;
  
    }
    .baton_LP{
        z-index: 1000;
    }

     .text9,.heading9{
        width: 70vw;
        margin-right:auto;
        z-index: 100;
    }
   
}
@media (max-width: 490px ){
    .buttonPages_5_6{
        display: none;
    }
    .page__5{  
        display: block;  
        width: 100vw; 
        position: fixed;
    } 

        .masaick_5{
            display: grid;
            position: fixed;
            grid-row: 1 / 3;
            grid-column: 2/ 3; 
            right: 20vw; 
          }
          .contener1,.contener2,.contener3,.contener4,.contener5,.contener6,.contener7,.contener8,.contener9{
         
            visibility: visible;  
            opacity: 0;       
        }

          #masaic_5_0,#masaic_5_1,#masaic_5_2,#masaic_5_3,
          #masaic_5_4,#masaic_5_5,#masaic_5_6,#masaic_5_7,
          #masaic_5_8,#masaic_5_9,#masaic_5_10,#masaic_5_11,
          #masaic_5_12,#masaic_5_13{
           position: absolute;         
           width: 36px;
           height: 36px;
           z-index: 10;
          }
    .heading1,.heading2,.heading3,
    .heading4,.heading5,.heading6,
    .heading7,.heading8,.heading9{
        font-weight: 500;
        font-size: 24px;
        line-height: 102.5%;
        width: 50vw;
        padding-left: 15px;
      
    }
    .text1,.text2,.text3,.text4,.text5,.text6,.text7,.text8,.text9{  
        width: 90vw;
     font-weight: 300;
     font-size: 13px;
     line-height: 21px;
     padding-left: 15px;
     margin-bottom:5px ;
    }
    .line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8{   
        width: 90vw;
        margin-left: 15px;
    }

    #masaic_5_0{  
        z-index: 2; 
        margin-left:10px;
      
    }
    #masaic_5_1{
        margin-left:29px;
        z-index: -1;
        width: 34px;
    }
    #masaic_5_2{
        margin-left:50px;
        width: 34px;
    }
    #masaic_5_3{
        margin-left:83px;
        width: 34px;
    }
    #masaic_5_4{
        z-index: -2;
        margin-left:29px;
        width: 21px;
    }
    #masaic_5_5{
        margin-left:9px;
        z-index: 2;
        width: 21px;
    }
    #masaic_5_6{     
        margin-left:50px;
        width: 34px;
    }
    #masaic_5_7{
        margin-left:83.4px;
        width: 34px; 
    }
    #masaic_5_8{
 
        margin-left:9px;
        width: 21px;
    }
    #masaic_5_9{
        margin-left: 50px;
        width:70px;
        
    }
    #masaic_5_10{
        margin-left: 10px;
    }
    #masaic_5_11{
        margin-left:10px;
    }
    #masaic_5_12{
        margin-left: 50px;
    }
    #masaic_5_13{
        margin-left:84px;
    }
  
    .text9,.heading9{
        width: 85vw;     
        z-index: 100;
        margin-left: 1vw;
    }

    .heading9{
        width: 65vw;  
    }
}
@media (max-width: 320px ){
    #masaic_5_0,#masaic_5_1,#masaic_5_2,#masaic_5_3,
    #masaic_5_4,#masaic_5_5,#masaic_5_6,#masaic_5_7,
    #masaic_5_8,#masaic_5_9,#masaic_5_10,#masaic_5_11,
    #masaic_5_12,#masaic_5_13{
    left: -10px;
    }

    .heading1,.heading2,.heading3,
    .heading4,.heading5,.heading6,
    .heading7,.heading8,.heading9{
        font-weight: 500;
        font-size: 18px;
        line-height: 102.5%;
        width: 50vw;
        padding-left: 15px;
    }
    .text1,.text2,.text3,.text4,.text5,.text6,.text7,.text8,.text9{  
     width: 90vw;
     font-weight: 300;
     font-size: 10px;
     line-height: 17px;
     padding-left: 15px;    
    }
    .line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8{   
        width: 90vw;
        margin-left: 15px;
    }
}


@media (min-width: 768px) {
    .page__5{
        width: 650px;     
    }  
    .masaick_5{
        right: 0px;
    }
    .masaick_5{
        margin-right:27%;
        position: absolute;
        width: 20px;
    }  
    .buttonPages_5_6{   
        margin-left: 4vw;
    }
    .heading1,.heading2,.heading3,
    .heading4,.heading5,.heading6,
    .heading7,.heading8,.heading9{
    
        width: 59vw;
    }
    .text1,.text2,.text3,.text4,.text5,.text6,.text7,.text8,.text9{  
        width: 59vw;
       }
       .line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8{   
        width: 59vw;
    }
}
@media (min-width: 992px) { 
    .page__5{
        width: 650px;
    }
  
    .heading1,.heading2,.heading3,
    .heading4,.heading5,.heading6,
    .heading7,.heading8,.heading9{
    
        width: 55vw;
    }
    .text1,.text2,.text3,.text4,.text5,.text6,.text7,.text8,.text9{  
     width: 55vw;
    }
    .line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8{   
        width: 55vw;
    }
}
@media (min-width: 1200px) { 
    .page__5{
        width: 800px;
    }
   
}
@media (min-width: 1450px) {      
    .page__5{
        width: 800px;
    }
 
    .masaick_5{        
        right: 200px;
    }
    .masaick_5{      
        margin-right:14vw;    
        }
    
    .heading1,.heading2,.heading3,
    .heading4,.heading5,.heading6,
    .heading7,.heading8,.heading9{
    max-width: 800px;
    width: 41.6vw;

    }
    .text1,.text2,.text3,.text4,.text5,.text6,.text7,.text8,.text9{ 
        max-width: 800px; 
     width: 41.6vw;
    }
    .line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8{  
        max-width: 800px; 
    width: 41.6vw;
    }
    .buttonPages_5_6{
        grid-template-areas: 
        "button_up"
        "button_down";  
        margin-left: 10vw;
      
    }
    .button_down{
        grid-area: button_down;
        width: 25px;
        height: 25px;
        align-self: center;
        margin-top:100px;
       
    }
    .button_up{
        grid-area: button_up;
        width: 25px;
        height: 25px;
        align-self: center;
        margin-top:400px;
    }
}


@media (max-width: 1200px ){
    .promt,.promt_5,.promt_text_5{     
        position: static;
        visibility: hidden;
        margin-left: -1000px;
    }
}