@font-face {
  font-family: "Mattone";
  src: url("../Fonts/Mattone/Mattone-150.woff2") format("woff2"),
       url("../Fonts/Mattone/Mattone-150.woff") format("woff");
}

@font-face {
  font-family: "Ortica";
  src: url("../Fonts/Ortica/Ortica-Light.woff2") format("woff2"),
       url("../Fonts/Ortica/Ortica-Light.woff") format("woff");
}

@font-face {
  font-family: "Porpora";
  src: url("../Fonts/Porpora/Porpora-Regular.woff2") format("woff2"),
       url("../Fonts/Porpora/Porpora-Regular.woff") format("woff");
}

@font-face {
  font-family: "ApfelGrotezk";
  src: url("../Fonts/ApfelGrotezk/ApfelGrotezk-Regular.woff2") format("woff2"),
       url("../Fonts/ApfelGrotezk/ApfelGrotezk-Regular.woff") format("woff");
}

@font-face {
  font-family: "Fett";
  src: url("../Fonts/ApfelGrotezk/ApfelGrotezk-Fett.woff2") format("woff2"),
       url("../Fonts/ApfelGrotezk/ApfelGrotezk-Fett.woff") format("woff");
}

.Porpora {
  font-family: Porpora;
  color: #000000;
}

.ApfelGrotezk {
  font-family: ApfelGrotezk;
  color: #000000;
  font-size: 16px;
}

.Fett {
  font-family: Fett;
  color: #000000;
}

body {

	height: 100vh;
  overflow: hidden;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
  25% {
    background-position: 30% 80%;
  }
	50% {
		background-position: 100% 50%;
	}
  75% {
    background-position: 20% 20%;
  }
	100% {
		background-position: 0% 50%;
	}
}

.Mattone {
  font-family: Mattone;
  color: #ffffff;
}

.Ortica {
  font-family: Ortica;
  color: #ffffff;
}

.view {
  height: 80vh;

  margin: 0;
  padding: 0;
}

.content {
  height: 85vh;
  width: 100vw;
  overflow: scroll;
  margin: 0;
  padding: 0;
}

.content_artista {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: flex-start;
  height: 94vh;
  width: 100vw;
  overflow: scroll;
  margin: 0;
  padding: 0;
}

.content_artisti {
  height: 70vh;
  width: 100vw;
  overflow: scroll;
  margin: 0;
  padding: 0;
}

.new_nav {
  height:5vh;
  width: 100vw;
  position: sticky;
  margin: 0;
  padding: 0;
}

.new_nav_artisti {
  height:10vh;
  width: 100vw;
  position: relative;
  margin: 0;
  padding: 0;
}

.right {
  text-align:right;
}

.white {
  color:white;
}

hr{
   padding: 0px;
   margin: 0px;
}

a{
  text-decoration: none;
  color:white;
}

.round {
  border-radius: 2px;
}

.dec_none {
  text-decoration: none;
}

.new_nav a {
  font-family: Mattone;
  float: left;
  color: #ffffff;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.new_nav a:hover {
  background-color: ;
  color: pink;
}

a {
  opacity:0.5;
  color:white;
}
a:hover {
  opacity:1;
  color:white;
}

/* Add a color to the active/current link */
.new_nav a.active {
  background-color:;
  color: black;
}

.left {
  text-align: left;
}

.avoid_mobile {
  display: true;
}

@media (max-width : 480px){
  .avoid_mobile {
    display: none;
  }
}

.white {
  color: white;
}

.black {
  color: black;
}

.main{position:sticky;top:0;right:0;left:0;padding:0;}
.sticky-1{height:calc(100vh - 180px);position:;top:60px;bottom:0;width:100%;z-index:1}
.sticky-2{height:calc(100vh - 100px);margin-top:calc(100vh - 180px);position:sticky;top:120px;z-index:2}
.sticky-3{height:calc(100vh - 180px);position:sticky;top:180px;z-index:3}

.grad {
  background: radial-gradient(circle at 45.3% 1.32%, #ffffff, transparent 20%),radial-gradient(circle at 84.06% 17.15%, #00fc8b, transparent 57%),radial-gradient(circle at 16.34% 66.79%, #0032e8, transparent 100%),radial-gradient(circle at 50% 50%, #ffffff, #ffffff 100%);
	background-size: 125% 125%;
	animation: gradient 10s ease infinite;
}

.grad_2 {
  background: radial-gradient(circle at 45.3% 1.32%, #ffffff, transparent 15%),radial-gradient(circle at 84.06% 17.15%, #4c4fe3, transparent 57%),radial-gradient(circle at 16.34% 66.79%, #b28fe6, transparent 100%),radial-gradient(circle at 50% 50%, #ffffff, #ffffff 100%);
	background-size: 125% 125%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
  25% {
    background-position: 30% 80%;
  }
	50% {
		background-position: 100% 50%;
	}
  75% {
    background-position: 20% 20%;
  }
	100% {
		background-position: 0% 50%;
	}
}

.footer {
  height: 10vh;
}

.col {
  color: #ffffff;
}

.colback {
  background-color: #b84338;
}

#drop-down-menu {
  height:100vh;
  text-decoration: none;
}

.new_footer {
  height:10vh;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: scroll-left 4s linear infinite;
  -webkit-animation: scroll-left 4s linear infinite;
  animation: scroll-left 30s linear infinite;

}

@media (max-width: 767px) {
    .new_footer {
      display: none;
    }
  }

.bluraccess{
  -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.img-bl{
  opacity:0.5;
}

.img-bl:hover{
  opacity: 1;
}

.hover-effect:hover {
  filter: hue-rotate(270deg) brightness(1.5);
  transition: filter 0.3s ease;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.image-wrapper:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(191, 172, 255, 1); /* Purple color with 50% opacity */
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.image-wrapper::before {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer {
  overflow-x: scroll;
  position: absolute;
                width: 500%;
                height: 10vh;
                margin: 0;

                text-align: center;
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                -moz-animation: scroll-left 2s linear infinite;
                -webkit-animation: scroll-left 2s linear infinite;
                animation: scroll-left 20s linear infinite;
}

            @-moz-keyframes scroll-left {
                0% {
                    -moz-transform: translateX(100%);
                }
                100% {
                    -moz-transform: translateX(-100%);
                }
            }

            @-webkit-keyframes scroll-left {
                0% {
                    -webkit-transform: translateX(100%);
                }
                100% {
                    -webkit-transform: translateX(-100%);
                }
            }

            @keyframes scroll-left {
                0% {
                    -moz-transform: translateX(100%);
                    -webkit-transform: translateX(100%);
                    transform: translateX(100%);
                }
                100% {
                    -moz-transform: translateX(-100%);
                    -webkit-transform: translateX(-100%);
                    transform: translateX(-100%);
                }
            }