/* root setup */

body {
    height: 10000px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

h1, h2, h3, h4, h5, h6 {
    color: white;
}

p {
    font-size:xx-large;
    color: white;
}

/* neon title */

.neonTitle {
    text-align: center;
    font-size: 7em;
    margin-bottom: 0;
    margin-top: 100px;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    position: absolute;
  }
  
  .neonTitle:nth-child(1) {
    font-family: Monoton;
    animation: neon1 1.5s ease-in-out infinite alternate;
  }
  
  .neonTitle:nth-child(2) {
    font-family: Iceland;
    animation: neon2 1.5s ease-in-out infinite alternate;
  }
  
  .neonTitle:nth-child(3) {
    font-family: Pacifico;
    animation: neon3 1.5s ease-in-out infinite alternate;
  }
  
  .neonTitle:nth-child(4) {
    font-family: "Press Start 2P";
    animation: neon4 1.5s ease-in-out infinite alternate;
  }
  
  .neonTitle:nth-child(5) {
    font-family: Audiowide;
    animation: neon5 1.5s ease-in-out infinite alternate;
  }
  
  .neonTitle:nth-child(6) {
    font-family: Vampiro One;
    animation: neon6 1.5s ease-in-out infinite alternate;
  }
  
  /*glow*/
  
  @keyframes neon2 {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
        0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
    }
    to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
        0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
    }
  }
  
  @keyframes neon1 {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228dff,
        0 0 70px #228dff, 0 0 80px #228dff, 0 0 100px #228dff, 0 0 150px #228dff;
    }
    to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228dff,
        0 0 35px #228dff, 0 0 40px #228dff, 0 0 50px #228dff, 0 0 75px #228dff;
    }
  }
  
  @keyframes neon3 {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffdd1b,
        0 0 70px #ffdd1b, 0 0 80px #ffdd1b, 0 0 100px #ffdd1b, 0 0 150px #ffdd1b;
    }
    to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ffdd1b,
        0 0 35px #ffdd1b, 0 0 40px #ffdd1b, 0 0 50px #ffdd1b, 0 0 75px #ffdd1b;
    }
  }
  
  @keyframes neon4 {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00,
        0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
    }
    to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00,
        0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
    }
  }
  
  @keyframes neon5 {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff9900,
        0 0 70px #ff9900, 0 0 80px #ff9900, 0 0 100px #ff9900, 0 0 150px #ff9900;
    }
    to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff9900,
        0 0 35px #ff9900, 0 0 40px #ff9900, 0 0 50px #ff9900, 0 0 75px #ff9900;
    }
  }
  
  @keyframes neon6 {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de,
        0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }
    to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de,
        0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
  }
  /*Make stuff responsive*/
  
  @media (max-width: 650px) {
    p {
      font-size: 3.5em;
    }
  }

/* neon title end  */

/* neon button */

