/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
- VIDEO-1618
--> Video player responsiveness and layout
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Raleway:wght@200;400;700&display=swap');
/*Pseudo-classes*/
:root {
	--title-font: 'Raleway', sans-serif;
	--p-font: 'Lato', sans-serif;
	--title-font-weight: 200;
	--p-font-weight: 300;
}

/*div[class^="video__player__"] > .video-js {*/
/*	!*red outline for debugging*!*/
/*	!* outline: 1px solid red; *!*/
/*	!* padding-bottom: 56%; *!*/
/*	aspect-ratio: 16/9;*/
/*	width: 60%;*/
/*height: unset;max-width: unset;}*/

/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
- VIDEO-1619
-- Standard Video Page Template
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.template_wrapper {
	/* background-color: red; */
	width: 80%;
	margin: auto;
	padding: 20px 0 0 0;
}

.me_theme_header {
	max-width: 80%;
	margin: auto;
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.me_theme_logo_container {
	width: 144px;
	height: 100px;
	/* outline: 1px solid red; */
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.me_theme_menu_container {
}

.template_wrapper > * > .video-js {
	width: 100%;
	height: 0;
	padding-bottom: 56%;
}

.me_template_title {
	font-size: 2.5em;
	text-transform: capitalize;
	font-family: var(--title-font);
	font-weight: var(--title-font-weight);
}

.me_title_container > {
}

.me_theme_description_container {
	padding: 20px 0;
	width: 80%;
	margin: auto;
}

.me_theme_description_container > p {
	font-size: 12px;
	line-height: 1.75em;
	padding-bottom: 2em;
}

.me_theme_menu_container > .menu > ul > li.page_item {
	list-style: none;
}

li.page_item > a {
	color: red;
}

#menu-videos > li {
	list-style: none;
	padding-left: 10px;
}

#menu-videos > li > a {
	font-family: var(--p-font);
	font-weight: 200;
	text-transform: uppercase;
	color: #212121;
}

#menu-videos > li > a:hover {
	color: #793c00;
}

#menu-videos.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}