@import "@{parenturl}/wp-less/mixins.less";


#hero-container {
	display:grid;
	grid-template-columns: 40% 45% 15%;
	max-height:1000px;
	height:56.25vw;
	width:100%;
	position:relative;
	overflow:hidden;
	background-image:url('/wp-content/uploads/2018/03/Slider.jpg');

	margin-bottom:7vw;

	@media all and (min-width:1280px) {
		grid-template-rows: 285px calc((100% - 285px) * .6) calc((100% - 285px) * .4);
		grid-template-areas: 
			". . ."
			"topLeft topMiddle topRight"
			"bottomLeft bottomMiddle bottomRight";
	}
	@media all and (max-width:1279px) {
		grid-template-rows: 60% 40%;
		grid-template-areas: 
			"topLeft topMiddle topRight"
			"bottomLeft bottomMiddle bottomRight";
	}

	.top, .bottom {
		position: relative;
		z-index: 1;
		transition: opacity 0.5s ease;
	}
	
	> svg {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20%;
		z-index: 1;
		width: 75px;
		height: 77px;
		margin: auto;
		cursor: pointer;
		opacity: 1;
		transition: opacity 0.5s ease;
	}
	
	&.playedWithSound {
		.top, .bottom, > svg {
			opacity: 0;
			pointer-events: none;
		}
	}
}


#hero {
	position: absolute;
    width: 100%;
    height: calc(100% - 285px);
	@media all and (max-width:1279px) { height: 100%; }
    z-index: 0;
    bottom: 0;
	
	video {
		width: 100%;
		height: 100%;
	}
}