/* scroll to top button start */
		.scrollToTop {
			padding: 10px 10px 0 10px;
			background-color: hsl(205,44%,47%);
			border: none;
			color: white;
			font-size: 1.5em;
			opacity: 70%;
			position: fixed;
			bottom: 5px;
			right: 5px;
			cursor: pointer;
			/* visibility: hidden; */
		}
		/* scroll to top button ends */

		/* mobile side bar starts */
		.hamburger {
		font-size: 1.8em;
		font-weight: bold;	
		padding-left: 10px;
		padding-top: 2px;
		/* padding-right: 4px;  */      
		outline: none;
		float: left;
		color: White;
		}


		
.overlay {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: hsl(205,44%,47%);
	overflow-x: hidden;
	transition: 0.5s;
 }
 
 .overlay-content {
	position: relative;
	top: 10%;
	width: 100%;
	/* text-align: center; */
	margin-top: 20px;
 }
 
 .overlay a {
	padding: 5px;
	text-decoration: none;
	font-size: 1.3em;
	color: whitesmoke;
	display: block;
	transition: 0.3s;	
 }
 
 .overlay a:hover, .overlay a:focus {
	color: #f1f1f1;
 }
 
 .overlay .closebtn {
	position: absolute;
	top: 20px;
	right: 45px;
	font-size: 60px;
 }

 .sidebar-items {
	 list-style-type: none;
	 padding-inline-start: 30px;
 }

 
		/* mobile sidebar ends */

		html, body, .heading-one{
			padding: 0;
			margin: 0; 
		}
		body{
			font-family: 'calibri', 'helvetica', sans-serif;			
		}

		.heading-one{
			font-size: 2.1em;
			color:  white;
			text-shadow: 1px 1px 2px lightblue;
		}
		.heading-main{
			color: #4381ad;
			text-shadow: 1px 1px 2px lightblue;
			font-size: 2.1em;
		}
		.heading-two{
			font-size: 1.9em;
			color: #4381ad;
			text-shadow: 0.4px 0.4px 0.4px lightblue;
		}
		.heading-three{
			font-size: 1.6em;
			color: #4381ad;
			text-shadow: 0.2px 0.2px 0.2px lightblue;
		}
		.headerbar{
			background: rgb(67,129,173);
			background: linear-gradient(180deg, rgba(67,129,173,1) 74%, rgba(40,84,116,1) 100%);
			text-align: center;
			-webkit-box-shadow: 0 10px 6px -6px #777;
			-moz-box-shadow: 0 10px 6px -6px #777;
			box-shadow: 0 10px 6px -6px #777;
			padding:  5px 0 15px 0;
		}

		.sidebar{
			display: none;
		}

		.text-link {
			color: rgb(0, 63, 238);
			cursor: pointer;
			text-decoration: none;
			font-size: 1.3rem;
			border-bottom: 1px dotted rgb(0, 63, 238);
		}

		li {
			font-size: 1.3rem;
			line-height: 2em;
		}

		/* li markers starts */

			.marker-tick > li::marker{
			content: "✔ ";
			color: darkgray;
		 	}

		 	.marker-cross > li::marker{
			content: "✖ ";
			color: darkgray;
		 	}

		 	.marker-tire > li::marker{
			content: "◉ ";
			color: darkgray;
		 	}
			 
		/* li markers ends */

		.para{
			font-size: 1.3rem;
			line-height: 1.6em;
		}	


		.main-content{
			margin: 12px 10px;
		}

		
		footer.footer {
			display: flex;
			flex-wrap: wrap-reverse;
			justify-content: center;
			background-color: #333;
			color: hsl(205,90%,75%);
			font-size: 1.1em;
			text-align: center;
			margin: 0;
			margin-top: 30px;
			padding: 15px 20px 15px 20px;
		}
						
		footer.footer p {
			margin: 10px 0 10px 0;
			padding: 0;
			font-size: 1.1em;
		}

		.footer-link {
			text-decoration: none;
			color: rgb(138, 202, 248);
			display: inline-block;			
		}

		.footer-link:hover {
			color: whitesmoke;
			text-decoration: underline;
		}

		.footer-div {
			width: 100%;
			margin: 0 10px 0 10px;
		}

		.topics > li::marker {
			color: blue;
		}

		

		/* ----------------------  responsive table start */

		table {
			border-collapse: collapse;
			border-spacing: 0;
			width: 100%;
			border: 1px solid #ddd;
		 }
		 
		 th,
		 td {
			text-align: left;
			padding: 8px;
		 }
		 
		 tr:nth-child(even) {
			background-color: #f2f2f2;
		 }
		 
		 sup {
			vertical-align: super;
			font-size: smaller;
		 }
		 
		 tr > td:nth-of-type(2) {
			width: 40%;
		 }
		 
		 table {
			margin-top: 10px;
			margin-bottom: 10px;
		 }
		 
		 th {
			vertical-align: middle;
			font-weight: 500;
		 }
		 
		 .footnotes {
			font-size: 0.8em;
			font-family: serif;
		 }
		 
		 ol.notes {
			counter-reset: list;
			margin-left: 0;
		 }
		 ol.notes > li {
			list-style: none;
		 }
		 ol.notes > li:before {
			content: counter(list, decimal) ") ";
			counter-increment: list;
		 }
	
		/* ----------------------  responsive table end */

		.desktop-ad{
			display: none;
		}

		
		


	   @media screen and (min-width: 970px) {
			/* grid starts */
			 body{
				display: grid;
				grid-template-columns: 320px 1fr;
				grid-template-rows: auto auto auto;

				grid-template-areas: 
				"header header"
				"sidebar main"
				"footer footer";    
			 }                  
			 .headerbar{
				grid-area: header;
			 }
			 .sidebar{
				grid-area: sidebar;            
			 }
			 .main-content{
				grid-area: main;   
			 }
			.footer{
				grid-area: footer;            
			 }
			 /* grid ends */

			 /* mobile nav  starts*/
			 .hamburger {
				 display: none;
			 }
			 .sidebar1{
				 display: none;
			 }
			 /* mobile nav ends*/

			 .sidebar {
				display: block;   
				background-color: white;
				margin-left: 15px;
				margin-top: 25px;
				line-height: 1.5em;
			 }

			 a.sidebar-link {
				margin: 5px 0 0 0;
				display: block;
				padding: 15px 15px 15px 15px;
				font-size: 1.3em;
				text-decoration: none;
				color: hsl(205,44%,20%);
				background-color: white;
				border: 2px solid hsl(205,44%,47%);
				border-radius: 15px;
				-webkit-transform: all 2s;
				-ms-transform: all 2s;
				transform: all 2s;
				cursor: pointer;
				font-weight: 500;	
				line-height: 1.5em;
			 }

			.active-sidebar-link {
				margin: 5px 0 0 0;
				display: block;
				padding: 15px 15px 15px 15px;
				text-decoration: none;
				border: 2px solid rgb(3, 62, 104);
				border-radius: 15px;
				-webkit-transform: all 2s;
				-ms-transform: all 2s;
				transform: all 2s;
				cursor: pointer;
				font-weight: 500;
				font-size: 1.3em;		

				background-color: hsl(205,44%,47%);
				color: white;
				outline: none;
				line-height: 1.5em;
			}

			a.sidebar-link:hover {
				background-color: hsl(205,44%,47%);
				color: white;
				font-weight: 500;
				line-height: 1.5em;
			}

			.other-topic {
				margin: 5px 0 0 0;
				display: block;
				padding: 15px 15px 15px 15px;
				text-decoration: none;
				border-radius: 15px;
				-webkit-transform: all 2s;
				-ms-transform: all 2s;
				transform: all 2s;
				cursor: pointer;
				font-weight: 600;
				font-size: 1.3em;	

				background-color: #dae7f1;
				border: 2px solid rgb(3, 62, 104);
				color: rgb(3, 62, 104);
				outline: none;
			}


			.main-content{
				margin: 12px 25px;
			}

	
			footer.footer {
				display: flex;
				flex-wrap: wrap-reverse;
				justify-content: center;
				background-color: #333;
				color: hsl(205,90%,75%);
				font-size: 1em;
				text-align: center;
				margin: 0;
				margin-top: 30px;
				padding: 15px 20px 15px 20px;
			}
						
			footer.footer p {
				margin: 10px 0 10px 0;
				padding: 0;
			}

			.footer-link {
				text-decoration: none;
				color: hsl(205,90%,75%);
				display: inline-block;
			}

			.footer-link:hover {
				color: whitesmoke;
				text-decoration: underline;
			}

			.footer-div {
				width: 35%;
				/* background-color: blue; */
				margin: 0 10px 0 10px;
			}	

		}

/*  mobile and desktop ads start */
@media screen and (min-width: 728px) {
	/* desktop ad */
	.desktop-ad{
		display: block;
	}

	.mobile-ad {
		display: none;
	}
}

@media screen and (max-width: 728px) {
/* desktop ad */
.desktop-ad{
display: none;
}

.mobile-ad {
display: block;
}
}
/*  mobile and desktop ads end */