body {background-color: #f3f9f5;}

/*--------------------[ MAIN ]------------------*/
.main {
     background-image: url(/images/earlylms/course/track-01.svg);
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center center;
     height:2500px;
     width:1300px;
     margin:0 auto;
     }
.main_top h2{margin:0 0 50px 0; padding-top:100px;}
.container {}
.container .txt {width:600px; position: absolute; left:15%; top:250px;}
.container .txt:nth-child(2) {position: absolute; left:30%;; top:850px;}
.container .txt:nth-child(3) {position: absolute; left:15%; top:1450px;}
.container .txt:nth-child(4) {position: absolute; left:50%; top:1950px;}
.container .txt h2 {color:#d8ddd9; text-align: left;}
.container .txt h3 {font-weight: 500; color:#44af5c; text-align: left; margin-bottom: 20px;} 
.container .txt p {font-weight: 300; text-align: left;}

/*--------------------[ MEDIA QUERY ]------------------*/

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 

.main {height:1500px; max-width:100%; background-position: center 220px; background-size: 160%; }
.main_top h2{margin:0px auto; padding-top:100px; font-size: 2em;}
.container .txt {width:360px; padding:20px 0; position: absolute; top:220px; left:50%; transform: translate(-50%); background: rgba(255, 255, 255, 0.8);}
.container .txt:nth-child(2) {position: absolute; left:50%; transform: translate(-50%); top:680px;}
.container .txt:nth-child(3) {position: absolute; left:50%; transform: translate(-50%); top:1010px;}
.container .txt:nth-child(4) {position: absolute left:50%; transform: translate(-50%);; top:1380px; margin-bottom: 40px}
.container .txt h2 {color:#d0d0d0; text-align:center; margin-bottom: 0px; font-size: 2em;}
.container .txt h3 {font-weight: 500; color:#44af5c; text-align:center; margin-bottom: 20px; font-size: 1.3em;} 
.container .txt p {font-weight: 300; text-align:center; font-size: 0.9em;}
    
    
}

@media only screen and (min-device-width : 667px) and (max-device-height : 414px) {
.main {height:1500px; width:680px; background-position: center 150px; background-size: 100%; margin-bottom: 50px;}
.main_top h2{margin:0px auto; padding-top:100px; font-size: 2.2em;}
.container .txt {width:600px; padding:20px 0;position: absolute; top:220px; left:50%; transform: translate(-50%); background: rgba(255, 255, 255, 0.8); padding:10px;}
.container .txt:nth-child(2) {position: absolute; left:50%; transform: translate(-50%); top:560px;}
.container .txt:nth-child(3) {position: absolute; left:50%; transform: translate(-50%); top:820px;}
.container .txt:nth-child(4) {position: absolute left:50%; transform: translate(-50%);; top:1120px; margin-bottom: 40px}
}