.hero-container div{
	background-size: 4000% 4000%;
	
	/*-webkit-animation: Gradient 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	-moz-animation: Gradient 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	animation: Gradient 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;	*/	
}


@-webkit-keyframes Gradient1 {	
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@-moz-keyframes Gradient1 {
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@keyframes Gradient1 {
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@-webkit-keyframes Gradient2 {	
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@-moz-keyframes Gradient2 {
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@keyframes Gradient2 {
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@-webkit-keyframes Gradient3 {	
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@-moz-keyframes Gradient3 {
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}
@keyframes Gradient3 {
0% {		background-position: 50% 0% 	}
50% {		background-position: 50% 100%	}
100% {	background-position: 50% 0%   }
}

@-webkit-keyframes Gradient4 {	
0% {		background-position: 50% 0% 	}
40%{		background-position: 50% 60% 	}
50% {		background-position: 50% 100%	}
60%{		background-position: 50% 80% 	}
100% {	background-position: 50% 0%   }
}
@-moz-keyframes Gradient4 {
0% {		background-position: 50% 0% 	}
40%{		background-position: 50% 60% 	}
50% {		background-position: 50% 100%	}
60%{		background-position: 50% 80% 	}
100% {	background-position: 50% 0%   }
}
@keyframes Gradient4 {
0% {		background-position: 50% 0% 	}
40%{		background-position: 50% 60% 	}
50% {		background-position: 50% 100%	}
60%{		background-position: 50% 80% 	}
100% {	background-position: 50% 0%   }
}
.hero-container{	
	max-width:800px;
	margin:auto;
	background: #2e112d;		
	display:grid;		
	height:95vh;	
	grid-template-columns: repeat(11, 8.3fr);
	grid-template-rows: repeat(18, 8fr);		
}

.hero-container .hc1{
	background-image: radial-gradient(#540032, #2e112d) ;
	grid-column-start:2;
	grid-column-end:11;
	grid-row-start:1;
	grid-row-end:17;

	background-size: 4000% 4000%;
	
	-webkit-animation: Gradient1 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	-moz-animation: Gradient1 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	animation: Gradient1 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;	
}

.hero-container .hc2{
	background-image: radial-gradient(#820333, #2e112d) ;/* #540032);	*/
	grid-column-start:3;
	grid-column-end:10;
	grid-row-start:2;
	grid-row-end:16;
	
	background-size: 4000% 4000%;
	
	-webkit-animation: Gradient2 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	-moz-animation: Gradient2 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	animation: Gradient2 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;	
}

.hero-container .hc3{
	background-image: radial-gradient(#c9283e, #2e112d) ;/* #820333);	*/
	grid-column-start:4;
	grid-column-end:9;
	grid-row-start:3;
	grid-row-end:15;
	
	background-size: 4000% 4000%;
	
	-webkit-animation: Gradient3 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	-moz-animation: Gradient3 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	animation: Gradient3 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;	
}

.hero-container .hc4{
	background-image: radial-gradient(#f0433a, #2e112d) ;/*#820333);/*#c9283e);*/
	grid-column-start:5;
	grid-column-end:8;
	grid-row-start:4;
	grid-row-end:14;

	background-size: 4000% 4000%;
	
	-webkit-animation: Gradient4 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	-moz-animation: Gradient4 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	animation: Gradient4 25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;	
}

.hero-container .hc5{
	background: #2e112d;	
	grid-column-start:1;
	grid-column-end:12;
	grid-row-start:18;
	grid-row-end:19;
	background-image: linear-gradient(#2e112d, #262912) ;
	
	background-size: 100% 100%;
		
}

.hero-container .hc5 > div{
	letter-spacing:12px;
	text-align:center;
	font-size:20pt;
	color:#fff;
	
	padding:20px;
	font-family:'Nova Square',sans-serif;
	text-transform:uppercase;
}

.hero-container-small{
	grid-template-columns: repeat(3, 33fr);
	grid-template-rows: repeat(3, 33fr);
}
.hero-container .hc5-small{
	grid-column-start:1;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:3;
}