

/*************************************************************************


               L   E   S   S   O   N       P   A   G   E


*************************************************************************/


/*************************************************************************

                              B A S I C S

*************************************************************************/


.lesson-page{}

.lesson-page .page-content-wrapper{
	position: relative;
}



/*************************************************************************

                                T E X T

*************************************************************************/


.lesson-page .section-text{
	background: #f5f5f5;
	max-width: initial;
}

.lesson-page .section-text>.section-inner{
	padding: 80px 0;
	max-width: 1760px;
	box-sizing: border-box;
	margin: 0 auto;
}

@media (max-width: 1020px){

.lesson-page .section-text>.section-inner{
	padding: 40px 0;
}

}

.lesson-page .section-text .header{
	font-family: GoodHeadlineProCondNews;
	font-size: 64px;
	line-height: 60px;
	text-align: center;
	max-width: 700px;
	margin: 0 auto 30px;
}

@media (max-width: 1250px){

.lesson-page .section-text .header{
	font-size: 42px;
	line-height: 40px;
}

}

@media (max-width: 800px){

.lesson-page .section-text .header{
	text-align: left;
	font-size: 36px;
	line-height: 1em;
	margin: 0 0 30px;
}

}

.lesson-page .section-text .text{
	font-size: 20px;
	line-height: 27px;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
}

@media (max-width: 1600px){

.lesson-page .section-text .text{
	max-width: 830px;
}

}

@media (max-width: 1250px){

.lesson-page .section-text .text{
	font-size: 18px;
}

}

@media (max-width: 1020px){

.lesson-page .section-text .text{
	text-align: left;
}

}

.lesson-page .section-text>.section-inner:after{
	content: '';
	display: block;
	width: 40px;
	height: 52px;
	margin: 40px auto 0;
	background: url(/assets/img/coffee.svg) no-repeat center center/contain;
}

@media (max-width: 1020px){

.lesson-page .section-text>.section-inner:after{
	margin: 20px auto 0;
}

}



/*************************************************************************

                                I N F O

*************************************************************************/


.lesson-page .section-info{}

.lesson-page .section-info>.section-inner{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	padding: 80px 0;
}

@media (max-width: 1020px){

.lesson-page .section-info>.section-inner{
	padding: 40px 0;
	flex-direction: column;
}

}

.lesson-page .section-info .timer{
	width: calc(33.33% - 100px);
	margin-right: 100px;
}

@media (max-width: 1280px){

.lesson-page .section-info .timer{
	width: calc(40% - 50px);
	margin-right: 50px;
}

}

@media (max-width: 1020px){

.lesson-page .section-info .timer{
	width: 100%;
}

}

	.lesson-page .section-info .timer .title{
		font-family: GoodHeadlineProCondNews;
		font-size: 36px;
		line-height: 1em;
		padding-bottom: 20px;
	}

	.lesson-page .section-info .timer:after{
		content: '';
		display: block;
		width: 60px;
		height: 62px;
		background: url(/assets/img/timer.svg) no-repeat left top/contain;
	}

.lesson-page .section-info .requests{}

@media (max-width: 1020px){

.lesson-page .section-info .requests{
	width: 100%;
	margin-top: 30px;
}

}

	.lesson-page .section-info .requests .title{
		font-family: GoodHeadlineProCondNews;
		font-size: 36px;
		line-height: 1em;
		padding-bottom: 20px;
	}

	.lesson-page .section-info .requests .list{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-end;
		flex-grow: 1;
		flex-wrap: wrap;
		font-size: 20px;
		line-height: 27px;
	}

		.lesson-page .section-info .requests .list>*{
			width: 50%;
			margin-bottom: 7px;
		}

	@media (max-width: 1020px){

		.lesson-page .section-info .requests .list>*{
			width: 100%;
		}

	}



/*************************************************************************

                                L I S T

*************************************************************************/


.lesson-page .section-list{
	padding: 0;
	max-width: initial;
}

.lesson-page .section-list>.section-inner{}


.lesson-page .section-list>.section-inner>*{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
}

@media (max-width: 700px){

.lesson-page .section-list>.section-inner>*{
	flex-direction: column;
}

}

.lesson-page .section-list>.section-inner>*>*{
	width: 50%;
}

@media (max-width: 700px){

.lesson-page .section-list>.section-inner>*>*{
	width: 100%;
}

}

.lesson-page .section-list .image{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 500px;
}

@media (max-width: 1020px){

.lesson-page .section-list .image{
	min-height: 400px;
}

}

.lesson-page .section-list>.section-inner>*:nth-child(even) .image{
	order: 2;
}

@media (max-width: 700px){

.lesson-page .section-list>.section-inner>*:nth-child(even) .image{
	order: 1;
}

}

.lesson-page .section-list .info{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	box-sizing: border-box;
	padding: 20px 160px 20px 80px;
}

@media (max-width: 1020px){

.lesson-page .section-list .info{
	padding: 40px 60px 50px 20px;
}

}

.lesson-page .section-list>.section-inner>*:nth-child(even) .info{
	order: 1;
}

@media (max-width: 700px){

.lesson-page .section-list>.section-inner>*:nth-child(even) .info{
	order: 2;
}

}

	.lesson-page .section-list .info .title{
		position: relative;
		color: #67B7B7;
		font-size: 36px;
		line-height: 1em;
		font-family: GoodHeadlineProCondNews;
		padding-top: 15px;
	}

		.lesson-page .section-list .info .title:before{
			content: '';
			display: block;
			position: absolute;
			width: 80px;
			left: 0;
			top: 0;
			border-top: 3px solid #67B7B7;
		}

	.lesson-page .section-list .info .text{
		font-size: 20px;
		line-height: 27px;
		margin-top: 20px;
	}



/*************************************************************************

                                  E N D

*************************************************************************/


.lesson-page .lesson-end{
	width: 400px;
	height: 145px;
	margin: 80px auto;
	background: url(/assets/img/lesson-end.png) no-repeat center center/contain;
}

@media (max-width: 1600px){

.lesson-page .lesson-end{
	width: 250px;
	height: 90px;
}

}

@media (max-width: 700px){

.lesson-page .lesson-end{
	margin: 40px auto;
}

}


