/* smartphones, iPhone, portrait 480x320 phones */
@media (min-width:320px)  { 
	.codeDiv { text-align: left; font-size: 5px; width: auto; line-height: 1; border: solid; }
	.dlImg1 { width: 325px; position:relative; height:150px; }
	.dlImg2 { width:350px; position:relative; height:125px;	}
	.imgLogo1 {	width: 4vw; height: 4vw; }
	.imgLogo2 {	width: 40vw; height: 60px; }
	.topBan { width: 98vw; height: 70px; background-color: black; text-align: center; }
	.sidenav { width: 98vw; top: 70px; font-size: 14px; background-color: black; overflow: hidden; transition: 0.5s; height: 30px; text-align: center;	}
	.sublistItems{ font-size: 10px; display:block; background-color: black; text-align: center; }
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
@media (min-width:481px)  { 
	.codeDiv { text-align: left; font-size: 5px; width: auto; line-height: 1; border: solid; }
	.dlImg1 { width: 325px; position:relative; height:150px; }
	.dlImg2 { width:350px; position:relative; height:125px;	}
	.imgLogo1 {	width: 4vw; height: 4vw; }
	.imgLogo2 {	width: 40vw; height: 60px; }
	.topBan { width: 98vw; height: 70px; background-color: black; text-align: center; }
	.sidenav { width: 98vw; top: 70px; font-size: 16px; background-color: black; overflow: hidden; transition: 0.5s; height: 30px; text-align: center;	}
	.sublistItems{ font-size: 12px; display:block; background-color: black; text-align: center; }
}

/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
@media (min-width:641px)  { 
	.codeDiv { text-align: left; font-size: 5px; width: auto; line-height: 1; border: solid; }
	.dlImg1 { width: 325px; position:relative; height:150px; }
	.dlImg2 { width:350px; position:relative; height:125px;	}
	.imgLogo1 {	width: 4vw; height: 4vw; }
	.imgLogo2 {	width: 40vw; height: 60px; }
	.topBan { width: 98vw; height: 70px; background-color: black; text-align: center; }
	.sidenav { width: 98vw; top: 70px; font-size: 16px; background-color: black; overflow: hidden; transition: 0.5s; height: 30px; text-align: center;	}
	.sublistItems{ font-size: 12px; display:block; background-color: black; text-align: center; }
}

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:961px)  { 
	.codeDiv { text-align: left; font-size: 10px; width: auto; line-height: 1; border: solid; }
	.dlImg1 { width: 525px; position:relative; height:350px; }
	.dlImg2 { width:600px; position:relative; height:225px; }
	.imgLogo1 { width: 4vw; height: 4vw; }
	.imgLogo2 { width: 33vw; height: 80px; }
	.topBan { width: 98vw; height: 90px; background-color: black; text-align: center; }
	.sidenav { width: 98vw; top: 70px; font-size: 30px; background-color: black; overflow: hidden; transition: 0.5s; height: 42px; text-align: center; }
	.sublistItems{ font-size: 24px; display:block; background-color: black; text-align: center; }
}

/* big landscape tablets, laptops, and desktops */
@media (min-width:1025px) { 
	.codeDiv { text-align: left; font-size: 10px; width: auto; line-height: 1; border: solid; }
	.dlImg1 { width: 525px; position:relative; height:350px; }
	.dlImg2 { width:600px; position:relative; height:225px; }
	.imgLogo1 { width: 4vw; height: 4vw; }
	.imgLogo2 { width: 33vw; height: 80px; }
	.topBan { width: 98vw; height: 90px; background-color: black; text-align: center; }
	.sidenav { width: 98vw; top: 70px; font-size: 30px; background-color: black; overflow: hidden; transition: 0.5s; height: 42px; text-align: center; }
	.sublistItems{ font-size: 24px; display:block; background-color: black; text-align: center; }
}

/* hi-res laptops and desktops */
@media (min-width:1281px) { 
	.codeDiv { text-align: left; font-size: 12px; width: auto; line-height: 1; border: solid; }
	.dlImg1 { width: 525px; position:relative; height:350px; }
	.dlImg2 { width:600px; position:relative; height:225px; }
	.imgLogo1 { width: 4vw; height: 4vw; }
	.imgLogo2 { width: 33vw; height: 80px; }
	.topBan { width: 98vw; height: 90px; background-color: black; text-align: center; }
	.sidenav { width: 98vw; top: 70px; font-size: 30px; background-color: black; overflow: hidden; transition: 0.5s; height: 42px; text-align: center; }
	.sublistItems{ font-size: 24px; display:block; background-color: black; text-align: center; }	
}