.pica img:nth-of-type(1){position:absolute;  top: 200px; left:15%;  animation-name:transla; animation-duration:10s; z-index:100; opacity:0;}
    .pica img:nth-of-type(2){position:absolute;  top: 200px; right:15%; animation-name:rota; animation-duration:10s; z-index:100; opacity:0;}
    .pica img:nth-of-type(3){position:absolute;  top: 100px; left:15%; animation-name:transforX; animation-duration:10s; z-index:100; opacity:0;}
    .pica img:nth-of-type(4){position:absolute;  top: 100px; right:15%; animation-name:transforY; animation-duration:  10S; z-index:100 ;opacity:0;}
    .pica img:nth-of-type(5){position:absolute;  top: 300px; left:15%; animation-name:translat; animation-duration:  10S; z-index:100;opacity:0;}
     
.pica img{ width:60px; height:60px; border-radius:50%; border:3px solid yellow; z-index:100;overflow-x: hidden; display:grid;}
.pica{overflow-x:hidden;}
#carousel-container{ box-shadow :inset -10px -10px 0 0 goldenrod,
                    inset 10px 10px 0 0 goldenrod;}
                    body{overflow-x: hidden;}
@keyframes  transla{
    10% {
        transform:translateX(190px)translateY(10px)scale(0);
        opacity: 0.3;
    }
    100% {
        transform: translateX(30px) translateY(90px) scale(1);
        opacity: 1;
    }
}
@keyframes transforX {
    10% {
        transform: translate(0) scale(0);
        opacity: 0.3;
    }
    100% {
        transform: translateY(90px) translateX(30px) scale(1);
        opacity: 1;
    }
}
@keyframes transforY {
    10% {
        transform: translateY(-30px)translateY(10px) scale(0);
        opacity: 0.3;
    }
    100% {
        transform: translateX(-30px)translateY(155px) scale(1);
        opacity: 1;
    }
}
@keyframes rota{ 
    10% {
        transform: translateX(10px)translateY(-30px) scale(0);
        opacity: 0.3;
    }
    100% {
        transform: translateX(15px) translateY(-40px) scale(1);
        opacity: 1;
    }
}
@keyframes translat{ 
    0% {
        transform: translateY(30px) translateX(-50px) scale(0);
        opacity: 0.3;
    }
    100% {
        transform: translateY(190px) translateX(100px)  scale(1);
        opacity: 1;
    }
}
body {
    overflow-x: hidden;
}

   		


#carousel-container{ box-shadow :inset -10px -10px 0 0 goldenrod,
                    inset 10px 10px 0 0 goldenrod;}

.h1duo{ margin-top:10px; height:auto;width:100%;z-index:-1; font-size:30px;font-style: italic;
    border:5px solid rgb(106, 92, 11);animation-name:color;animation-duration:10s;}
.dno{padding:8px;}
.finish{color:red;font-size:18px;background-color:white;
    z-index:1500;font-weight: bold; border:3px solid red; text-align:center;font-style: italic;}
.about-us-text{text-align:center;}		
.pa{text-align:center; font-weight: bold;}
.ha{font-size:20px;text-align:center; font-weight: bold;}
.pa:hover{border:3px solid red; background-color:yellow;color:red;}
 .svg{ right:7px; position:absolute; top:20px; }
 .svg img{ border:3px solid red;
        border-radius:50%;}
        .redcolor{font-weight:bold;color:rgb(120, 113, 23);font-size:20px;}
.button{ text-decoration: none;
  
    border: 3px solid rgb(125, 22, 22);
    
      border-radius:10%;padding:5px; 
     font-weight: bold;
      background-color:white;
      color:black; 
      animation-name:transform;
      animation-duration:8s; }
 .cop{border:3px solid white; border-radius:10px 15px 10px 15px;color:yellow; font-weight: bold;;
box-shadow:inset 5px 5px 2px  1px rgb(168, 165, 165),
inset -5px -5px 2px 1px rgb(168, 165, 165); padding:5px; font-size:16px;font-style: italic;
 padding:5%;}

