.parallax {
    /* The image used */
    background-image: url("../img/foto_teste.png");
  
    /* Set a specific height */
    min-height: 500px; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    image-rendering: optimizeSpeed;
    image-resolution: optimizeSpeed;

  }

  .parallax2 {
    /* The image used */
    background-image: url("../img/foto_teste.png");
  
    /* Set a specific height */
    min-height: 500px; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    
    image-rendering: optimizeSpeed;
    image-resolution: optimizeSpeed;
  }

  .parallax3 {
    /* The image used */
    background-image: url("../img/foto_teste.png");
  
    /* Set a specific height */
    min-height: 500px; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    
    image-rendering: optimizeSpeed;
    image-resolution: optimizeSpeed;
  }

  .tituloSobreEventos{
      color: white;
      text-align: center;
      font-size: 50px;
      text-transform: uppercase;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-style: normal;
  }


  .textoParallax{
      background: #ffffff;
      color: black;
      font-size:24px;
      text-align: center;
      padding:1em;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-style: normal;

  }

  .linkTemas{
      margin: 4em;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
     
      
  }

  .saibaXBL{
      position: relative;
      width: 200px;
      height: 50px;
      line-height: 48px;
      background: #ffffff;
      text-transform: uppercase;
      text-decoration: none;
      font:"Oswald", sans-serif;
      font-size: 20px;
      letter-spacing: 4px;
      -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);

  }

  .saibaXBL::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffdb58, #00f, silver,#ff0, #f00,#ffdb58, #00f, silver,#ff0, #f00);
    background-size: 400%;
    opacity: 0;
    transition: 0.5s;
    animation: animateButton 20s linear infinite;
}

.saibaXBL::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,#ffdb58, #00f, silver,#ff0, #f00,#ffdb58, #00f, silver,#ff0, #f00);
    background-size: 400%;
    opacity: 0;
    filter: blur(20px);
    transition: 0.5s;
    animation: animateButton 20s linear infinite;
}

.saibaXBL:hover::before,
.saibaXBL:hover::after{
    opacity: 1;
}

@keyframes animateButton{
    0%{
        background-position: 0 0;
    }
    50%{
        background-position: 300% 0;
    }
    100%{
        background-position: 0 0;
    }
}


  .saibaXBL span{
      position: absolute;
      display: block;
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 1px;
      text-align: center;
      background:#0c0c0c;
      color: rgba(255, 255, 255, 0.5);
      transition: 0.5s;
      z-index: 1;
  }

  .saibaXBL:hover span{
      color:rgba(255, 255, 255, 1);
  }

  .saibaXBL span::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: rgba(255,255,255,0.1);
  }



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

    .parallax {
      
        min-height: 600px; 
        /* Create the parallax scrolling effect */
        background-attachment: scroll;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
      }
    
      .parallax2 {
        
      
    
        min-height: 600px; 
        /* Create the parallax scrolling effect */
        background-attachment: scroll;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    
      .parallax3 {
        
      
     
        min-height: 600px; 
        /* Create the parallax scrolling effect */
        background-attachment:scroll;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

    .textoParallax{
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: normal;
  
    }

  }