/* HIGHLIGHT */

.col-12 .highlight {
	height: 45rem;
}
.col-8 .highlight, .col-4 .highlight {
	height: 33rem;
}
.highlight .player {
	width: 100%;
	height: auto;
}
.highlight .control {
	font-size: 10rem;
	opacity: 0;
}
.highlight:hover .control {
	opacity: 0.4;
}
.highlight .control:hover {
	opacity: 0.9;
}
.highlight .text {
	padding: 0 2rem;
}
.highlight .slide-text {	
	max-height: 2.2rem;
}
.highlight:hover .slide-text {	
	max-height: 6.2rem;
}

/* HIGHLIGHT EXTENDED */

.highlight-extended {
	height: 17rem !important;
}
.highlight-extended .text {
	padding: 1rem 0;
}

@media (min-width: 1301px) {
	
}

/* breakpoint definition - desktop lowres */
@media (max-width: 1300px) and (min-width: 1008px) {

	
}

/* breakpoint definition - tablet */
@media (max-width: 1007px) { 

	.col-12 .highlight {
		height: 33rem;
	}
	.col-8 .highlight, .col-4 .highlight {
		height: 33rem;
	}

	.highlight-extended {
		height: 18rem !important;
	}
}

/* breakpoint definition - menu */
@media (max-width: 870px) {

	.highlight-extended {
		height: 18rem !important;
	}

}

/* breakpoint definition - mobile */
@media (max-width: 599px) {
	
	.highlight .slide-text {	
		max-height: 1.7rem;
	}
	.highlight:hover .slide-text {	
		max-height: 6.6rem;
	}
	
	.col-12 .highlight {
		height: 27.5rem;
	}
	.col-8 .highlight, .col-4 .highlight {
		height: 27.5rem;
	}
}

/* breakpoint definition - two lines */
@media (max-width: 520px) {
	.highlight-extended {
		height: 16.6rem !important;
	}
}

@media (max-width: 360px) {

	.highlight-extended {
		height: 16.6rem !important;
	}
}