@media screen and (max-width: 600px){
  


    .heads{
        top: 30vh;
    }
    .categoriess{
        font-size: 2vw;
        column-gap: 3vw;
        top: 35vh;
    }
    .categoriesss{
      
        top: 95vh;
    }
    .headss{
        top: 0vh;
    }
    .intro-web-show{
        top: 28vh;
        font-size: 3vw;
    }
    .cat{
        width: 15vw;
    }
    .intro-about-show, .intro-origins-show, .intro-about, .intro-origins{
        top: 30vh;
    }
    .container-diet{
        top: 7vh;
    }
    .cursonoff{
     width: 12vw;
    height: 6vw;
    line-height: 6vw;
    }
} 


@media screen and (max-width: 400px){


.intro-tv{
    width: 100vw;
    height:100vh;
    background-size:cover ;
    background-position: top;
}

.cursonoff{
    width: 20vw;
    height: 10vw;
    font-size: 6vw;
    line-height: 4vh;
    padding:0px ;
}


.buttons-intro{
    top: 15vh;   
}
.butintro{
    height: 30px;
    width: 30px;
}
.head{
height: 5vh;
width: 100vw;
color: black;
font-size: 3em;
line-height: 5vh;
}
.heads{
    width: 100vw;
    color: white;
    font-size: 8vw;
    line-height: 5vh;
    filter: none;
    top: 30vh;
    height: 10vh;
   
}
.headss{
    top: 0vh;
}
.categories{
    top: 65vh;
    display: inline-block;
}
.categoriess{
top: 40vh;
font-size: 3vw;
}
.categoriesss{
top: 70vh;
}
.intro-web-show{
    font-size: 3vw;
    top: 25vh;
}
.cat{
    height: 5vh;
    width: 100vw;
    line-height: 5vh;
}
.intro-about{
    top: 25vh;
    width: 90%;
    left: 5%;
}
.img-intro{
    width: 15vw;
    height: 10vw;
}

.imi1{
     left: 5vw;
     top:15vw;
 }
 .imi2{
     background-image: url(.//Images/Intro/Intro-miley.jpeg);
     background-size: cover;
     left: 67vw;
     top:25vw;
     position: absolute;
 }
 
 .imi3{
     background-image: url(.//Images/Intro/Intro-queen.jpeg);
     background-size: cover;
     left: 58vw;
     top:50vw;
     position: absolute;
 }
 
 .imi4{
     background-image: url(.//Images/Intro/Intro-trimp.jpeg);
     background-size: cover;
     left: 1vw;
     top:31vw;
     position: absolute;
 }
 .imi5{
     background-image: url(.//Images/Intro/Intro-zuck.jpeg);
     background-size: cover;
     left: 25vw;
     top:12vw;
     position: relative;
 }
 


.text-intro{
    top: 2vh;
    width: 90vw;
 
    
}
.text-intro-show{
    height: 24vh;
}
.intro-origins{
    top: 25vh;
    width: 90%;
    left: 5%;
}
.intro-origins-show{
    top: 25vh;
    height: 25vh;
    width: 90vw;
    left: 5%;
    background-size: 80% auto;
}
.location{
    opacity: 1;
}
.curs-origins, .curs-app, .curs-eyes, .curs-act-click{
    width: 50vw;
    height: 25vw;
    padding: 5px;
    font-size: 3.3vw;
    line-height: 3vw;
}
.curs-act{
    width: 40vw;
    height: 20vw;
    font-size: 6vw;
    line-height: 7vh;
}
.panel-intro{
    height: 90vh;
}

.intros{
    height: 100vh;
}
.bulle{
width: 80vw;
height: 50vw;
}
.layouts{
    padding-top: 80vh;

}
.layout-1{
    top: 5vh;
}
.layout-2{
    top: 10vh;
}
.layout-3{
    top: 20vh;
}
.bulle-1{
    top: 10vh;
}

.bulle-2{
    top: 30vh;
    left: 10vw;
}
.bulle-3{
    top: 80vh;
    left: 10vw;
}
.p1{
    top: 100vh;
   background-color: greenyellow;
   color: black;
   font-size: 6vw;
   line-height: 5vh;
   height: 5vh;
}
.p2, .p3{
    background-color: greenyellow;
    color: black;
    font-size: 6vw;
    line-height: 5vh;
    height: 5vh;
}
.element-e, .element-s, .element-sk{
    width: 80vw;
    height: 40vw;
}
.menu-skin .button {
    background-color: white;
    top: 19vh;
    width: 0.7rem;
    height: 0.7rem;

}
.menu-eyes .button {
    background-color: white;
    top: 19vh;
    width: 0.7rem;
    height: 0.7rem;

}
.menu-skull .button {
    background-color: white;
    top: 19vh;
    width: 0.7rem;
    height: 0.7rem;

}
.button-close{
    width: 0.7rem;
    height: 0.7rem;
}




.container-diet{
    top: 7vh;
    
}
.cell{
    width: 38vw;
    height: 18vw;
}
.panel-diet{
    height: 100vh;
}
.p3{
    top: 100vh;
}
.container-act{
    height: 100vh;
    padding-left: 5vw;
    width: 90%;
}
.imgS, .imgM, .imgD, .imgN{
    height: 10vw;
    width: 15vw;
}
.container-spot{
    top: 60vh;
    height: 80vh;
}
.panel-spot{
    height: 70vh;
    background-color: blue;
    top: 70vh;
}
.p4-2{
    background-color: greenyellow;
    color: black;
    font-size: 6vw;
    line-height: 5vh;
    height: 5vh;
}
.p4:hover{
    background-color: black;
    color: greenyellow;
}
.spot{
    top: 20vh;
    width: 80vw;
}


.green-img,.hazel-img,.blue-img, .reddish-img, .pulse-img, .blood-img, .sight-img, .hearing-img, .rib-img, .vert-img, .ufo-img, .space-img, .science-img, .human-img, .piercing-img, .paranormal-img, .dreams-img, .wisdom-img, .mission-img, .contacts-img{
    width: 10vw;
    height: 6vw;
   
}
}