.thunderstorm {
	.thunderstorm-wrapper {
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 25;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.5));
	}

	.clouds {

		display: block;

		.cloud {
			opacity: 0.6;
			path {
				fill: #000
			}
		}

		.cloud-1 {
			top: -50px;
	    width: 600px;
	    height: 400px;
	    animation: move-thunderstorm 1000s linear infinite;
	    animation-delay: -300s;
		}

		.cloud-2 {
		  top: 75px;
		  width: 600px;
		  height: 400px;
			animation: move-thunderstorm 300s linear infinite;
			animation-delay: -50s;
		}

		.cloud-3 {
		  top: 50px;
		  width: 400px;
		  height: 300px;
			animation: move-thunderstorm 500s linear infinite;
			animation-delay: 250s;
		}

		.cloud-4 {
		  top: -200px;
		  width: 400px;
		  height: 300px;
			animation: move-thunderstorm 700s linear infinite;
			animation-delay: -250s;
		}

		.cloud-5 {
		  top: -200px;
		  width: 800px;
		  height: 300px;
			animation: move-thunderstorm 900s linear infinite;
			animation-delay: -450s;
		}
	}
}