@media screen and (min-width: 481px) and (max-width: 800px){

/* Design on all tags */
	*{
font-size: medium; font-family: times, arial, georgia;
	}
	body{
background: whitesmoke;
	}


/* Design on header tag */
	header{
width: 100%; height: 100px;
	}
	div.desktopHeader{
display: none;
	}
	div.mobileHeader{
background: white; color: black; display: grid; grid-template-columns: 80% 10% 10%; gap: 10px 0px; padding: 3%; box-shadow: 1.5px 3px 1.5px 3px lightgray;
	}
	div.mobileHeader > div{

	}
	div.headerLogo > a > img{
width: 200px; height: 50px;
	}
	div.headerHome{
text-align: center; padding: 20% 0% 0%;
	}
	div.headerHome > a > i{
font-size: x-large;
	}
	div.headerMenu{
text-align: right; padding: 20% 0% 0%;
	}
	div.headerMenu > button{
color: black; background: white;
	}
	div.headerMenu > button > i{
font-size: x-large;
	}
	div#headerMobileMenuOpen{
width: 96%; height: 95%; background: white; padding: 2%; border-radius: 7.5px 0px 7.5px 0px; box-shadow: 1.5px 3px 1.5px 3px lightgray; margin: 4% 2%; display: none; position: fixed; top: 0px; z-index: 1;
	}
	div.cancelHeaderMenu{
text-align: right;
	}
	div.cancelHeaderMenu > button{
color: black; background: white;
	}
	ul.headerMenuList{
width: 100%; display: block; background: white; 
	}
	ul.headerMenuList > a > li{
color: darkorange; background: white; font-weight: bold; padding: 3%;
	}


/* Design on template tag */
	div.template{
width: 96%; margin: 0% 2%;
	}
	div.templateImage{
width: 100%; height: 250px; border-radius: 7.5px;0
	}
	div.templateImage > h1{
font-weight: bold; font-size: x-large; font-family: times; text-align: center;
	}
	div.templateImage > p{
font-weight: normal; font-size: large; font-family: times; margin-top: 3%;
	}
	div.templateImage > img{
width: 100%; height: 100%; border-radius: 7.5px;
	}
	
	

/* Design on main tags */
	main, div.mainPro{
width: 100%; background: whitesmoke; display: block; line-height: 40px;
	}
	section{
width: 100%; background: whitesmoke; display: block
	}
	aside{
width: 100%; background: whitesmoke; display: block
	}
	div.tabView{
width: 96%; background: white; box-shadow: 1.5px 3px 1.5px 3px lightgray; margin: 8% 2%;
	}
	div.tabTitle{
width: 100%; height: 40px; background: white; color: darkorange; font-weight: bold; padding: 3% 0%; text-align: center; font-size: medium;
	}
	div.tabImage{
width: 100%; height: 100%; margin: 2% 0%;
	}
	div.tabImage > img{
width: 100%; height: 100%;
	}
	div.tabDetails{
width: 100%; background: white; color: back; font-weight: normal; padding: 3% 6%;
	}
	div#descriptionTab, div#descriptionTab > div.tabDetails, div#descriptionTab > div.tabTitle{
border-radius: 7.5px; border-left: 4px solid darkorange; text-align: center; background-image: linear-gradient(to left, orange, black); color: white;
	}
	div#visionTab, div#visionTab > div.tabDetails, div#visionTab > div.tabTitle{
border-radius: 7.5px; border-left: 4px solid black; text-align: center; background-image: linear-gradient(to left, coral, orange); color: white; 
	}
	div#missionTab, div#missionTab > div.tabDetails, div#missionTab > div.tabTitle{
border-radius: 7.5px; border-left: 4px solid tomato; text-align: center; background-image: linear-gradient(to left, orange, gray); color: white;
	}
	ul.donationList{
width: 100%; display: block;
	}
	ul.donationList > li{
width: 96%; margin: 6% 2%; padding: 3% 3%; border: 2px solid white; box-shadow: 1.5px 3px 1.5px lightgray; font-size: large; background-image: linear-gradient(to left, orange, black); color: white; text-align: center;
	}
	ul.donationList > li > i{
font-size: x-large;
	}
	div.pageView{
width: 100%; background: white; padding: 2% 2%;
	}
	div.pageTitle{
width: 100%; height: 40px; background: white; color: black; font-weight: bold; padding: 3% 0%; text-align: center;
	}
	div.pageDetails{
width: 100%; background: white; color: black;
	}
	div.loginDisplay{
width: 92%; background: white; margin: 4%; 
	}
	div.dataPagination{
width: 100%; margin: 5% 0% 0%; padding: 5% 0%; overflow: auto; white-space: nowrap; display: inline-block; text-align: center;
	}
	div.dataPagination > a{
color: white; font-weight: bold; padding: 2% 3%; margin: 2% 4%; background: darkorange; border-radius: 100%; box-shadow: 1.5px 3px 1.5px lightgray;
	}
	span.dataPaginationTag{
width: 100%; font-weight: bold; text-align: center; margin: 2% 0% 0%; color: black;
	}
	


/* Design on footer tags */	
	footer{
width: 100%; height: 100px;
	}
	div.footer{
background: white; color: black; display: block; padding: 3%; box-shadow: 1.5px 3px 1.5px 3px lightgray;
	}
	div.footer > div{
margin: 4% 0%;
	}
	div.footerLogo > a > img{
width: 200px; height: 40px;
	}
	div.footerMotto{
font-weight: bold; text-align: center;
	}



