/* Style */

body {
	margin: 0;
	padding: 0;
}

.lessons {
	display: flex;
	flex-direction: column;

	margin: 12px 25% 5% 25%;
	padding: 40px;

	border-radius: 2%;

	/*text-align: center;*/

	background-color: var(--back-col-pref);
}
.lesson p {
	display: flex;
}
.lesson p span {
	margin-left: auto;
}

.lesson-list {
	margin: auto auto auto auto;
	max-width: 600px;
}
.lesson-list p {
	text-align: center;
}

.linfo p {
	margin-top: 10px;
	margin-bottom: -4px;
}

.course-content {
	margin-top: 24px;
	margin-bottom: 64px;
	text-align: left;
}

.next-last {
	display: flex;
}
.next-last .last {
	margin-left: 0;
	margin-right: auto;
}
.next-last .next {
	margin-left: auto;
	margin-right: 0;
}

img {
	border-radius: 15px;

}

/* Lesson Elements */

hbox {
	display: flex;
	flex-direction: row;
	flex-basis: 1;
}

vbox {
	display: flex;
	flex-direction: column;
	flex-basis: 1;
}

hbox div, vbox div {
	flex: 1;
	margin: 5px;
}

.align-left {
	display: flex;
	margin-left: 0;
	margin-right: auto;
}
.align-mid {
	display: flex;
	margin: auto;
}
.align-right {
	display: flex;
	margin-left: auto;
	margin-right: 0;
}

.margin-left {
	margin-left: 24px;
}
.margin-right {
	margin-right: 24px;
}
.margin-below {
	margin-bottom: 24px;
}

/* Hotspot */

.hotspots, .hotspots img {
	position: absolute;
	width: 100%;
	height: 100%;
}

.hotspot-item {
	position: absolute;
	width: 10px;
	height: 10px;
	margin-left: 2px;
	margin-top: 2px;
	background-color: #ffffff;
	border: 8px solid #29666e;
	border-radius: 50%;
	box-shadow: -0.5px 0.5px 1.5px 2px rgba(0,0,0,0.25);
	transition: 0.125s ease-out;
}
.hotspot-item:hover {
	width: 12px;
	height: 12px;
	margin-left: 0px;
	margin-top: 0px;
	border-width: 10px;
	cursor: pointer;
	transition: 0.125s ease-in;
}

.hotspot-item .hs-content {
	display: none;
	visibility: hidden;
	position: absolute;
	width: 400px;
	height: 0;
	max-height: 0px;
	left: -200px;
	bottom: 10px;
	padding: 12px;
	text-align: right;
	overflow: scroll;
	background-color: var(--back-col-pref);
	border-radius: 5px;
	box-shadow: -1.5px 1.5px 5px 2px rgba(0,0,0,0.3);
	z-index: 110;

	-ms-overflow-style: none;
	scrollbar-width: none;
}
.hotspot-item .hs-content * {
	overflow: hidden;
}

.hotspot-item:hover > .hs-content, .hs-content:hover {
	display: initial;
	visibility: visible;
	height: auto;
	max-height: 1500px;
	bottom: 10px;
}

.hotspot-item .hs-content::-webkit-scrollbar {
	display: none;
}

/* Expand Content */

.expand-head {
	display: flex;
	cursor: pointer;
}
.expand-head h2 {
	transition: ease-out 0.2125s;
	margin-left: auto;
	margin-right: 0;
}
.expand-head .ex-plus {
	margin: auto 12px auto calc(var(--font-size-pref)*0.65);
}

.expand-head:hover h2 {
	color: #5daeb1;
	transition: ease-in 0.2125s;
}

.expand-content {
	visibility: hidden;
	max-height: 0px;
	overflow: hidden;
	transition: ease-out 1.5s;
}

/* Table */

table {
	border-collapse: separate;
	border-radius: 12px;
	border-spacing: 0;
	border: 2px solid #7d7672;
}
th, td {
	border: 1.5px solid #7d7672;
	padding: 16px;
	width: 240px;
	text-align: center;
}
table tr:first-child th:first-child, table tr:first-child td:first-child {
	border-top-left-radius: 10px;
}
table tr:first-child th:last-child, table tr:first-child td:last-child {
	border-top-right-radius: 10px;
}
table tr:last-child th:first-child, table tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
table tr:last-child th:last-child, table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* Survey */

.survey input.bar {
	width: 400px;
	max-width: 100%;
	margin: 0;
	margin-top: 8px;
}

.survey .label {
	display: flex;
	width: 400px;
	max-width: 100%;
	margin-top: -16px;
}
.survey .label *:first-child {
	margin-left: 0;
	margin-right: auto;
}
.survey .label *:last-child {
	margin-left: auto;
	margin-right: 0;
}

.survey .text {
	width: calc(var(--font-size-pref)*24);
	max-width: 100%;
	height: calc(var(--font-size-pref)*2);
	font-size: var(--font-size-pref);
	transition: 0.25s linear;
}
.feedback textarea {
	width: calc(var(--font-size-pref)*24);
	height: calc(var(--font-size-pref)*16);
	font-size: var(--font-size-pref);
	transition: 0.25s linear;
}

.optList {
	display: flex;
	justify-content: middle;
	margin-bottom: calc(var(--font-size-pref));
}
.optList input {
	margin: auto 8px auto 8px;
}
.optList p {
	margin: 0;
}

/* Buttons */

.next-last a, .back, .submit {
	padding: 15px;
	border-radius: 8px;
	color: white;
	text-decoration: none;
	font-size: var(--font-size-pref);
	background-color: #29666e;
	border: none;
	cursor: pointer;
	transition: 0.175s ease-out;
}
.next-last a:hover, .back:hover, .submit:hover {
	background-color: #5e8c92;
	transition: 0.175s ease-in;
}

.back {
	padding: 10px;
	margin: auto;
}

.download {
	display: inline-flex;
	flex-direction: row;
	padding: 15px;
	border-radius: 28px;
	color: white;
	text-decoration: none;
	background-color: #f27935;
	transition: 0.175s ease-out;
}
.download:hover {
	background-color: #f4935d;
	transition: 0.175s ease-in;
	cursor: pointer;
}
.download * {
	color: white;
	margin: auto;
	text-align: middle;
}
.download img {
	margin-top: 2px;
	margin-left: 4px;
	margin-right: 8px;
}
.download p {
	margin-right: 4px;
}

/* images in modules */

/*Galaxy Fold*/
@media only screen and (width:280px) and (height:653px){
	.course-content audio{
		width:95%;
	}
}
/*small phones*/
@media screen and (min-device-width:600px){
	.course-content img{
		width:60%;
	}
}

/*IPads and Tablets*/
@media screen and (min-device-width:601px) and (max-device-width:1280px){
	.course-content img{
		width:70%;
	}
}

/*desktop*/
@media screen and (min-device-width:1281px){
	.course-content img{
		width:60%;
	}
}



/*end*/