.neonButton{
  position: absolute;
  display: inline-block;
  padding: 25px 30px;
  margin: 40px 0;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
  margin-right: 50px;
  top: 350px;
}
.neonButton:hover{
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.neonButton:nth-child(1){
  filter: hue-rotate(270deg);
}
.neonButton:nth-child(2){
  filter: hue-rotate(110deg);
}
.neonButton span{
  position: absolute;
  display: block;
}
.neonButton span:nth-child(1){
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
@keyframes animate1{
  0%{
      left: -100%;
  }
  50%,100%{
      left: 100%;
  }
}
.neonButton span:nth-child(2){
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes animate2{
  0%{
      top: -100%;
  }
  50%,100%{
      top: 100%;
  }
}
.neonButton span:nth-child(3){
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.50s;
}
@keyframes animate3{
  0%{
      right: -100%;
  }
  50%,100%{
      right: 100%;
  }
}


.neonButton span:nth-child(4){
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate4{
  0%{
      bottom: -100%;
  }
  50%,100%{
      bottom: 100%;
  }
}

/* neon button end */

.overflowX {
    overflow-x: hidden;
}

.pParag {
    color: black;
}

.pShadow {
    text-shadow: -5px -5px 5px rgb(0, 0, 0);
}

.titleShadow {
    text-shadow: -40px 30px 10px rgb(255, 255, 255);
}

.parallaxBody {
    /* The image used */
    background:linear-gradient(0deg, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 100%), url("/template-locale/img/webp/sfondoBody2.webp");
    min-height: 1000px;   
    background-position: center;
    background-size: cover;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
}

/* navbar */

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff00;
    position: fixed;
    width: 100%;
    height: 70px;
    transition: all .5s ease;
    justify-content: space-evenly;
    display: flex;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover {
    background-color: #11111139;
    }

    .activeTop {
    background-color: #000000;
    position: fixed;
    padding-bottom: 5px;
    padding-top: 5px;
    }

    /* preloader */

    /* *, *::after, *::before {
        box-sizing: border-box;
      }
      
      .preloader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background: rgb(23, 22, 22);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        transition: opacity 0.3s linear;
      }
      
      .page-content {
        max-width: 768px;
        margin: 0 auto;
      } */

        /* preloader 2 */

  /* CSS start - For Live Project */
  .preloader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: #fff;
    background-color: #000000;
    font-family: Consolas, Menlo, Monaco, monospace;
    font-weight: bold;
    font-size: 30vh;
    z-index: 1099;
  }
  
  .preloader span {
    display: inline-block;
    opacity: 0.8;
    animation: pulse 0.4s alternate infinite ease-in-out;
  }
  .preloader span:nth-child(odd) {
    animation-delay: 0.4s;
    z-index: 1100;
  }
  
  @keyframes pulse {
    to {
      transform: scale(0.8);
      opacity: 0.5;
    }
  }
  
  .preloader.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeOut {
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  /* CSS end - For Live Project */
  
  
  /* Classes for Example Page Content */
  
  .imagen {
    display: inline-block;
    height: auto;
    width: auto;
    margin: 0px;
    padding: 0px;
  }

  /* end preloader */

  /* stiky call to action*/

.stikyButton {
  position: fixed;
  z-index: 9999;
  bottom: 25px;
  right: 25px;
  border-radius: 50% ;
  border: 2px solid #b12bf4;
  background-color:rgba(0, 0, 0, 0.77) ;
  color: #c52bf4;
  width: 100px;
  height: 100px;
  transition: 0.5s;
}
.stikyButton:hover {
  transform: scale(1.5);
}

/* Navbar */

nav {
    z-index: 1000;
    position: fixed !important;
    top: 0;
    left: 0px;
    width: 100%;
    background-color: rgb(9, 9, 72) !important;
}

.lpLogoNav {
    width: 50px;
    height: 50px;
    filter: invert(100%) sepia(0%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%);
    transition: 1s;
  }
  .lpLogoNav:hover {
    transform: rotate(360deg);
  }

  /* header */

.parallaxHeader {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/webp/sfondo.webp");
    min-height: 1000px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.parallaxSection1 {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/webp/sfondo4.webp");
    min-height: 500px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.parallaxSection2 {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/webp/dj2.webp");
    min-height: 500px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.parallaxSection3 {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/sfondo22.png");
    min-height: 500px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.parallaxSection4 {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/webp/dj.webp");
    min-height: 500px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.parallaxSection5 {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/webp/dj3.webp");
    min-height: 500px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.parallaxContact {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/webp/dj2.webp");
    min-height: 800px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.parallaxFoot {
    /* The image used */
    background:linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 30%), url("/template-locale/img/webp/sfondoBody2.webp");
    min-height: 500px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    
}

.infoSection {
    background-color: white;
    min-height: 1000px;   
    background-position: center, top;
    background-size: cover;
    max-width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
}

.imgSection {
    width: auto;
    height: 500px;
}

  /* contact */

  @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

  body { background:rgb(30,30,40); }
  form { max-width:420px; margin:50px auto; }
  
  .feedback-input {
    color:white;
    font-family: Helvetica, Arial, sans-serif;
    font-weight:500;
    font-size: 18px;
    border-radius: 5px;
    line-height: 22px;
    background-color: transparent;
    border:2px solid #0033ff61;
    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width:100%;
    box-sizing: border-box;
    outline:0;
  }
  
  .feedback-input:focus { border:2px solid #ffffff; }
  
  textarea {
    height: 150px;
    line-height: 150%;
    resize:vertical;
  }
  
  [type="submit"] {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    width: 100%;
    background:#4f4c4c00;
    border-radius:5px;
    border: 2px solid rgba(0, 64, 255, 0.519) !important;
    border:0;
    cursor:pointer;
    color:rgb(93, 91, 91);
    font-size:24px;
    padding-top:10px;
    padding-bottom:10px;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:700;
  }
  [type="submit"]:hover { background:#0044ff52; color: white;}
  
  .filterBlur {
      backdrop-filter: blur(10px);
    }
  
     /* footer */
  
  .lpLogoNav2 {
      width: 50px;
      height: 50px;
      filter: invert(100%) sepia(0%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%);
      transition: 1s;
    }
  
    .lpLogoNav2:hover {
      transform: rotate(360deg);
    }
  
    .iconCustom {
      transition: 0.5s;
  }
  .iconCustom:hover {
      transform: scale(2);
  }

  .banner {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.borderMaps {
    border-top: 5px solid #000000;
    border-bottom: 5px solid #000000;
}

/* media query */

@media screen and (max-width:1200px) {
    .parallaxHeader {
        background-attachment: scroll;
    }
    .parallaxSection1 {
        background-attachment: scroll;
    }
    .parallaxSection2 {
        background-attachment: scroll;
    }
    .parallaxSection3 {
        background-attachment: scroll;
    }
    .parallaxSection4 {
        background-attachment: scroll;
    }
    .parallaxSection5 {
        background-attachment: scroll;
    }
    .parallaxContact {
        background-attachment: scroll;
    }
    .parallaxFoot {
        background-attachment: scroll;
    }

}

@media (max-width:1000px) {

    .navQueryLogo{
        display: none;
    }
    .navQueryTitle {
        display: none;
    }

    .cuffie1 {
        display: none;
    }
    .par1 {
        width: 100%;
    }
    .mixer {
        display: none;
    }
    .par2 {
        width: 100%;
    }
    .cuffie2 {
        display: none;
    }
    .mixer2 {
        display: none;
    }
    .girl1 {
        display: none;
    }
    .girl2 {
        display: none;
    }
    .parGirl1 {
        width: 100%;
    }
    .parGirl2 {
        width: 100%;
    }
    .linkQuery {
        width: 50%;
    }

}

@media screen and (max-width:450px) {
    .neonTitle {
        font-size: 5em;
    }
}

@media screen and (max-width:370px) {
    .homeNav {
      display: none;
    }
    .galleryNav {
      display:none;
    }
  }