/* 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: rgb(0,0,0);
	background-color: rgba(148, 44, 0, 0.9);
	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 {
			padding: 0;
			margin: 0;

		}
		body{
			font-family: 'Arial', sans-serif;
			box-sizing: border-box;
		}

		.heading-one{
			font-size: 2.1em;
			color:  white;
			text-shadow: 1px 1px 2px lightblue;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.heading-main{
			color: #942c00;
			text-shadow: 1px 1px 2px wheat;
			font-size: 2.3em;
			margin-bottom: 20px;
		}
		.heading-two{
			font-size: 2em;
			color: #7a2b09;
			text-shadow: 1px 1px 2px wheat;
			margin-top: 55px;
		}
		.heading-three{
			font-size: 1.5em;
			color: #a13d11;
			text-shadow: 1px 1px 2px wheat;
		}
		.headerbar{
			background: rgb(67,129,173);
			background: linear-gradient(180deg, rgba(148, 44, 0, 1) 74%, rgba(51, 15, 0, 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: 0.9em 5px;
			min-height: 65px;
		}

		.sidebar{
			display: none;
		}

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

		li {
			font-size: 1.2rem;
			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.2rem;
			line-height: 1.6em;
		}


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


		footer.footer {
			display: flex;
			flex-wrap: wrap-reverse;
			justify-content: center;
			background-color: #333;
			color: #f5deb3;
			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;
			line-height: 2.2rem;
		}

		.footer-link {
			text-decoration: none;
			color: hsl(205,90%,75%);
			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;
		}

		/*  Collapsible index start */
		.collapsible {
			background-color: #942c00;
			color: white;
			cursor: pointer;
			padding: 12px;
			width: 100%;
			border: none;
			text-align: left;
			outline: none;
			font-size: 1.2em;
		 }

		 .active, .collapsible:hover {
			background-color: #661f00;
		 }

		 .collapsible:before {
			content: '\002B';
			color: white;
			font-weight: bold;
			float: left;
			margin-left: 5px;
			margin-right: 7px;
		 }

		 .active:before {
			content: "\2212";
		 }

		 .content {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.2s ease-out;
			background-color: #f1f1f1;
		 }

		 .content>a {
			display: block;
			background-color: wheat;
			color: #942c00;
			padding: 7px 5px 7px 18px;
			border-top: 1px solid #ccc;
			text-decoration: none;
			font-size: 1.1em;
			/* font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; */
		}

		.content>a:hover {
			background-color: #942c00;
			color: white;
		}

		/*  Collapsible index end */

		/* responsive table start */
		.table-responsive {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		border: 1px solid #ddd;
		font-size: 1.1em;
		line-height: 1.6em;
		margin-top: 30px;
		margin-bottom: 30px;
		}

		.table-responsive th,
		.table-responsive td {
		text-align: left;
		padding: 8px;
		}

		.table-responsive tr:nth-child(even) {
		background-color: lightyellow;
		}

		.table-responsive tr:nth-child(odd) {
		background-color: wheat;
		}


		.table-responsive th {
		vertical-align: middle;
		font-weight: 600;
		background-color: #942c00; color: white;
		}
		/* responsive table end */

		/* audio start */
		.audio {
			outline: none; vertical-align: middle;
		}
		/* audio end */

		/* video start */
		.video {
			margin-top: 50px;
			margin-bottom: 50px;
		}
		/* video end */

		/* next page link start*/
		.lesson {
			margin: 25px 0 0 0;
		}
		.unit{
			color: #942c00;
			font-size: 1.3em;
			font-weight: bold;
		}
		.left-arrow {
			transform: rotate(180deg);
  			display: inline-block;
			color: #942c00;
		}
		.right-arrow {
			/* transform: rotate(180deg); */
  			display: inline-block;
			color: #942c00;
		}
		/* next page link end*/

		/* Vocabulary building start */
		.vocabulary-building {
			text-align: center; font-size: 2em; background-color: #942c00; padding: 10px 10px; border-bottom: 1px solid black; color: whitesmoke; margin-top: 70px;
		}
		/* Vocabulary building end */

		/* mein-auto start */
		.mein-auto{
			background-color: #796864;
			color: whitesmoke;
			padding: 20px;
			margin-top: 40px;
			margin-bottom: 40px;
			border: 1px solid #ddd;
		}
		/* mein-auto end */


	   @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.1em;
				text-decoration: none;
				color: #942c00;
				background-color: white;
				border: 2px solid #942c00;
				border-radius: 25px;
				-webkit-transform: all 2s;
				-ms-transform: all 2s;
				transform: all 2s;
				cursor: pointer;
				font-weight: 500;
				-webkit-transition-property: background-color, border;
				-o-transition-property: background-color, border;
				transition-property: background-color, border;
				-webkit-transition-duration: 0.5s;
				-o-transition-duration: 0.5s;
				transition-duration: 0.5s;
				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 hsl(205,44%,47%);
				border-radius: 25px;
				-webkit-transform: all 2s;
				-ms-transform: all 2s;
				transform: all 2s;
				cursor: pointer;
				font-weight: 500;
				font-size: 1.1em;
				-webkit-transition-property: background-color, border;
				-o-transition-property: background-color, border;
				transition-property: background-color, border;
				-webkit-transition-duration: 0.5s;
				-o-transition-duration: 0.5s;
				transition-duration: 0.5s;

				background-color: #942c00;
				border: 3px solid #942c00;
				color: white;
				outline: none;
				line-height: 1.5em;
			}

			a.sidebar-link:hover {
				background-color: #942c00;
				border: 3px solid #942c00;
				color: white;
				font-weight: 600;
				line-height: 1.5em;
			}

			.other-topic {
				margin: 5px 0 0 0;
				display: block;
				padding: 15px 15px 15px 15px;
				text-decoration: none;
				border-radius: 25px;
				/* border-bottom: 1px dashed grey; */
				-webkit-transform: all 2s;
				-ms-transform: all 2s;
				transform: all 2s;
				/* text-transform: capitalize; */
				cursor: pointer;
				font-weight: 600;
				-webkit-transition-property: background-color, border;
				-o-transition-property: background-color, border;
				transition-property: background-color, border;
				-webkit-transition-duration: 0.5s;
				-o-transition-duration: 0.5s;
				transition-duration: 0.5s;

				background-color: wheat;
				border: 3px solid #942c00;
				color: #942c00;
				outline: none;
			}


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


			footer.footer {
				display: flex;
				flex-wrap: wrap-reverse;
				justify-content: center;
				background-color: #333;
				color: #f5deb3;
				font-size: 1.1rem;
				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;
			}

			/* no ads on desktop */
			/* .mobile-ad {
				display: none;
			} */

		}

	.iframe-container {
		margin-top: 40px;
		margin-bottom: 40px;
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		height: 0;
	}

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

	/* book a1 ad starts*/

	.popup {
	  position: fixed;
	  top: 50%;
	  right: 50%;
	  transform: translate(50%, -50%);
	  display: none;
	  font-family: sans-serif;
		text-align: center;
		z-index: 10;
	}

	.contentBox {
		position: relative;
		width: 300px;
		height: 500px;
	  background-color: 	rgb(242, 242, 242);
	  border-radius: 15px;
	  border: 1px solid gray;
	  box-shadow: 2px 2px rgba(0, 0, 0, 0.1);
		z-index: 20;

	}

	.ad-image {
		height: 300px;
		width: auto;
		transform: translateY(-30px);
	}



	.contentBox h3 {
	  color: #331100;
	  line-height: 1.4em;
	  font-weight: 300;
	  font-size: 1.2em;
		z-index: 100;
		 margin-top: -.15px;
		 	z-index: 50;
	}

	.close {
	  position: absolute;
	  top: 10px;
	  right: 10px;
	  height: 30px;
	  width: 30px;
	  background: #f3f3f3 url('../../language-img/a1/popup/cross.png');
		background-repeat: no-repeat;
	  background-size: 10px;
	  background-position: center;
	  cursor: pointer;
	  border-radius: 50%;
	  z-index: 100;
	}



	.cta-ad {
	  display: inline-block;
	  padding: 10px;
	  background-color: #8d3204;
	  color: white;
	  font-family: sans-serif;
	  text-decoration: none;
	  font-size: 1.1 em;
	  border-radius: 5px;
	  border: 1px solid gray;
	  text-align: center;
	  margin-top: 10px;
		z-index: 90;

	}
	/* book a1 ad ends */

	/*  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 */

/* book banner starts */
.book-banner {
	margin-top: 35px;
	margin-left: 40px;
}

@media screen and (min-width: 728px) {
	.book-banner {
		max-width: 400px;
	}
}

.ad-image2 {
	height: 300px;
	width: auto;
}
/* book banner ends */