.video-container{margin-top:40%;  border-radius:35px 15px 35px 15px; position:relative;border:5px solid rgb(118, 104, 28);
     }
div .hop{display:grid; gap:10px;}
 .hop label{font-size:25px; color:white; z-index:2000;}
.dropdown-content a{padding:10px; color:red; border:3px solid gray; background-color:yellow; }
.img{width:100%; height:auto; z-index:-3;position:absolute; top:0; left:0; right:0;}

.dropdown {
        position: relative;
        display: inline-block;
      }
  
.dropdown-content {
        display: none;
        position: absolute;
        background-color:white;
        min-width: 100px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }
 .asideone{border:3px solid white;position:fixed;right:20px; top:200px; display:grid; z-index:1000;}
.dropdown:hover .dropdown-content {
        display: grid;
      }
.dark:hover{min-width:100px;}
 h1{ color:yellow; text-align:center; background-color:rgb(109, 9, 9); 
   text-shadow:1px 1px 1px black; font-size: 25px;}
@keyframes transform{ 10%{transform:rotate(10deg);} 20%{transform:rotate(-10deg);} 30%{transform:rotate(10deg);}
      40%{transform:rotate(-10deg); }
     50%{transform:rotate(10deg);} 60%{transform:rotate(10deg);}70%{transform:rotate(-10deg);}80%{transform:rotate(-10deg);}
     90%{transform:rotate(-10deg);}100%{transform:rotate(-10deg);}}
.heX{text-align:center; font-style:italic;text-shadow:2px 1px 0px red;text-decoration:underline; }
.light-theme{ color: #333333;
     background-color:yellow;
   }
   body{background-color:gold;overflow-x:hidden;
   }
.p{text-align:center; color:red;}
.push{width:120px; height:150px;}
.tush{width:280px; height:400px; border:6px solid red;}
.pens{display:flex; gap:15px; justify-content:space-around; margin:auto;flex-wrap:wrap;margin:auto;padding:20px;}
   
.lenstwo{display:flex; gap:15px; justify-content:space-around; margin:auto;flex-wrap:wrap;margin:auto;padding:20px;}
.lens{display:flex; gap:15px; justify-content:space-around; margin:auto;flex-wrap:wrap;margin:auto;padding:20px;}
.mens{display:flex; gap:15px; justify-content:space-around; margin:auto;flex-wrap:wrap;margin:auto;padding:20px;}
.spanduo{color:rgb(46, 34, 5); font-style:italic;font-size:18px;font-family: Georgia,
     serif; animation-name:color; animation-duration:8s; animation-delay: 8s;}
     
.animate{font-size:25px; color:white;text-align:center; font-weight: bold; text-shadow:none; font-style: italic; animation-name:color; animation-duration:8s;}
 
 @keyframes color{0%{color:red;} 20%{color:black;}40%{color:blue;} 60%{color:red;}80%{color:rgb(91, 68, 9)}
 100%{color:rgb(50, 43, 6);}}
.pas{margin-left:25%;margin-top:3%;border:3px solid red;}
.tri{ margin-left:25%;margin-top:-40%;border:3px solid red;}
.dva{margin-left:3%;margin-top:-30%; border:3px solid red;}
.telega::before{display:none; margin-top:0px; position:absolute;color:black;font-size:18px; font-weight: bold ; content:"Нажмите на фото, чтобы выбрать ⇘"; 
    }

 h2{color:red; font-style:italic; font-weight: bold;}
   
.asidewoman{position:fixed; top:23%; right:20px; width:30px; height:auto; display:grid;gap:10px; border:3px solid red;background-color:none;}
 form::before{display:none; margin-top:0px; position:absolute;color:black;font-size:18px; font-weight: bold ; content:"Нажмите на фото, чтобы выбрать ⇘"; z-index:1000; 
        transform: translateX(10px);animation-name:translate;animation-duration:15s;}
