/* Animate ship and cargo --------------------------- */
.ship {
	position: relative;
	opacity: 0.3;
	left: 10px;
	top: 0px;
	width: 80px;
	height: 100px;
	-webkit-animation-name: Ship;
	-webkit-animation-duration: 15s;
	animation-name: Ship;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes Ship {
	0% {transform:scale(0.2);opacity:1;}
	25% {transform:scale(1);opacity:1;}
	75% {transform:scale(1);opacity:1;}
	100% {transform:scale(0.2);opacity:1;}		
}

.shipcargo {
	position: relative;
	left: 0px; /*300px;*/
	top: 0px;
	opacity: 0;
	-webkit-animation-name: ShipCargo;
	-webkit-animation-duration: 15s;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	animation-name: ShipCargo;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}	
@keyframes ShipCargo {
	0% {opacity:1;left:30px;top:0px;}
	40% {opacity:1;left:-20px;top:0px;transform:scale(1)}
	45% {opacity:1;left:-90px;top:-40px;transform:scale(.4)}
	60% {opacity:1;left:-110px;top:-40px;transform:scale(.05)}	
	100% {opacity:0;left:-110px;top:-30px;transform:scale(0)}
}

.shipladder {
	position:relative;
	opacity:0;
	left: 0px; /*110px;*/
	top: 0px;
	width:80px;
	height:50px;
	-webkit-animation-name: Shipladder;		
	-webkit-animation-duration: 15s;
	animation-name: Shipladder;	
	animation-duration: 15s;
	animation-delay:0s;
	animation-iteration-count: infinite;		
}
@keyframes Shipladder {
	0% {opacity:0; left:-10px; top:0px;} /*left:110px; top:69px;*/
	35% {opacity:0;}
	40% {opacity:1;}
	50% {opacity:1;}
	65% {opacity:0;}	
	100% {opacity:0;}
}

.shipstore {
	position: absolute;
	background-image: url('../../images/products/SeaPort.png');
	background-size: auto; /* 4000px 225px; */
	width: 100%;
	height: 225px;
	font-size: 62.5%;
	font-style: Arial;
}

.radiowave {
	position:absolute;
	opacity:0;
	left: 100px;
	top: 100px;	
	-webkit-animation-name: radiowave;		
	-webkit-animation-duration: 20s;
	animation-name: radiowave;	
	animation-duration: 20s;
	animation-delay:0s;
	animation-iteration-count: infinite;		
}

@keyframes radiowave {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	50% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0);
		opacity: 0;
	}
}

/* Animate texts --------------------------------------------------*/
.first-text {
  position: absolute;
  opacity: 0;  
  left: 20%; /* 2.5rem;*/
  top: 20%; /* 5rem;*/
  font-size: 1rem;  
  animation-name: fade1;
  animation-duration: 15s;
  animation-direction:both;
  animation-iteration-count: infinite; 
  color: black;
}

.second-text {
  position: absolute;
  opacity: 0;
  /*top: 8.5rem;*/  
  left: 20%; /* 2.5rem;*/
  top: 20%; /* 5rem;*/
  font-size: 1rem; 
  animation-name: fade2;
  animation-delay: 0s;
  animation-duration: 15s;
  animation-iteration-count: infinite;  
  color:black;
}

.third-text {
  /* transform: rotate(-90deg); */
  position: absolute;
  opacity: 0;  
  /*left: 45%;
  top: 45%; */
  left: 20%; /* 2.5rem;*/
  top: 20%; /* 5rem;*/
  font-size: 1rem;
  animation-name: fade3; 
  animation-delay: 0s; /* 7.5s; */
  animation-duration: 15s;
  color:black;
  white-space: nowrap;
  animation-iteration-count: infinite;
}

.fourth-text {
  font-size: 1rem;
  position: absolute;
  opacity: 0; 
  /*top: 10.5rem;
   left: 10%;*/
  left: 20%; /* 2.5rem;*/
  top: 20%; /* 5rem;*/
  color:black;
  animation-name: fade4;
  animation-delay: 0s; /* 8.5s; */
  animation-duration: 15s; /* 9s; */
  animation-iteration-count: infinite;
}

.fifth-text {
  font-size: 1rem;
  position: absolute;
  opacity: 0; 
  /*left: 5%;
  bottom: 25%;*/
  left: 20%; /* 2.5rem;*/
  top: 20%; /* 5rem;*/
  color:black;
  animation-name: fade5;
  animation-delay: 0s; /* 10s; */
  animation-duration: 15s; /* 9s; */
  animation-iteration-count: infinite;
}

@keyframes fade1 {
  0% {position: absolute; top: 0rem; opacity: 0;}
  5% {position: absolute; top: 20%; opacity: 1; }
  15% {position: absolute; top: 20%; opacity: 1; }
  20% {position: absolute; top: 20%; opacity: 0; }  
  100% {opacity: 0;}
}
@keyframes fade2 {
  0% {position: absolute; top: 0rem; opacity: 0;}
  20% {position: absolute; top: 20%; opacity: 0; }
  25% {position: absolute; top: 20%; opacity: 1; }
  35% {position: absolute; top: 20%; opacity: 1; }
  40% {position: absolute; top: 20%; opacity: 0; }    
  100% { opacity: 0;}
}
@keyframes fade3 {
  0% {position: absolute; top: 0rem; opacity: 0;}
  40% {position: absolute; top: 20%; opacity: 0; }
  45% {position: absolute; top: 20%; opacity: 1; }
  55% {position: absolute; top: 20%; opacity: 1; }
  60% {position: absolute; top: 20%; opacity: 0; }    
  100% { opacity: 0;}
}
@keyframes fade4 {
  0% {position: absolute; top: 0rem; opacity: 0;}
  60% {position: absolute; top: 20%; opacity: 0; }
  65% {position: absolute; top: 20%; opacity: 1; }
  75% {position: absolute; top: 20%; opacity: 1; }
  80% {position: absolute; top: 20%; opacity: 0; }    
  100% { opacity: 0;}
}
@keyframes fade5 {
  0% {position: absolute; top: 0rem; opacity: 0;}
  80% {position: absolute; top: 20%; opacity: 0; }
  85% {position: absolute; top: 20%; opacity: 1; }
  95% {position: absolute; top: 20%; opacity: 1; }  
  100% {opacity: 0;}
}