.head{
    width: 95vw;
    height: 20vh;
    background-color: black;
    color: black;
    text-align: center;
    font-family: expand;
    font-size: 5vw;
    top: 3vh;
    position: absolute;
    vertical-align: middle;
    line-height: 10vw; 
    z-index: 500;
    filter: blur(100px);
    transition: 1s;
}
.heads{
    width: 100vw;
    height: 8vw;
    background-color: black;
    color: white;
    text-align: center;
    font-family: expand;
    font-size: 5vw;
    top: 15vw;
    position: absolute;
    vertical-align: middle;
    line-height: 8vw; 
    z-index: 500;
    filter: none;
    transition: 1s;
    
}
.headss{
    top: 0vh;
    height: 8vw;
    line-height: 8vw;
}

.categories{
    top: 75vh;
    position: absolute;
    color: greenyellow;
    font-size: 0.5vw;
    font-family: extend;
    z-index: 999;
    display: flex;
    width: 100vw;
    justify-content: center;
    column-gap: 1px;
     opacity: 0;
     transition: 1s;
     filter: blur(50%);
     background-color: black;
 }

.categoriess{
    top: 22vw;
    position: absolute;
    color: greenyellow;
    font-size: 1vw;
    font-family: extend;
    z-index: 999;
    display: flex;
    width: 100vw;
    justify-content: center;
    column-gap: 1px;
    opacity: 100;
    transition: 1s;
    filter: none;
    cursor: none;
    
}

a{
    cursor: none;
}
a:hover{
    color: black;
    transition: 1s;
}
.change-color{
transition: 1s;
    color: black;
}
.cat-about:hover, .cat-origins:hover, .cat-app:hover, .cat-diet:hover, .cat-act:hover, .cat-spot:hover{
    background-color: greenyellow;
    color: black;
    transition: 1s;
 
}


.clicked{
    transition: 1s;
    color: greenyellow;
}



.categoriesss{
    top: 95vh;

}

.cat{
    height: 5vh;
    width: 10vw;
    background-color: black;
    border-radius: 50px ;
    text-align: center;
    vertical-align: middle;
    line-height: 5vh;  
}

.intros{
    width: 100vw;
    height:100vh;

}