.point::before{display:none; margin-top:0px; position:absolute;color:black;font-size:18px; font-weight: bold ; content:"Нажмите на фото, чтобы выбрать ⇘"; z-index:1000; 
            transform: translateX(10px);animation-name:translate;animation-duration:15s;}
 @keyframes translate{10%{transform:translateX(-10px);} 30%{transform:translateX(130px);} 
        50%{transform:translateX(10px);} 60%{ transform:translateX(150px)} 80%{transform:translateX(20px);}
         100%{transform:translateX(160PX);}} 
 .form{ display:flex; flex-wrap:wrap; gap:20px;  margin:auto;}
.basket{position:fixed; top:70px; left:20%;width:60px;height:60px; display:none;z-index:1400;}
.bask{animation-name:rotate; animation-duration:6s; z-index:1500;width:50px; height:70px;}
 @keyframes rotate{10%{transform:rotate(15deg);}10%{transform:rotate(15deg);}
         30%{transform:rotate(-15deg);}50%{transform:rotate(15deg);}70%{transform:rotate(-15deg);}
         70%{transform:rotate(15deg);}100%{transform:rotate(1deg);}}
.iframe{border-radius:25px 15px 25px 15px ; border:3px solid white;
            box-shadow:inset 7px 7px 0 0 white,
           -7px -7px 0 0 white;}

 .absolute { position:absolute; z-index:1;display:grid;gap:10px;top:13%;}
.absolute p{ border: 3px solid rgb(125, 22, 22); background-color:white ; padding:3px; border-radius:5%; font-size:15px;color:black;}
 .absolute img{border:3px solid red; border-radius:50%; margin:auto;
             animation-name:rotatik; animation-duration:10s;width:50px; height:50px; margin-left:20%;}
 @keyframes rotatik{10%{transform:rotate(30deg);} 20%{transform:rotate(90deg);}30%{transform:rotate(180deg);}
            40%{transform:rotate(270deg);}50%{transform:rotate(360deg);}60%{transform:rotate(30deg);} 70%{transform:rotate(90deg);}
            80%{transform:rotate(180deg);}
            90%{transform:rotate(270deg);}100%{transform:rotate(360deg);}}
           
 #products{margin:0;background-color:gold; z-index:10;
    box-shadow:10px 10px 0 3px gold,
-10px -10px 0 3px gold; padding:10px;}
#products p{padding:10px;}

.bod{ margin:auto; color:red; font-size:16px; }
.bodi{ color:red; font-size:16px;}



.finishbutton{z-index:1500;}
.dropdown {
              position: relative;
              display: inline-block;
            }
        
.dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              min-width: 250px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }
        
.dropdown:hover .dropdown-content {
              display: grid;
            }
.photobar{display:flex;flex-wrap:wrap; padding:10px; justify-content: center;margin:20px;}
            form img{width:140px;height:auto;margin:auto; }
            
                     
.rup{display:grid;}
.gat{margin:auto; padding:20px;gap:10px;}
 @media only screen and (max-width: 700px) {
.video-container{margin-top:60%;overflow-x: hidden;}


            
                    /* Media query for screens with a maximum width of 600px (adjust as needed) */
                    .bod { width:50px;
                        display: none; /* Hide the 'bod' class on smaller screens (e.g., phones) */
                    }}
 @media only screen and (min-width: 700px) { .img{margin-top:-10%;} .video-container{margin-top:30%;} .short-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.full-text {
    display: none;
}
}
                    
                    
                    @media only screen and (min-width: 900px) { .img{margin-top:-10%;}
                     
                     .video-container{margin-top:30%;} .pho{display:flex; gap:20px; position:absolute; bottom: 5px; left:20%;}.pho img{width:100px;height:70px;} }
                     @media only screen and (min-width: 3500px) { 
                     
                      .pho{display:flex; gap:30px; position:absolute; bottom: 5px; left:25%; z-index:-10;}.pho img{width:150px;height:100px;z-index:-10;} } 
                  
                  
 .h3{margin-top:15%;margin-left:10%;position:absolute; transform:skew(30deg) rotate(10deg); font-weight:700; font-style: italic; font-size:30px;z-index:90;color:rgb(185, 138, 20);
    text-shadow:1px 1px 2px black,
    -1px -1px 2px black; animation-name:color; animation-duration:5s;}
    .labelbottom{color:red; font-size:20px; font-weight: bold;} 
    #carousel-container{
        box-shadow:inset 10px 10px 0 0 goldenrod,
        inset -10px -10px 0 0 goldenrod;}
              

