/*
* Theme Name: FizzyPop Base Theme
* Author: FizzyPop
* Author URI: httpss://FizzyPop.nz
* Description: Just sick changing live to Dev paths
* Text Domain: FizzyPop
* © FizzyPop Ltd. All rights reserved.
* Version: 1.0
*/

/*
==================================
ANIMTATION - Yellow Wave
==================================
*/

.waveContainer {
	height:40px;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  background: rgba(0,0,0,0);
}

.invert {
 transform: scaleY(-1);
}


.spaceFix {
	height:0px;
}

.fiftywaveFix {
	border-top: 5px solid #ffDC00;
}

.yellowWave {
/* background: url(/fizzypop/images/yellowwave.svg) repeat-x;  */
	background: url(https://fizzypop.nz/images/yellowwave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.yellowWave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes yellowWave {  0% {    margin-left: 0;  }  100% {    margin-left: -1600px;  }}

@keyframes swell 
	{ 0%, 100% 
			{    
			transform: translate3d(0,-25px,0);  
			} 
			50% { 	
			transform:translate3d(0,5px,0);  
	}
}

/*
==================================
ANIMTATION - Blue Wave
==================================
*/


.blueWave {
/* background: url(/fizzypop/images/bluewave.svg) repeat-x; */
 background: url(https://fizzypop.nz/images/bluewave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.blueWave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes blueWave {  0% {    margin-left: 0;  }  100% {    margin-left: -1600px;  }}

@keyframes swell 
	{ 0%, 100% 
			{    
			transform: translate3d(0,-25px,0);  
			} 
			50% { 	
			transform:translate3d(0,5px,0);  
	}
}

/*
==================================
ANIMTATION - White Wave
==================================
*/


.whiteWave {
 background: url(https://fizzypop.nz/images/whitewave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.whiteWave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes whiteWave {  0% {    margin-left: 0;  }  100% {    margin-left: -1600px;  }}

@keyframes swell 
	{ 0%, 100% 
			{    
			transform: translate3d(0,-25px,0);  
			} 
			50% { 	
			transform:translate3d(0,5px,0);  
	}
}

/*
==================================
ANIMTATION - Pink Wave
==================================
*/


.pinkWave {
 background: url(https://fizzypop.nz/images/pinkwave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.pinkWave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes whiteWave {  0% {    margin-left: 0;  }  100% {    margin-left: -1600px;  }}

@keyframes swell 
	{ 0%, 100% 
			{    
			transform: translate3d(0,-25px,0);  
			} 
			50% { 	
			transform:translate3d(0,5px,0);  
	}
}



/*
==================================
ANIMATION - Green Wave
==================================
*/

.greenWave {
/* background: url(/fizzypop/images/greenwave.svg) repeat-x; */
	background: url(https://fizzypop.nz/images/greenwave.svg) repeat-x; 
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.greenWave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes greenWave {  0% {    margin-left: 0;  }  100% {    margin-left: -1600px;  }}

@keyframes swell 
	{ 0%, 100% 
			{    
			transform: translate3d(0,-25px,0);  
			} 
			50% { 	
			transform:translate3d(0,5px,0);  
	}
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }


}