.intro{
    width: 80vw;
    height: 40vw;
    position: absolute;
}
.intro-tv{
    width: 100vw;
    height:100vh;

    display:block;
    background: url(.//Intro_gif.gif);
    background-size: cover;
}


.intro-web{
    width: 100%;
    height:0vh;
    top: 10vw;
    position: absolute;
    transition: 1s;
    z-index: 500;
    color: black;
    font-family: expand;
    font-size: 1.5vw;
    text-align: center;
    vertical-align: middle;
    line-height: 5vh;
    transition: 1s;
    filter: blur(50px);
}


.intro-web-show{
    width: 100vw;
    height:5vw;
    top: 12vw;
    position: absolute;
    transition: 1s;
    z-index: 500;
    font-family: expand;
    font-size: 2vw;
    text-align: center;
    vertical-align: middle;
    line-height: 3vw; 
    filter: none;

}

.intro-about{
    width: 70vw;
    height:0vw;
    left: 14vw;
    top: 9vh;
    transition: 1s;
    transition-delay: 0.6s;
    z-index: 300;
    position: absolute;
       
}
.intro-about-show{
    position: absolute;
    width: 70vw;
    height:35vw;
    z-index: 300;
    transition: 1s;
  
   
}

.text-intro{

    position: absolute;
    width: 70vw;
    height: 0%;
    background-color: black;
    color: white;
    font-family: extend;
    font-size: 4vw;
    text-align: center;
    line-height: 9vh;
    overflow-y: scroll;
    transition: 1s;

   
}
.text-intro-show{
  
    position: absolute;
    background-color: black;
    font-family: extend;
    font-size: 4vw;
    text-align: center;
    line-height: 4.5vw;
    overflow-y: scroll;
    cursor: none;
    transition: 1s;
    padding-top: 0;
    width: 70vw;
    height:35vw;
    z-index: 300;
    transition: 1s;

    display: block;
}

.intro-origins{
    width: 70vw;
    height:0vw;
    z-index: 300;
    transition: 1s;
    top: 20vh;
    background-color: black;
    background-image: url(.//Svgs/map_usa.svg);
    background-size: 70% auto;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 14vw;
}

.intro-origins-show{
    width: 70vw;
    height:35vw;
    z-index: 300;
    transition: 1s;

    display: block;
      position: absolute;
      left: 14vw;
      top: 20vh;
}


.img-intro{
    width: 100%;
    height: 100%;
   opacity: 0;
    z-index: 999;
    top: 0;
    filter: grayscale(100%);
}

.img-intro-show{
opacity: 1;
transition: 2s;
}
.img-intro{
    width: 10vw;
    height: 6vw;
    position: relative;
    pointer-events: none;
}
.imi1{
   background-image: url(.//Images/Intro/Intro-elon.jpeg);
   background-size: cover;
    left: 3vw;
    top:10vw;
    position: absolute;
}
.imi2{
    background-image: url(.//Images/Intro/Intro-miley.jpeg);
    background-size: cover;
    left: 56vw;
    top:14vw;
    position: absolute;
}

.imi3{
    background-image: url(.//Images/Intro/Intro-queen.jpeg);
    background-size: cover;
    left: 58vw;
    top:25vw;
    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;
}




.locations{
    height: 100%;
    width: 100%;
    display: none;

}
.location{
  position: relative;
    height: 6vw;
    width: 11vw;
    background-color: white;
    opacity: 0;
    filter: grayscale(100%);
    cursor: none;
}

.location-1{
    top: 45%;
    left: 16%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-1.jpeg);
    background-size: cover;
    background-repeat: no-repeat;

}


.location-2{
    top: 52%;
    left: 20%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-2.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}

.location-3{
    top: 53%;
    left: 60%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-3.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}
.location-4{
    top: 60%;
    left: 58%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-4.jpeg);
    background-size: cover;
    background-repeat: no-repeat;

}
.location-5{
    top: 39%;
    left: 63%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-5.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}
.location-6{
    top: 33%;
    left: 70%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-6.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}

.location-7{
    top: 32%;
    left: 65%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-7.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}

.location-8{
    top: 73%;
    left: 63%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-8.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}

.location-9{
    top: 24%;
    left: 28%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-9.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}

.location-10{
    top: 30%;
    left: 36%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-10.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}
.location-11{
    top: 36%;
    left: 32%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-11.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}
.location-12{
    top: 59%;
    left: 23%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-12.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}
.location-13{
    top: 60%;
    left: 38%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-13.jpeg);
    background-size: cover;
    background-repeat: no-repeat;

}
.location-14{
    top: 75%;
    left: 45%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-14.jpeg);
    background-size: cover;
    background-repeat: no-repeat;

}
.location-15{
    top: 78%;
    left: 68%;
    position: absolute;
    background-image: url(.//Images/Regs/reg-15.jpeg);
    background-size: cover;
    background-repeat: no-repeat;

}
.show-loc{
    opacity: 1;
    transition: 1s;
}

.location:hover{
    z-index: 999;
    transition: 1s;
}

.show{
    display: block;
    z-index: 300;
    filter: none;
    opacity: 1;
}
.hide{
    filter: blur(100px);
    opacity: 0;
}

.buttons-intro{
    display: flex;
    height: 5vh;
    width: 100%;
    top: 90vh;
    position: absolute;
    column-gap: 10px;
    padding-left: 9vw;
    z-index: 999;
}
.butintro{
    height: 30px;
    width: 30px;
    border-radius: 50px;
    background-color: black;
}

.green{
    background-color: greenyellow;
}

.curs-origins{
    width: 30vw;
    height: 15vw;
    background-color: greenyellow;
    text-align: center;
    padding:10px ;
    font-size: 1.8vw;
    font-family:extend;
    color: black;
    display: none; 
   text-align: center;
   vertical-align: middle;
   line-height: 2vw;
   padding-top: 10px;
  }
.one-block{
    pointer-events: none;
}
.cursonoff{
    width: 10vw;
    height: 5vw;
    background-color: greenyellow;
    text-align: center;
    font-size: 3vw;
    font-family:extend;
    color: black;
    display: none; 
    text-align: center;
    vertical-align: middle;
    line-height: 5vw;

}