.senter{font-size:20px; color:red; font-style: italic;
                        text-shadow:1px 1px 2px black;text-align:center ;}
@media only screen and (max-width: 1100px){.bodi{display:none;overflow: hidden;} .animation img{width:60px; height:60px;} .ras{display:none; margin:0;width:0;} .dva{display:none;
     margin:0; width:0;}.try{display:none; margin:0;width:0;}
.ras{display:none;width:5px;overflow: hidden;} .dwa{display:none;width:5px;}.tri{display:none;width:5px;overflow: hidden;}}
.childspan{color:red; font-style:italic;font-size:18px;font-family: Georgia, serif;}
.redspan{border:2px solid red; color:red;}
 .bluespan{background-color:rgb(85, 85, 238);color:white;border:2px solid rgb(85, 85, 238); border-radius:2px 2px 2px  2px;}
 #myDiv{display:none; margin-top: 0px;;}                 
 .psecond p{padding:10px;font-style: italic;color:#3214a1;font-size: 18px; }                  
.tree{padding:10px;font-style: italic;color:#3214a1;font-size: 18px;}

                        
.ashop{position:absolute; top:40%; left:20px;display:grid;color:white;z-index:1000;
                     font-size:16px; font-style:italic;font-weight: 700;}
.ashop img:hover{width:120px; height:120px; }
.ashop img{border:3px solid yellow; border-radius:50%;}
.background{position:fixed;z-index:-3;opacity:0.4; width:100%;overflow: hidden;}

.h1{ margin-top:10px; height:auto;width:100%;z-index:-1; font-size:22px;font-style: italic;
                        border:5px solid rgb(106, 92, 11);animation-name:color;animation-duration:10s;}
.iframe2{border: 5px solid yellow; border-radius:20px 30px 20px 30px; box-shadow:inset 2px 2px 1px 1px black;}
.footer2{margin-bottom:30px; margin-top:30px; display:flex;border:5px solid yellow; 
                            border-radius:5px 55px 5px 55px; overflow: hidden;}
.img2{width:250px;height:250px; border:1px solid yellow;border-radius:50%;
                                justify-content:space-around;margin-top:40px;}
 
.hit img{filter: brightness(80%) contrast(300%);}
                                #carousel-container {
                                    margin-top: 30px;
                                    width: 300px;height:400px;
                                    overflow: hidden;
                                    position: relative;
                                    margin: auto;
                                    border: 3px solid yellow;
                                }
                            
                                #image-container {
                                    display: flex;
                                    transition: transform 0.5s ease;
                                }
                            
                                .carousel-image {
                                    width: 100%;
                                    height: auto;
                                }
                            
                                #prevBtn,
                                #nextBtn {padding-top: 5px;
                                    position: absolute;
                                    top: 90%;
                                    transform: translateY(-50%);
                                    cursor: pointer;
                                    border: 3px solid yellow;
                                    font-size: 15px;
                                }
                            
                                #prevBtn {
                                    left: 5px;
                                }
                            
                                #nextBtn {
                                    right: 5px;
                                }
                                .spanduo span{color:black; border:3px solid black; background-color:white;}

                                .mainprogram { display:grid; gap:20px;justify-items: center; }
                                .mainprogram ul{text-decoration: none;}
                               .mainprogram li{   border: 3px solid white; 
                                margin:40px;list-style-type: none; border-radius: 15px 15px 15px 15px ; justify-items:center;text-align:center;background-color:rgb(216, 192, 9)}

                               .mainprogram a{ font-size:20px; font-weight: bold; text-align:center;color:rgb(142, 36, 36);
                                align-items:center;padding:15px; }
                              
            .ras{margin-left:25%;margin-top:3%;border:3px solid red;width:200px;height:200px;overflow: hidden;}
            .dwa{margin-left:3%;margin-top:-30%; border:3px solid red;width:200px;height:200px;overflow: hidden;}
            .tri{margin-left:25%;margin-top:-40%;border:3px solid red;width:200px;height:200px;overflow: hidden;}
            .bodi{margin-top:1px;display:grid;}


            #telegram-widget {margin-top:30px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #0088cc; /* Change the background color as needed */
                padding: 10px;
                border-radius: 5px;
              }
              
              #telegram-widget a {
                text-decoration: none;
                color: white;
                display: flex;
                align-items: center;
              }
              
              #telegram-widget img {
                width: 40px; /* Adjust the size of the Telegram logo */
                margin-right: 10px;
              }
              
              #telegram-widget span {
                font-size: 16px; /* Adjust the font size as needed */
              }
              @media (max-width: 1270px) {
                .underpage {overflow:hidden;
                  display: none;
                }
                .underphoto,
                .undera {
                  display: none;
                  width: 1px;
                }
              }
             
               .underpage{position:absolute; bottom: 5px;left:30%;overflow: hidden;display:flex; flex-wrap: wrap;} 
               .underphoto{width:150px; height:80px; margin-left:50px; border: 5px solid red; border-radius:15px 15px 15px 15px;overflow: hidden;}

             
              
              
               .soflens{width:280px;height:200px;}
               .gat span{font-weight: bold;color:red; }
               
              
               .kub{ border-radius:35px 15px 35px 15px;border:5px solid rgb(118, 104, 28);}
  .sertificat{display:flex;justify-content: center;align-items: center;margin:5px;flex-wrap: wrap;}
  .sertificat img{margin-top:20px;border:7px solid rgb(152, 112, 12);}
  .photobar img{width:250px;height:200px; margin:10px;}
  .photobar button{text-align:center; font-size:18px; font-style:italic; font-family: 'Times New Roman', serif; margin-left:20px;}

  .toggle-input {
    display: none;
}

