@media screen and (max-width:628px){
	#beforetop{background-color:#0C0C0C; height:5px; font-size:36px;text-align:right;}
	
	#top{background-color: white; height:80px;font-size:36px;text-align:left;}
	#top1{height:80px; font-size:36px;text-align:left;float:left;width:180px;}
	#top1a{height:75px; font-size:36px;text-align:left;float:left;width:180px;padding-top: 5px;}
	#top1b{height:75px; float:left; width: 180px;background-image:url(../img/bcsystem.png);background-size: 100%;}
	#top2{height:80px; font-size:36px;text-align:left;float:left;}
	#top3{height:80px; font-size:36px;text-align:left;float:right;width:100px;}
	#top3a{height:30px; font-size:18px;text-align:left;float:left;padding-top:40px;}
	#top3b{height:30px; float:left;color:black;}
	
	#beforetop1{background-color:#39A0DA; height:10px; font-size:36px;text-align:right;}

	#aftertop{height:387px;background-image: url(../img/background.png);background-size: 100%;width: 100%;}
	#aftertopa{height:20%; width: 100%; font-size:20px;text-align:left;color:white;padding-left:30px;}
	#aftertopb{height:30%; width: 100%; font-size:36px;text-align:left;color:white;padding-left:30px;}
	#aftertopc{height:30%; width: 100%; font-size:20px;text-align:left;color:white;padding-left:30px;}
	#aftertopd{height:20%; width: 100%; font-size:20px;text-align:left;color:white;padding-left:30px;}
	
	#aftertop2{background-color:#39A0DA; height:60px; font-size:24px;text-align:center;color:black;line-height: 60px;color:white;}
	
	#branco{background-color:white; height:40px;}
	
	#propaganda{background-color:white; height:360px;text-align:center;}
	
	#propaganda1{height:320px;float: left;width:33%;}
	#propaganda11{height:320px;width:80%;display: inline-block;}
	#propaganda1a{height:22%;width: 100%;}
	#propaganda1aa{height:70px;width: 70px;background-image: url(../img/payslip.png);background-size: 100%;display: inline-block;}
	#propaganda1b{height:15%;width: 100%;font-size:28px;}
	#propaganda1c{height:63%;width: 100%;font-size:18px;color:darkgray;}
	
	#propaganda2{height:360px;float: left;width:34%;}
	#propaganda3{height:360px;float: left;width:33%;}
	
	#final{background-color:#0C0C0C; height:120px; font-size:18px;text-align:center;color:white;line-height: 120px;}
}

@media screen and (min-width:629px){
	
	#beforetop{background-color:#0C0C0C; height:5px; font-size:36px;text-align:right;}
	
	#top{background-color: white; height:80px;font-size:36px;text-align:left;}
	#top1{height:80px; font-size:36px;text-align:left;float:left;width:180px;}
	#top1a{height:75px; font-size:36px;text-align:left;float:left;width:180px;padding-top: 5px;}
	#top1b{height:75px; float:left; width: 180px;background-image:url(../img/bcsystem.png);background-size: 100%;}
	#top2{height:80px; font-size:36px;text-align:left;float:left;}
	#top3{height:80px; font-size:36px;text-align:left;float:right;width:100px;}
	#top3a{height:30px; font-size:18px;text-align:left;float:left;padding-top:40px;}
	#top3b{height:30px; float:left;color:black;}
	
	#beforetop1{background-color:#39A0DA; height:10px; font-size:36px;text-align:right;}

	#aftertop{height:387px;background-image: url(../img/background.png);background-size: 100%;width: 100%;}
	#aftertopa{height:20%; width: 100%; font-size:20px;text-align:left;color:white;padding-left:30px;}
	#aftertopb{height:30%; width: 100%; font-size:36px;text-align:left;color:white;padding-left:30px;}
	#aftertopc{height:30%; width: 100%; font-size:20px;text-align:left;color:white;padding-left:30px;}
	#aftertopd{height:20%; width: 100%; font-size:20px;text-align:left;color:white;padding-left:30px;}
	
	#aftertop2{background-color:#39A0DA; height:60px; font-size:24px;text-align:center;color:black;line-height: 60px;color:white;}
	
	#branco{background-color:white; height:40px;}
	
	#propaganda{background-color:white; height:360px;text-align:center;}
	
	#propaganda1{height:320px;float: left;width:33%;}
	#propaganda11{height:320px;width:80%;display: inline-block;}
	#propaganda1a{height:22%;width: 100%;}
	#propaganda1aa{height:70px;width: 70px;background-image: url(../img/payslip.png);background-size: 100%;display: inline-block;}
	#propaganda1b{height:15%;width: 100%;font-size:28px;}
	#propaganda1c{height:63%;width: 100%;font-size:18px;color:darkgray;}
	
	#propaganda2{height:360px;float: left;width:34%;}
	#propaganda3{height:360px;float: left;width:33%;}
	
	#final{background-color:#0C0C0C; height:120px; font-size:18px;text-align:center;color:white;line-height: 120px;}
	
}

div#body{margin:0px;}
div#middle{min-width: 800px}
div#middle > div {float:left; width:25%;}
div#middle > div > div {border:#000 1px solid; padding: 20px;}
div#middle > div > div > img {width:100%;}
div#bottom {clear:left; background:#666; height:200px;}