/***************** ON SCROLL EFFECTS *****************/

/******* FADE IN AND OUT ********/

.fade {
  opacity: 1;
}

.fadeout {
  opacity: 1;
}


/***************** FADE UP ON SCROLL *****************/




/******* ZOOM IN EFFECT *******/

.herozoom {
    /*background-size: cover !important;*/
}

body {
    /*padding: 0px !important;*/
}


/***** REVEAL ON SCROLL **********/


.reveal{
  transition: all .65s;
  opacity: 0;
}

.active,
.reveal:first-child{
  opacity: 1;
}



/***** CHANGE DIV COLOR ON SCROLL ********/

.changebgcolor.active {
	background: #111;
    transition: 0.4s ease-out;
}


.changebgcolor2.active {
	background: #111;
    transition: 1s ease-out;
}

.changebgcolor3.active {
	background: #111;
    transition: 1s ease-out;
}


.changebgcolor4.active {
    background: #111;
    transition: 1s ease-out;
}


.changebgcolor5.active {
    background: linear-gradient(0deg, rgb(17 17 17) 0%, rgb(19 123 222 / 83%) 50%, rgb(17 17 17) 100%);transition: 2s ease-out;
}


.herograd.active {
    background: linear-gradient(0deg, rgba(17,17,17,1) 0%, rgb(17 17 17 / 95%) 50%, rgba(17,17,17,1) 100%);
    transition: 2s ease-out;
}


/***** CHANGE FONT COLOR ON SCROLL ********/

.mix-blend-mode body {
  /* only create background gradient if mix-blend-mode is supported; otherwise, default black text will remain ledgible against a plain white background */

  color: white;
}

.mixblendmode {
  mix-blend-mode: difference; 
}


/***** HERO EVENT TITLE *****/


.heroheader.changeColor span {
  color: #FFFFFF !important;
	transition: all .65s;
}


/***************** FADE IN ON LOAD *****************/


.fadeinonload {
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}

.fadeinonload2 {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}