.toggle-label {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.toggle-content {
    display: block;
}

.toggle-input:checked ~ .toggle-content {
    display: block;
}

.toggle-input:checked + .toggle-label {
    display: none;
}

#less-toggle {
    display: none;
}

#less-toggle:checked ~ .toggle-content #less-toggle {
    display: inline-block;
}

.divsender{display:flex; margin-left:10px; flex-wrap: wrap; gap:20px; margin:auto;
    justify-content:center;}
 .bort{display:none;}
 .separeit{text-decoration: underline;}
 

 .tv{display:grid;border:3px solid rgb(75, 66, 14);width:220px;height:auto;margin-top:20px;}
 .book{display:grid;width:220px;height:250px;border:3px solid rgb(75, 66, 14);margin-top:20px;}
 .newenttrens{display:flex;justify-content:space-around;margin:auto;flex-wrap: wrap;background-color:gold;}
 .tvset{width:220px;height:auto;}
 .notsee{display:none;}

.newtextbutton {text-align: center; font-weight:bold;font-size:15px;color:rgb(63, 55, 10);font-family: 'Lucida Sans', sans-serif;
    display: block;margin-top: 30px;
  }
  .mois{text-align: center;font-size:25px;font-style: italic;font-weight: bold; color:black;}
  .newbutton{font-size:15px; text-align: center;font-style: italic;color:rgb(143, 38, 38);font-weight: bold;}
  .newbut{font-size:15px; text-align: center;font-style: italic;color:rgb(143, 38, 38);font-weight: bold;}
  .mainbottom{display:flex; justify-content:center; margin:auto; overflow:hidden;margin-top:50px;}
 .sectionyellow{background-color:gold;margin:-10px;}
 #mois{text-align: center;font-size:25px;font-style: italic;font-weight: bold; color:black;background-color:gold;margin:1px;}
 .spacearound{width: 100%;height:100px;background:gold;margin:-10px;}
 .catalog1{color:black;text-align:center;font-size:30px;font-style: italic;font-weight: bold;}
 @media only screen and (max-width: 1100px) {
    iframe {
        display: none !important;
        visibility: hidden;
    }
}
.downup{z-index:1500;text-align:center;margin:auto;position:relative;margin-top:35px;}
.thankcenter{text-align:center;padding:10px; border:2px solid black;margin:15px;}
.textalign{text-align:center;margin-top:20px;}