/* Design on form tags */
	input[type=text], input[type=password], input[type=file]{
width: 100%; height: 35px; border: 2px solid darkorange; border-radius: 7.5px; box-shadow: 1.5px 3px 1.5px lightgray; background: white; color: black; padding: 2%;
	}
	input[type=submit]{
font-weight: bold; color: darkorange; background: white; padding: 3%; box-shadow: 1.5px 3px 1.5px 3px lightgray; border-radius: 7.5px;
	}
	div.formEntryTitle{
font-weight: bold;
	}
	div.formEntryBoard{
margin: 0% 0% 4%;
	}
	textarea{
background: white; color: black; width: 100%; height: 200px; padding: 2% 2%; border: 1px solid lightgray; box-shadow: 1.5px 3px 1.5px lightgray; text-align: left; border-radius: 15px; margin: 0% 0% 0%; font-size: small; font-family: times; line-height: 30px; 
	}
	div#notePadToggle{
width: 100%; text-align: right; margin: 7% 0% 0%;
	}
	div#notePadToggle > button{
padding: 2% 2%; margin: 0% 2%; border-radius: 15px; color: white; background: darkorange; font-family: times; font-weight: bold; box-shadow: 1.5px 3px 1.5px lightgray;
	}
	ul#notePadControl, ul.notePadSubControl{
width: 100%; margin: 4% 0%; display: grid; grid-template-columns: 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5%; gap: 10px 15px; background: white;
	}
	ul.notePadSubControl{
width: 100%; margin: 4% 0%; display: none; grid-template-columns: 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5%; gap: 10px 15px; background: white;
	}
	ul#notePadControl > li, ul.notePadSubControl > li{
list-style: none; margin: 2% 2%; text-align: center;
	}
	ul#notePadControl > li > button, ul.notePadSubControl > li > button{
width: 25px; height: 25px; padding: 4% 2%; background: darkorange; color: white; font-weight: bold; border: 0px; border-radius: 100%; box-shadow: 1.5px 3px 1.5px lightgray;
	}
	ul#notePadQuickManualList{
width: 100%; background: white; display: none;
	}
	ul#notePadQuickManualList > li{
list-style-type: none; display: inline-flex;
	}
	div#notePadQuickManualToggle{
width: 100%; text-align: right; margin: 7% 0% 0%;
	}
	div#notePadQuickManualToggle > button{
padding: 2% 4%; margin: 0% 2%; border-radius: 15px; color: white; background: darkorange; font-family: times; font-weight: bold; box-shadow: 1.5px 3px 1.5px lightgray;
	}
	div.notePadQuickManualListsTitle{
margin: 0% 3% 0% 0%;
	}



/* Design on admin */
	ul.adminMenu{
width: 96%; margin: 4% 2% 2%; display: grid; grid-template-columns: 31% 31% 31%; gap: 10px 15px;
	}
	ul.adminMenu > a > li{
background: white; color: darkorange; font-weight: bold; box-shadow: 1.5px 3px 1.5px 3px lightgray; text-align: center; padding: 2% 0%; border-radius: 7.5px; margin: 0% 0% 5%;
	}
	div.adminView{
margin: 4% 0% 0%;
	}
	div.adminButton{
margin: 7% 0% 0%; text-align: center;
	}
	div.adminButton > a{
font-weight: bold; color: white; background: darkorange; padding: 3%; box-shadow: 1.5px 3px 1.5px 3px lightgray; border-radius: 7.5px;
	}
	div.adminViewTitle{
font-weight: bold; text-transform: capitalize;
	}
	ul.adminProfileList, ul.adminContentList{

	}
	ul.adminProfileList > li, ul.adminContentList > a > li, ul.adminContentList > li{
box-shadow: 1.5px 3px 1.5px 3px lightgray; margin: 0% 0% 5%; padding: 2% 2%;
	}
	div.adminContentDeleteButton{
margin: 4% 0%; text-align: right;
	}
	div.adminContentDeleteButton > a{
font-weight: bold; color: white; background: darkorange; padding: 2%; box-shadow: 1.5px 3px 1.5px 3px lightgray; border-radius: 7.5px;
	}	
	div.adminProfileListsTitle, div.adminContentListsTitle{
font-weight: bold; text-align: left; color: black;
	}
	div.adminProfileListsDetails{
text-align: right;
	}
	div.adminContentListsDetails{
text-align: left;
	}
	div.adminContentListsImage, div.adminContentListsVideo{
width: 100%; height: 100%;
	}
	div.adminContentListsImage > img, div.adminContentListsVideo > video{
width: 100%; height: 100%;
	}
	div#adminContentListsDescription{
height: 100px; margin: 15% 0% 0%; border-top: 2px solid lightgray;
	}



/* Design on caption */
	div.captionView{
width: 96%; background: white; margin: 8% 2%;
	}
	div.captionTitle{
width: 100%; height: 40px; background: white; color: darkorange; font-weight: bold; padding: 3% 0%; text-align: center; font-size: x-large; text-transform: uppercase;
	}
	div.captionDetails{
width: 100%; background: white; color: back; font-weight: normal; padding: 2% 0%;
	}
	ul.captionContentList > a > li{
display: grid; grid-template-columns: 25% 65%; gap: 0px 15px; box-shadow: 1.5px 3px 1.5px 3px lightgray; margin: 0% 0% 5%; padding: 2% 2%; border-bottom: 4px solid darkorange; border-radius: 0px 0px 7.5px 7.5px;
	}
	div.captionContentListsTitle{
font-weight: bold; text-align: left; color: black; font-size: medium;
	}
	div.captionContentListsImage{
width: 100%; height: 80px;
	}
	div.captionContentListsImage > img{
width: 100%; height: 100%; border-radius: 100%;
	}


}