/* Style for RedSea project */



html, body {
  height: 100%;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*
.wave {
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index: 1;
}

.wave + .wave {
  z-index: 2;
  color: #b44a4a
}
*/

body, html{
    margin:0;
    padding:0;
}
div#backsea {
    display: flex;
    flex-direction: column-reverse;
    margin:0;
    padding:0;
    background-image: linear-gradient(180deg, rgba(48,35,174,0.52) 0%, #53A0FD 36%, #FFFFFF 100%);
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%; 
    z-index: 0   
}
div#sea {
    display: block;
/*     flex-direction: column-reverse; */
    margin:0;
    padding:0;
    background: none;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;   
    z-index: 10 
}
.item{
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	top:0;
	left: 0
}
.waveCont, .waveText{
    position: absolute;
    bottom:0;
    width: 100%;
    height: 68vh;
/*     z-index: 10; */
  opacity: 0;
  z-index: 0;
    display: block;
}
.waveCont + .waveCont{
    z-index:20;
}
.waveText + .waveText{
	z-index: 30
}

.waveCont:nth-child(even) .wave{
	fill:red!important;
}
.waveText span{
    position: absolute;
    bottom: 60%;
    display: block;
    z-index: 1000;
    color:#fff;
    font-size: -webkit-xxx-large;
}