@media only screen and (max-width: 980px) {
.container{ width:750px;}
.headertitle{ font-size:24px;}
}

@media only screen and (max-width: 768px) {
.container{ width:100%;}
.headertitle{ font-size:24px; text-align:center; margin-bottom:20px;}
.headerimg {height: 168px;}
}

@media only screen and (max-width: 360px) {
	.footer-part{font-size:11px;}
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#333333;
	margin:0px;
	padding:0px;
	background:#f2f2f2;
}
p { font-size:15px; padding:5px 0; margin:0;}
a, a:hover {
	transition: all 0.3s ease-in-out 0s;
	text-decoration:none;
}
.container{ background: white none repeat scroll 0 0;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    width: 980px;
	padding:20px;
	box-sizing:border-box;
	}
.header-part{ text-align:center;}
.headerimg{ width:100%; height:145px; background:url(https://cdn.pesi23.com/images/classroom-basic-white-header.jpg) no-repeat bottom;}
.headertitle{ color:#12679b; font-size:28px;}
.middle-part{ min-height:500px; padding:15px 15px;}
.footer-part{ color:#898989; font-size:12px; text-align:center;}
.footer-part a{ color:#2479bb;}
.footer-part p{ line-height:20px;}

.checkoutbox { width:555px; margin:40px auto; position:relative; padding:40px 0; text-align:center; display:table;}
.checkoutbox:after { position:absolute; left:0; top:0px; content:""; background:url(https://cdn.pesi23.com/images/classroom-basic-white-divider_splatter_black_down.png) no-repeat; height:20px; width:100%;}
.checkoutbox:before { position:absolute; left:0; bottom:0px; content:""; background:url(https://cdn.pesi23.com/images/classroom-basic-white-divider_splatter_black_down.png) no-repeat; height:20px; width:100%;}
.checkoutbox span{ color:#12679b; font-size:25px;}
.checkoutbox p{ color:#000; font-size:25px;}
.price { font-size:18px !important; text-decoration: line-through;}
.greenbox { background:#e8edba; padding:30px; border-radius:20px; margin-bottom:50px;}
h2 { margin:0; padding:0; font-size:25px; font-weight:bold; text-align:center; color:#12679b;}
.greenbox ul { margin:0px; padding:0px;}
.greenbox ul li{ list-style:none;  background:url(https://cdn.pesi23.com/images/classroom-basic-white-bull10.png) no-repeat left; padding:10px 0 10px 30px;}
.blackcolor { color:#000; margin-top:20px;}
.graybg { background:#f0f0f0;}
.aboutbox { float:left; width:100%; margin-bottom:50px;}
.aboutbox ul{ margin:0; padding:0;}
.aboutbox ul li{ list-style:none; width:100%; float:left; margin:10px 0;}
.aboutbox ul li span{ width:100%; float:left;}
.yellowbg { background:#fdf6e9; padding:20px; margin-top:20px; float:left; width:100%;}
.yellowbg ul { margin:0px 20px; padding:0px; width:45%; float:left;}
.yellowbg ul li{ list-style:none;  background:url(https://cdn.pesi23.com/images/classroom-basic-white-bull15.png) no-repeat left; padding:10px 0 10px 30px;}

.workbook h2{ font-size:20px; text-align:left;}
.workbook .greencolor{ color:#296e35; width:100%; float:left;}
.workbook strong, em{width:none; float:none;} div[class*="col-"] p em {float: none;}
.lastbottom {margin:20px auto 40px auto; width:100%; clear:both; overflow:hidden; display:table; float:left;}
.lastbottom span{ font-weight:bold;}
.lastbottom ul { margin:0px 20px; padding:0px; width:100%; float:left;}
.lastbottom ul li{ list-style:none;  background:url(https://cdn.pesi23.com/images/classroom-basic-white-bull1.png) no-repeat left; padding:10px 0 10px 30px;}
.lightblue { width:550px; margin:30px auto; border:2px dashed #caecfe; padding:15px; background:#f0faff; text-align:center;}
.lightblue  h3{ font-size:35px; color:#000; font-weight:bold; text-align:center;}
.lightblue .price{ color:#a60000; font-size:30px !important; text-decoration:none;}
.payment { margin:20px 0;}


/* CSS Document */
@media only screen and (max-width: 1020px) {
.container {
	width: 900px;
}
.checkoutbox {
	text-align: center;
}

.checkoutbox a {
	display: inline-block;
}


}
 @media only screen and (max-width: 991px) {
.container {
	width: 750px;
}
.checkoutbox {
	text-align: center;
}
.checkoutbox a {
	display: inline-block;
}
.lightblue a {
	display: inline-block;
}
.yellowbg ul{width:100%;}
.lightblue h3{font-size:26px;}
.headerimg{height:186px;}
}
 @media only screen and (max-width: 767px) {
.container {
	width: 100%;
}
.headerimg{height:210px;}
.headertitle {
	color: #12679b;
	font-size: 24px !important;
}
.checkoutbox {
	width: 100% !important;
}
h2 {
	color: #12679b;
	font-size: 23px !important;
}
.yellowbg ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100% !important;
}
.lightblue {
	width: 100%;
}
.lightblue h3 {
	font-size: 26px;
}

}


.checkoutbox .img-responsive, .lightblue .img-responsive{ float:none !important; display:inline-block;}


/* This is my common style section */
    <style type="text/css">
		.body { 
						font-family: Verdana,Arial,Helvetica,sans-serif;
						font-size: 14px;						
		}
		
		.SectionArea {
						margin-left: 20px;
						margin-right: 20px;
						margin-top: 10px;
						margin-bottom: 10px;
		}
		
		.SectionWell {
						padding: 20px; 
						border-radius: 16px; 
						text-align: left; 
						font-size: 16px; 
						margin-bottom: 0px; 
						background-color: rgb(253, 246, 233)
		}
		
		.SectionBorder {
						border: dashed rgb(142,23,68); 
						border-image: none;
		}
		
		.SectionTitle { 
						color: rgb(1,102,153); 
						font-size: 24px; 
						font-weight: bold; 
						text-align: center;
					}
					
		.SectionTitle1 {
						font-weight: bold;
						font-size: 20px;
					}
		
		.SectionTitle2 {
						font-weight: bold;
						font-size: 16px;
		}
		
		.SectionBody {
						font-size: 16px;
		}
				
		.VideoContainer {
			position: relative;
			margin-top:20px;
			padding-bottom: 53%;
			padding-top: 35px;
			height: 0;
		}

		.VideoContainer iframe {
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		
		.Red { 
						color: rgb(204, 3, 0); 
		}
		
		.Orange { 
						color: rgb(181, 66, 11); 
		}
		
		.Pink { 
						color: rgb(142, 23, 68); 
		}
		
		.Blue { 
						color: rgb(1, 102, 153); 
		}
		
		.Teal { 
						color: rgb(0, 102, 102); 
		}
		
		.Gray { 
						color: rgb(102, 102, 102); 
		}
		
		.White {
						color: rgb(255, 255, 255);
		}
		
		.TanBackground { 
						background-color: rgb(253, 246, 233); 
		}
		
		.GrayBackground {
						background-color: rgb(239, 245, 250);
		}
		
		.WhiteBackground {
						background-color: rgb(255, 255, 255);
		}
		
		.left { text-align: left; }
		.right { text-align: right; }
		.center { text-align: center; }
		
		.ml5 { margin-left: 5px; }
		.ml10 { margin-left: 10px; }
		.ml20 { margin-left: 20px; }

		.mr5 { margin-right: 5x; }
		.mr10 { margin-right: 10px; }
		.mr15 { margin-right: 15px; }
		.mr20 { margin-right: 20px; }

		.mt10 { margin-top: 10px; }
		.mt20 { margin-top: 20px; }

		.mb10 { margin-bottom: 10px; }
		.mb20 { margin-bottom: 20px; }
		
		.font14 { font-size: 14px; }
		.font16 { font-size: 16px; }
		.font18 { font-size: 18px; }
		.font20 { font-size: 20px; }
		.font24 { font-size: 24px; }
    </style>
/* End of my style section */
 div[class*="col-"] p em {float: none;}