/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

body								{background-color: #FFFFFF;}
.spaceHolder						{height: 8rem;}
.courseWrapper						{position: relative; display: inline-block; max-width: 1200px; line-height: 1.5em; margin-top: 8rem; padding-bottom: 2rem; text-align: left; z-index: 1;}
	.courseWrapper:before			{content: ""; position: absolute; left: -2rem; top: 0; width: calc(100% + 4rem); height: 5rem; background-color: #FFFFFF; z-index: -1;}
.innerWrapper						{padding-top: 1rem;}
.banner								{position: absolute; left: 0; top: 0; width: 100%; height: 20rem; background: no-repeat center / cover; z-index: 0;}
.courseNav							{position: sticky; float: right; top: 8rem; max-width: 18rem; xheight: calc(100vh - 8rem - 1.5rem); margin: 6rem 0 3rem; xborder: 1px solid black;
									 box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15); border-radius: 0.25rem; padding-bottom: 0.5rem; line-height: 2em;}
	.courseNav .home				{display: block; xborder-bottom: 1px solid black; padding: 0.25rem 0 0.25rem 2rem; margin: 0.5rem 0 1rem; color: black;}
		.courseNav .home i			{font-size: 0.75em;}
		.courseNav .home:hover		{background-color: rgba(53, 152, 220, 0.15);}
	.courseNav ul					{padding-left: 2rem; list-style: none;}
		.courseNav ul li			{position: relative; padding: 0 2rem 0 0; transition: padding 0.25s, margin 0.25s;}
			.courseNav ul li:hover:before, .courseNav ul li.current:before	{content: ""; position: absolute; left: -1rem; top: 0; height: 100%; width: 100%; border-left: 3px solid #3598DC; background-color: rgba(53, 152, 220, 0.15);}
		.courseNav ul li a			{position: relative; display: block; color: inherit;}
h1									{display: table; xbackground-color: #3598DC; xcolor: #FFFFFF; xmargin-top: 3rem; padding: 1.5rem 0 1rem;}
.main								{xfont-size: 1.25em;}
section								{xdisplay: block; border: 1px solid transparent;}
	section ol						{margin-left: 1.15rem;}
	section ul						{margin-left: 2.15rem;}
	section ol li					{margin-bottom: 0.5rem; font-weight: bold;}
	section ol li div				{font-weight: normal;}
section blockquote					{position: relative; display: inline-block; max-width: calc(100% - 4rem); font-weight: bold; font-style: italic;}
section blockquote:before			{content: "“"; position: absolute; left: -2.5rem; top: 0.5rem; font-family: Times; font-size: 4rem; color: rgba(53, 152, 220, 0.5); z-index: -1;}
section blockquote:after			{content: "”"; position: absolute; right: -2rem; bottom: -1.25rem; font-family: Times; font-size: 4rem; color: rgba(53, 152, 220, 0.5); z-index: -1;}
section img							{width: 100%;}
.faqs								{margin-bottom: 3rem;}
		.faq						{display: block; width: 100%; margin-bottom: 1rem; text-align: left; border: 1px solid #EEEEEE; border-radius: 0.5rem; xbackground-color: rgba(0, 0, 0, 0.1);
									 box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1); overflow: hidden;}
		.faq .question				{position: relative; display: block; width: 100%; padding: 1rem 1rem 1rem 2rem; xbackground-color: rgba(0, 0, 0, 0.1); font-weight: bold; cursor: pointer;
									 transition: background-color 0.15s, color 0.1s;}
			.faq .question:not(.open):hover	{background-color: rgba(244, 156, 20, 0.25); xcolor: #FFFFFF;}
			.faq .question:before	{content: "►"; position: absolute; left: 0.5rem; top: 1.1rem; font-size: 0.75rem; transition: transform 0.25s;}
			.faq .question:hover:before	{transform: rotate(90deg);}
			.faq .question.open:hover:before	{transform: rotate(-90deg);}
		.faq .answer				{display: none; padding: 1rem;}

.prevNextButtons					{display: block; margin: 2rem 0 5rem; color: #3598DC; text-align: center;}
	.prevNextButtons a				{display: inline-block; padding: 0 1rem; cursor: pointer;}

.video								{margin-top: 1rem;}
	.video #mainVideoSRC			{display: inline-block; width: calc(41rem + 10vw); height: calc((41rem + 10vw) / 16 * 9); xmargin-top: 3rem; xbox-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);}
.salesBanner						{display: block; width: 100%; margin: 2rem 0 1rem;}
.centerButton						{display: block; width: 100%; text-align: center; margin: 1rem 0;}

.lesson								{position: relative; display: inline-block; vertical-align: top; width: 20rem; max-width: 100%; margin: 2rem; color: #000000; box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
									 border-radius: 0.5rem; transition: margin 0.25s; overflow: hidden;}
	.xlesson:hover					{margin-top: 1.75rem; margin-bottom: 2.25rem;}
	.lesson h2						{margin: 0; padding: 1rem; font-size: 1rem; xfont-weight: normal;  color: #FFFFFF; background: url("../../online-training-maken/banner.jpg") no-repeat center / 100% auto;}
	.lesson .text					{background-color: #FFFFFF; max-height: 5.4rem; padding: 0.5rem 1rem; font-size: 0.8rem; transition: max-height 0.5s;}
	.lesson.open .text				{max-height: 20rem;}
	.lesson i						{position: absolute; right: 0; bottom: 0; padding: 0.55rem 0.5rem; color: #3598DC;
									 background-image: radial-gradient(white, white, transparent); transition: transform 0.35s 0.25s;}
	.lesson.open i					{transform: rotate(180deg);}
	.lesson:nth-of-type(2n)			{background-position: left top;}
	.lesson:nth-of-type(3n)			{background-position: right bottom;}
	.lesson:nth-of-type(5n)			{background-position: left bottom;}

@media screen and (max-width: 1264px){
.courseWrapper						{max-width: 100%; padding: 0 2rem;}
.courseWrapper:before				{left: 0; width: 100%;}
}
@media screen and (max-width: 1200px){
.courseNav							{display: none;}
#mainVideoSRC						{width: calc(41rem + 10vw); height: calc((41rem + 10vw) / 16 * 9); max-width: calc(100vw - 4rem); max-height: calc((100vw - 4rem) / 16 * 9);}
}
@media screen and (max-width: 1000px){
.banner								{height: 10rem;}
.courseWrapper						{margin-top: 0;}
}
@media screen and (max-width: 500px){
.courseWrapper						{padding: 0 0.5rem;}
.lesson								{width: auto; margin: 1rem 0;}
}