@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body{background-image:url(../images/common/gradient2.png);background-repeat:repeat-x;margin-top:0;font-family:'Montserrat',sans-serif}
.logo-block{margin-top:10px}
.logo{float:left;display:block;margin:5px 8px 10px 0;border:1px solid transparent}	
#logo_line1{font-weight:700;color:#0d48a2;font-size:1.2vw;margin:0; text-align:right}
#logo_line2{font-weight:700;color:#000;font-size:1vw;margin:10px 0}
.topnav{background-color:transparent;border-top:1px solid #000;border-bottom:1px solid #000;overflow:hidden}
.topnav a{float:left;display:block;color:#000;text-align:center;padding:14px 16px;text-decoration:none;font-size:17px}
.topnav a:hover{background-color:#ddd;color:#c0392b; text-transform: lowercase}
.topnav .icon{display:none}
.logo-block {overflow:hidden; padding: 10 10;background: transparent}
.logo-block::after {content: "";clear: both;display: block}
.logo-block-left{float:left}
.logo-block-right{float: right;text-align:right}
.container-block{width:100%;margin:0}
#about{width:100%;height:auto;padding:20px}
* {box-sizing: border-box}
.main::after {content: "";clear: both;display: table}
[class*="col-"]{float: left;padding: 15px; width:100%}
.aside{background-color: transparent;padding: 15px;color: #000000;font-size: 14px}
.footer {background-color: #cfd8dc;color: #000000;text-align: center;font-size: 12px;padding: 15px}
.aside ul{list-style:none}
.aside a:link, .aside a:visited,.aside a:active{text-decoration:underline;color:#000}
.aside a:hover, .col-s-2 a:hover, .col-2 a:hover{text-decoration:none;color:orange}
.previous-lesson,.previous-lesson-b {margin-top:20px;float:left}
.next-lesson,.next-lesson-b{margin-top:20px;float:right}
img.full{width:100%;height:auto;margin:0}
.image_left{float:left;display:block;margin:5px 8px 10px 0;border:1px solid transparent}
.image_left_small{float:left;display:block;margin:5px 8px 10px 0;border:1px solid transparent}
.image_right{float:right;display:block;margin:5px 0 0 8px;border:1px solid #fff;border-radius:8px}
.picture{border:1px solid transparent;margin:20px 0 40px;padding:0;border-radius:8px}
.inline-icon{border:0;margin:0 20px;padding:0;border-radius:0}
.inline-icon2{border:0;margin:0 2px;padding:0;border-radius:0}
audio{margin:20px 0}
.audio{text-decoration:underline}
.audio:hover .burmese{color:blue}
.audio .play{display:none;position:relative;top:0;right:0;color:#000;font-weight:700}
.audio:hover .play{display:inline}[title~=MP3]{border:0}[title~=MP3]:hover{z-index:2;opacity:.5;filter:alpha(opacity=50);transform:scale(2,2);-ms-transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);-moz-transform:scale(2,2)}
h1{font-size:5vw; color:#878778;letter-spacing:1px;word-spacing:1px;text-align:left}
h2{font-size:4vw; padding:20px 0 5px 0; border-bottom:1px dashed #999; font-weight:700;color:#305007}
h3{height:auto;margin:0;padding:0;font-weight:700;color:#009c00;font-size:22px;display:inline}
a{cursor:pointer}
.clear{margin-top:20px;height:10px;clear:both}
.clear-double{margin-top:40px;height:10px;clear:both}
.unicode{color:brown}
.noun{color:rgb(153,102,102)}
.pronoun{color:rgb(51,153,255)}
.verb{color:rgb(255,66,14)}
.adverb{color:rgb(0,102,51)}
.adjective{color:rgb(0,204,0)}
.conj{color:rgb(0,102,204)}
.particle{color:rgb(102,0,204)}
.ppm{color:rgb(255,0,204)}
.interjection{color:rgb(255,153,0)}
.burmese{color:gray}
.english{font-weight:500;color:#00008b}
.bg_yellow{background:#ffff8b}
.highlights{margin:40px 0; padding:20px; background:#e6e6fa;border:1px solid #000;border-radius:8px}
.smaller-font{font-size:80%}.font16{font-size:16px;font-weight:700;margin:30px 0 60px 10px}
.big_font{font-size:22px;color:#00008b}
.font28{font-size:28px}sup{font-size:80%;margin-right:5px}
.italic{font-style:italic;font-weight:700;color:#640000}
.mobile{line-height:40px}
.footnotes{font-size:14px;font-weight:700}
.common-tables{border-collapse:collapse;width:100%;margin-bottom:50px}
.common-tables caption{font-size:24px;padding:40px 0 20px;text-align:left}
.common-tables td,.common-tables th{border:1px solid #eee;text-align:left;vertical-align:top;padding:8px 8px 12px}
.common-tables tr:nth-child(even){background-color:#eee}
.common-tables th{font-size:18px}
.red-color,.red{color:red}
.yellow-color{color:#ff0}
.green-color{color:green}
.blue-color,.blue{color:blue}
.orange-color{color:orange}
.brown-color,.brown{color:#a52a2a}
.purple-color{color:purple}
.dark-blue-color{color:#00008b}
.grey-color{color:gray}
.bold_blue{font-weight:700;color:#00008b}
.bold_green{font-weight:700;color:green}
.bold_red{font-weight:700;color:red}
@media screen and (max-width: 600px) {
	.logo-block-left{float: none;display: block}
	.logo-block-left img{height: 40px}
	.logo-block-right{float: none}
	#logo_line1{font-size:2vw}
	#logo_line2{font-size:1.9vw}
	.topnav a:not(:first-child){display:none}
	.topnav a.icon{float:right;display:block}
	.topnav a{padding:14px 16px 14px 0; border-top:1px solid #3498DB;border-bottom:1px solid #3498DB; font-size: 14px}
	.topnav.responsive{position:relative}
	.topnav.responsive a.icon{position:absolute;right:0;top:0}
	.topnav.responsive a{float:none;display:block;text-align:left}
	[class*="col-"]{font-size: 14px;}	
	h1{margin-top:10px; margin-bottom:40px}
	h2{font-size:4vw}
	.highlights{margin:20px 0; padding:10px}
	.big_font{font-size:1rem;font-weight:700}
	.picture{width:100%}
}
@media only screen and (min-width: 600px) {
	.logo-block {width: 100%}
	.col-s-1 {width: 10%}
	.col-s-2 {width: 90%; text-align: left}
	.col-s-3 {width: 35%}
	.picture,.full{width:100%;height:auto}
	h1{margin-top:10px; margin-bottom:40px}
	h2{font-size:5vw}
	.mobile{line-height:30px}
}
@media only screen and (min-width: 768px) {
	.col-1 {width: 1%}
	.col-2 {width: 60%; text-align: justify}
	.col-3 {width: 35%}
	h1{margin-top:50px; margin-bottom:100px}
	h2{font-size:2vw}
	
}