/* * * * * * * * *
    STYLESHEET FOR THEORY PAGES
    @Author Mark Humphrey,
    Created 02/07/2021
 * * * * * * * * */

/* IMPORT BW_COMMON THEORY STYLES */
@import "/bw_common/css/theory.css?v=10";


/* COMMON RULE OVERRRIDES */

/* do not delete the below rule! */
.overview_menu_container .overview_content span.section_chapter {
	display: none;
}
div.content_container div.next_chapter span.next_chapter_title {
	display: none;
}

#theory_control_bar .content .content_item.center #sub_header {
	display: none;
}

div.page_wrapper div.content_container h1 {
	margin-top: 0;
}

/* END COMMON RULE OVERRIDES */

/*OVERVIEW*/

#overview_container {
	width: 100%;
	text-align: left;
}

#overview_title {
	margin-top: 0;
}

#overview_description {
	color: var(--text-lighter);
	margin-bottom: 40px;
}

#overview_content {
	display: flex;
	flex-wrap: wrap;
	gap: 3em;
	margin-top: 3.5em;
}

.overview_item {
	position: relative;
	width: calc(25% - 2.25em);
}


.overview_item img {
	display:block;
	width: 100%;
	border-radius: 0.5em;
	margin-bottom: 1.0em;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.overview_item:hover img {
	-webkit-transform: scale(1.025);
	transform: scale(1.025);
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.6);
	box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.overview_item a {
	display:block;
	width: 100%;
	text-decoration: none;
}

.overview_item a div {
	text-align: center;
	color: var(--text-lighter);
}

.overview_item a:hover div {
	color: var(--text-default);
	font-weight: bold;
}

.overview_item .chapter_item_progress {
	position: absolute;
	left: -1em;
	top: -1em;
	width: 2em;
	height: 2em;
	background: #fff;
	border-radius: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.overview_item .chapter_item_progress img {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: unset;
	border-radius: unset;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

.overview_item .chapter_item_progress.done img {
	background-color: #4ddb63;
	border-radius: 50%;
}

.overview_item .chapter_item_progress .progress_locked {
	color: #40464c;
	pointer-events: none;
	position: absolute;
	top: 0.6em;
	left: 0.71em;
}

.overview_item .chapter_item_progress .progress_locked .progress_locked_icon {
	width: 0.6em;
	height: auto;
	display: block;
	fill: currentColor;
}

/* CONTENT */

div.content_container img.full_width {
	max-width: 100%;
}

div.content_container.overview {
	overflow: visible;
}

/* END CONTENT */

/*END OVERVIEW*/

/* VIDEO COURSE */

div.content_container #course_video_container {
	position: relative;
	width: 100%;
}

div.content_container #course_video_container #course_video {
	width: 100%;
}

div.content_container div.course_video_thumbnails_container {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 2em 2em;
	margin-top: 2em;
}

div.content_container div.course_video_thumbnails_container div.thumbnail_item {
	position: relative;
	width: calc(33% - 1.25em);
	cursor: pointer;
	text-align: center;
}

div.content_container div.course_video_thumbnails_container div.thumbnail_item.disabled {
	opacity: 0.5;
	cursor: default;
	border: none;
}

div.content_container div.course_video_thumbnails_container div.thumbnail_item img.thumbnail {
	width: 100%;
	display: block;
	margin-bottom: 0.75em;
	border-radius: 0.5em;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

div.content_container div.course_video_thumbnails_container div.thumbnail_item:not(.selected):not(.disabled):hover img.thumbnail {
	-webkit-transform: scale(1.025);
	transform: scale(1.025);
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.6);
	box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

div.content_container div.course_video_thumbnails_container div.thumbnail_item.selected img.thumbnail {
	padding: 3px;
	background-color: dodgerblue;
}

div.content_container div.course_video_thumbnails_container div.thumbnail_item div.thumbnail_label {
	color: var(--text-lighter);
}

div.content_container div.course_video_thumbnails_container div.thumbnail_item.selected div.thumbnail_label,
div.content_container div.course_video_thumbnails_container div.thumbnail_item:not(.disabled):hover div.thumbnail_label {
	color: var(--text-default);
	font-weight: 500;
}

/* END VIDEO COURSE */


/* * * * * * * * *
    READSPEAKER
 * * * * * * * * */
#readspeaker_container {
	position: fixed;
	top: 7.2em;
	left: 1px;
	z-index: 10;
	width: 100%;
}

/* * * * * * * * *
    END READSPEAKER
 * * * * * * * * */

/* * * * * * * * *
    RECO
 * * * * * * * * */
div.reco_container {
	display: none;
}

div.reco_sidebar_container {
	margin-top: 2em;
}

div.reco_sidebar_container h3 {
	text-align: left;
}

div.reco_sidebar_container a {
	text-decoration: none;
}

div.reco_sidebar_container button.btn_reco_signup {
	display: block;
	width: 100%;
	margin-top: 2em;
	border: none;
	outline: none;
	cursor: pointer;
	font-weight: bold;
	padding: 0.75em 1em;
	border-radius: 0.5em;
	font-size: 1.0rem;
}

/* * * * * * * * *
    END RECO
 * * * * * * * * */


/********************

  MEDIA QUERIES

*********************/
 /* Larger Devices, Wide Screens */
@media only screen and (max-width : 1600px) {

}


 /* Larger Devices, Wide Screens */
@media only screen and (max-width : 1450px) {

}

 /* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.overview_item {
		position: relative;
		width: calc(33% - 2em);
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 992px) {
}


/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 640px) {

	#overview_content {
		justify-content: space-between;
		gap: 2em 0;
	}

	.overview_item {
		width: calc(49% - 1.25em);
	}

	div.page_wrapper div.content_container h1 {
		font-size: 1.75em;
		margin-top: 0;
		line-height: 1em;
	}

	div.content_container div.course_video_thumbnails_container div.thumbnail_item {
		width: calc(50% - 1em);
	}
}

@media only screen and (max-width : 480px) {
	#overview_content {
		padding: 0 0.5em;
	}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

/********************

  END MEDIA QUERIES

*********************/