/********** lessons **********/
.container.LESSONS {width: 86.0%; margin: 0% 0% 0% 0%; padding: 3% 7% 3% 7%;}

.LESSONS h2 {margin: 0% 0% 1% 0%; font-size: 170%; line-height: 1.2;}

.LESSONS p {margin: 0% 0% 2% 0%; font-size: 125%; line-height: 1.4;}
.LESSONS ul {margin: 0% 0% 0% 0%; text-align: center;}
.LESSONS ul li {margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; font-size: 125%; line-height: 1.4; display: block;}

.LESSONS .span_4_of_4 {width: 100.00%; margin: 0% 0% 0% 0%; padding: 0%;}
.LESSONS .span_4_of_4.C {width: 50.00%; margin: 0% 0% 0% 0%; padding: 3% 25% 0% 25%;}

.LESSONS .span_2_of_4.L {width: 42.00%; margin: 0% 0% 1.5% 0%; padding: 0% 4% 0% 4%;}
.LESSONS .span_2_of_4.R {width: 42.00%; margin: 0% 0% 1.5% 0%; padding: 0% 4% 0% 4%;}



.photoLESSON_D {height: 480px; margin: 0%; background: url('../../photos/photoLesson_D.png') no-repeat; background-position: 50% 50%; background-size: cover; border: 1px solid #000; }

.photoLESSON_G {height: 480px; margin: 0%; background: url('../../photos/photoLesson_G.png') no-repeat; background-position: 50% 50%; background-size: cover; border: 1px solid #000;}

.photoLESSON_A {height: 480px; margin: 0%; background: url('../../photos/photoLesson_A.png') no-repeat; background-position: 50% 50%; background-size: cover; border: 1px solid #000;}




/***** 1360px ******/
@media only screen and (max-width: 1360px) {
.LESSONS .span_2_of_4.L {width: 42.00%; margin: 0% 0% 1.5% 0%; padding: 0% 4% 0% 4%;}
.LESSONS .span_2_of_4.R {width: 42.00%; margin: 0% 0% 1.5% 0%; padding: 0% 4% 0% 4%;}

.photoLESSON_D {height: 340px; margin: 0%; background: url('../../photos/photoLesson_D.png') no-repeat; background-position: 50% 50%; background-size: cover; border: 1px solid #000;}

.photoLESSON_G {height: 340px; margin: 0%; background: url('../../photos/photoLesson_G.png') no-repeat; background-position: 50% 50%; background-size: cover; border: 1px solid #000;}
}



/***** TEXT 1200px ******/
@media only screen and (max-width: 1200px) {
.LESSONS h2 {margin: 0% 0% 1% 0%; font-size: 160%; line-height: 1.2;}

div.photoLESSON_D {height: 350px;}
div.photoLESSON_G {height: 350px;}

.LESSONS p {margin: 0% 0% 2% 0%; font-size: 115%; line-height: 1.4;}
}




/***** TEXT 1000px ******/
@media only screen and (max-width: 1000px) {
.LESSONS h2 {margin: 0% 0% 1% 0%; font-size: 150%; line-height: 1.2;}


.LESSONS .span_2_of_4.L {width: 42.00%; margin: 0% 0% 1.5% 0%; padding: 0% 4% 0% 4%;}
.LESSONS .span_2_of_4.R {width: 42.00%; margin: 0% 0% 1.5% 0%; padding: 0% 4% 0% 4%;}

div.photoLESSON_D {height: 340px;}
div.photoLESSON_G {height: 340px;}

.LESSONS p {margin: 0% 0% 2% 0%; font-size: 105%; line-height: 1.4;}
.LESSONS ul li {margin: 0% 0% 1% 0%; font-size: 105%; line-height: 1.4;}
}



/***** TEXT 940px ******/
@media only screen and (max-width: 940px) {
.LESSONS .span_2_of_4.L {width: 92.00%; margin: 0% 0% 1.5% 0%; padding: 0% 4% 0% 4%;}
.LESSONS .span_2_of_4.R {width: 92.00%; margin: 0% 0% 2.5% 0%; padding: 0% 4% 0% 4%;}
div.photoLESSON_G {margin: 0% 0% 10% 0%;}

}



/***** TEXT 800px ******/
@media only screen and (max-width: 800px) {
.LESSONS h2 {margin: 0% 0% 1% 0%; font-size: 140%; line-height: 1.2;}

.LESSONS p {margin: 0% 0% 2% 0%; font-size: 102%; line-height: 1.4;}
.LESSONS ul li {margin: 0% 0% 1% 0%; font-size: 102%; line-height: 1.4;}
}



/***** TEXT 600px ******/
@media only screen and (max-width: 600px) {
.LESSONS h2 {margin: 0% 0% 1% 0%; font-size: 130%; line-height: 1.2;}

div.photoLESSON_D {height: 280px;}
div.photoLESSON_G {height: 280px;}

.LESSONS p {margin: 0% 0% 2% 0%; font-size: 90%; line-height: 1.4;}
.LESSONS ul {margin: 0% 0% 2% 6%;}
.LESSONS ul li {margin: 0% 0% 1% 0%; font-size: 90%; line-height: 1.4;}
}



/***** TEXT 400px ******/
@media only screen and (max-width: 400px) {
.LESSONS h2 {margin: 0% 0% 1% 0%; font-size: 120%; line-height: 1.2;}

div.photoLESSON_D {height: 240px;}
div.photoLESSON_G {height: 240px;}

.LESSONS p {margin: 0% 0% 2% 0%; font-size: 85%; line-height: 1.4;}
.LESSONS ul li {margin: 0% 0% 1% 0%; font-size: 85%; line-height: 1.4;}
}



/***** TEXT 380px ******/
@media only screen and (max-width: 380px) {
div.photoLESSON_D {height: 220px;}
div.photoLESSON_G {height: 220px;}
}