@charset "utf-8";

/* CSS Document */

@font-face {
	src: url(fonts/edwardian-script-itc-bold.ttf);
	font-family: Edwardian Script ITC;
}

@font-face {
	src: url(fonts/NIRMALAB.TTF);
	font-family: Nirmala UI-bold;
}

@font-face {
	src: url(fonts/NIRMALA.TTF);
	font-family: Nirmala UI;
}

.punjabiText {
	font-family: Nirmala UI, Raavi;
	display: inline;
}

::-webkit-scrollbar {
	width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
	background: #f1f1f1;
	background: #FFFFFF;
	background: #DDDDDD;
	z-index: 3;
}


/* Handle */

::-webkit-scrollbar-thumb {
	background: #888;
	z-index: 4;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	/**overflow-x: hidden; **/
	scroll-behavior: smooth;
}

.banner {
	width: 100%;
	position: absolute; left: 0; top: 0;
}
.banner-background {
	position: relative;
}

@media screen and (max-width: 600px) {
	.menu-links a {
		text-decoration: none;
		color: #1E1E23;
		opacity: 1;
		font-family: 'work sans', sans serif;
		font-size: 1.5em;
		font-weight: 400;
		transition: 200ms;
	}
	.menu-links a:hover {
		opacity: 0.5;
	}
	.menu-links li {
		padding: 0;
		list-style-type: none;
	}
	nav {
		background-color: #1E1E23;
		height: 65px;
	}
	.nav-background {
		position: fixed;
		background-color: #1E1E23;
		height: 65px;
		width: 100%;
		z-index: 1;
	}
	#menuToggle {
		display: flex;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		position: fixed;
		top: 25px;
		left: 25px;
		z-index: 2;
		-webkit-user-select: none;
		user-select: none;
	}
	#menuToggle input {
		display: flex;
		width: 40px;
		height: 32px;
		position: absolute;
		cursor: pointer;
		opacity: 0;
		z-index: 2;
	}
	#menuToggle span {
		display: flex;
		width: 29px;
		height: 2px;
		margin-bottom: 5px;
		position: relative;
		background: #ffffff;
		border-radius: 3px;
		z-index: 1;
		transform-origin: 5px 0px;
		transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
	}
	#menuToggle span:first-child {
		transform-origin: 0% 0%;
	}
	#menuToggle span:nth-last-child(2) {
		transform-origin: 0% 100%;
	}
	#menuToggle input:checked~span {
		opacity: 1;
		transform: rotate(45deg) translate(-3px, -1px);
		background: #36383F;
	}
	#menuToggle input:checked~span:nth-last-child(3) {
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	#menuToggle input:checked~span:nth-last-child(2) {
		transform: rotate(-45deg) translate(0, -1px);
	}
	#menu {
		position: absolute;
		width: 180px;
		height: 100vh;
		box-shadow: 0 0 10px #85888C;
		margin: -50px 0 0 -50px;
		padding: 50px;
		padding-top: 125px;
		background-color: #F5F6FA;
		-webkit-font-smoothing: antialiased;
		transform-origin: 0% 0%;
		transform: translate(-100%, 0);
		transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
	}
	body>#menu {
		overflow: scroll;
	}
	#menu li {
		padding: 10px 0;
		transition-delay: 2s;
	}
	#menuToggle input:checked~ul {
		transform: none;
	}
	#myTopnav {
		display: none;
	}

}

@media screen and (min-width: 600px) {
	nav {
		display: none;
	}
}

#myTopnav .topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
}


#myTopnav {
    transition: top 0.5s;
    top: 0;
    position: fixed;
	overflow: hidden;
	height:44px;
	padding: 20px 30px 20px 10px;
	background-color: #1E1E23;
	width: 98%;
	display: flex;
	transition: top 0.3s;
	justify-content: space-between;
	z-index: 1;
}


.topNavLinks:hover {
	transition: 0.3s ease;
	background-color: #6a6a6a;
	transition: 0.3s ease;
	color: white;
}

.topnavLinks {
	background-color: #1E1E23;
    font-size: 20px;
    font-family: Bebas Neue;
}

.topNavActive {
	border-style: solid;
	border-width: 0px 0px 5px 0px;
	border-color: white;
}

.videoDescription {
	padding: 20px, 0px;
	font-size: 20px;
	max-height: 200px;
	overflow-y: auto;
	/*background-color: rgba(255,255,255,0.80);*/
}

@media screen and (max-width: 600px) {
	.tracingSheet {
		display: block;
		width: auto;
		text-align: center;
	}
	.card {
		display: inline-flex;
	}
}

@media (min-width: 600px) {
	.topnavright {
		float: right;
	}
	.icon {
		display: none;
	}
	.topNavSocial {
		display: inline;
	}
	.videoTitle {
		width: 560px;
		margin: 25px auto;
	}
	.videoDescription {
		width: 560px;
		margin: 0 auto;
	}
	.card {
		display: inline-flex;
		width: 40%;
		justify-content: center;
	}
	.tracingCard {
		width: 80%;
	}
	.card {
		filter: brightness(0.8);
	}
	.card:hover {
		filter: brightness(1);
	}
	.resource-card {
		background-color: white;
	}
	.resource-card:hover {
		background-color: rgb(235, 235, 235);
	}
}

.fa {
	padding: 10px;
	font-size: 15px;
	height: 15px;
	width: 15px;
	text-align: center;
	text-decoration: none;
	margin: 2.5px 1.5px;
	border-radius: 50%;
}

.fa:hover {
	opacity: 0.7;
}

.logo:hover {
	transition: 0.3s ease;
	filter: brightness(80%);
}

.logo {
	border-radius: 0%;
	height:44px;
	transition: 0.3s ease;
}


.logo-mobile {
	border-radius: 0%;
	width: 40px;
	transition: 0.3s ease;
}

.facebookH {
	background: #3B5998;
	color: white;
}

.youtubeH {
	background: #bb0000;
	color: white;
	/*font-size: 30px;
	width: 30px;
	pading: 0px;
	border-radius: 0%;
	margin: 0px, 0px;*/
}

.instagramH {
	background: linear-gradient(45deg, yellow, red, purple);
	color: white;
}

.twitterH {
	background: #55ACEE;
	color: white;
}

.pinterestH {
	background: #cb2027;
	color: white;
}

.headingAboutUs {
	background-image: /*linear-gradient(rgba(249, 110, 36, 0.30), rgba(249, 110, 36, 0.20)), url("home-banner.jpg");*/
	linear-gradient(rgba(96, 96, 96, 0.60), rgba(96, 96, 96, 0.60)), url("images/home-banner.jpg");
}

.headingVideos {
	background-image: linear-gradient(rgba(96, 96, 96, 0.60), rgba(96, 96, 96, 0.60)), url("images/Floating-Letters.jpg");
	background-image: linear-gradient(rgba(96, 96, 96, 0.60), rgba(96, 96, 96, 0.60)), url("images/Floating-Letters.jpg");
}

.headingResources {
	background-image: linear-gradient(rgba(96, 96, 96, 0.60), rgba(96, 96, 96, 0.60)), url("images/Poster_Book_with_Pencil_and_Floating_Letters_2.jpg");
}
.heading-games {
	background-image: linear-gradient(rgba(96, 96, 96, 0.60), rgba(96, 96, 96, 0.60)), url("images/games/games-banner.jpg");
}

.heading {
	color: white;
	text-align: center;
	margin: 0;
	/*border: 5px;*/
	padding: 134px 70px 70px 70px;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-blend-mode: darken;
	background-size: cover;
	background-position: center;
}

.backButton a {
	text-align: left;
	text-decoration: none;
	color: white;
	font-size: 20px;
	background-color: black;
	padding: 10px;
	border-radius: 10px;
}

.headingTitle {
	font-family: Bebas Neue, Edwardian Script ITC, Helvetica, sans-serif;
	font-size: 40px;
	margin: auto;
}

.headingParagraph {
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 20px;
}

.AboutUs {
	color: black;
	border: 0px;
	padding: 50px;
	background-color: white;
	text-align: center;
}

.HomeCards {
	padding: 50px;
	background-color: white;
	text-align: center;
}

.HomeCards a {
	text-decoration: none;
}

@media (max-width: 400px) {
	.headingTitle {
		font-size: 30px;
	}
}

h2 {
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 30px;
}

.videoTitle {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color: black;
	/*
	text-shadow: 0px 0.5px 0px #999, 0px 1px 0px #888, 0px 1.5px 0px #777, 0px 2px 0px #666, 0px 2.5px 0px #555, 0px 3px 0px #444, 0px 3.5px 0px #333, 0px 4px 3.5px #001135;
	*/
}

.sectionTitle {
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif';
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 20px;
	text-align: left;
}

.AboutUsParagraph {
	font-size: 20px;
}

.resources {
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(249, 110, 36, 0.20)), url("Resources-background-brown-and-green-leaved-trees-covered-with-fog.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	text-align: center;
	align-items: center;
}

.tab {
	background-color: rgba(255, 255, 255, 1);
	padding: 50px;
}

.ResourcesImage {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 40%;
}

.VideoLessons {
	background-image: /*linear-gradient(rgba(249, 110, 36, 0.30), rgba(249, 110, 36, 0.20)), url("3D Punjabi Poster.png");*/
	linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0)), url("images/Floating-Letters.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-blend-mode: darken;
	background-size: cover;
	background-position: center;
}

.resourcesBackground {
	padding: 50px;
	text-align: center;
	background-image: /*linear-gradient(rgba(249, 110, 36, 0.30), rgba(249, 110, 36, 0.20)), url("3D Punjabi Poster.png");*/
	linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0)), url("images/Poster_Book_with_Pencil_and_Floating_Letters_2.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-blend-mode: darken;
	background-size: cover;
	background-position: center;
}

.VideoLessonsHeading {
	text-align: center;
}

.VideoAndDescription {
	width: 50%;
	padding: 10px;
	text-align: center;
}

.thumbnail {
	width: 384px;
	height: 216px;
	object-fit: cover;
}

.overlay {
	transition: .5s ease;
}

.overlay:hover {
	filter: brightness(0.8);
}

.LearnMore,
.LearnMore:link,
.LearnMore:visited {
	background: #f44336;
	color: white;
	padding: 14px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	border-radius: 5px;
	transition: .2s ease;
}

.LearnMore:hover {
	background: #F12010;
}

.Pages,
.Pages:link,
.Pages:visited {
	color: white;
	padding: 10px;
	text-align: center;
	text-decoration: none;
    font-size: 20px;
	font-family: Bebas Neue, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	display: inline-block;
}

@media (min-width:1200px) {
	.video-frame iframe {
		width: 560px
	}
	.video-frame {
		width: 560px;
		height: 315px;
	}
	.map {
		width: 100%;
		height: 100%
	}
	.footerSocialMedia {
		float: right;
	}
	.AboutUsParagraph {
		padding: 0px 150px;
	}
}

@media (max-width:1200px) {
	.AboutUs {
		padding: 50px;
	}
	.HomeCards {
		padding: 50px;
	}
	.facebook-responsive iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
	.facebook-responsive {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}
	.youtube-responsive iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
	.youtube-responsive {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}
	.resources {
		padding: 0px;
	}
	.VideoLessons {
		padding: 0px;
	}
	.resourcesBackground {
		padding: 0px;
	}
	.VideoDescriptionTable {
		display: block;
		width: auto;
	}
	.ResourcesImage {
		width: 100%;
	}
	table {
		display: block;
	}
	.copyright {
		display: inline-block;
		text-align: center;
        font-family: calibri;
	}
	.footerSocialMedia {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
}

.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transition: 0.3s;
	border-radius: 5px;
	margin: 10px;
}

.card a {
	text-decoration: none;
	color: black;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	width: 100%;
}

.card h4 {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 30px;
	margin: 0px;
}

.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.cardImage {
	object-fit: cover;
	border-radius: 5px 5px 0 0;
	height: 100%;
	width: 100%;
}

.resource-card {
	display: inline-flex;
	justify-content: center;
	width: 200px;
	height: 155px;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	transition: 0.3s;
	margin: 10px;
}

.resource-card a {
	text-decoration: none;
	color: black;
	font-weight: bold;
}

.resource-card:hover {
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.card figcaption {
	padding: 16px;
	height: 126px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.error {
	color: #FF0000;
}

.overlayText {
	position: absolute;
	display: none;
	bottom: 0;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5);
	/* Black see-through */
	color: white;
	width: 364px;
	height: 196px;
	transition: .5s ease;
	opacity: 0;
	font-size: 20px;
	padding: 10px;
	text-align: center;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

.thumbnail:hover .overlayText {
	display: block;
	opacity: 1;
	filter: brightness(1);
}


/* Form */

input[type=text],
select,
textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
}

.submitButton {
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.submitButton:hover {
	background-color: #45a049;
}

.resource-title {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

.dropbtn {
	background-color: #4CAF50;
	color: white;
	padding: 10px;
	font-size: 13px;
	border: none;
	cursor: pointer;
	border-radius: 4px;
	min-width: 160px;
}

.dropdown {
	position: relative;
	display: inline-block;
	margin: 0px 5px 10px;
}
.resources-dropdown {
	position: relative;
	display: inline-block;
	margin: 0px 5px 10px;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	cursor: pointer;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropbtn {
	background-color: #3e8e41;
}
.dropdown-resources {
	display: none;
	position: fixed;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	cursor: pointer;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

.dropdown-resources a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-resources a:hover {
	background-color: #f1f1f1
}

.resources-dropdown:hover .dropdown-resources {
	display: block;
}

.transcriptButton {
	background-color: #ECC309;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin: 20px;
}

.transcriptButton:hover {
	background-color: #EA9C03;
}

.descriptionButton {
	background-color: #ECC309;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.descriptionButton:hover {
	background-color: #EA9C03;
}

.resource-link {
	background-color: rgba(0, 0, 0, 0.3);
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	margin: 0px 10px;
	text-transform: capitalize;
	display: inline-block;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	transition: 0.3s;
}

.resource-link:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.transcript {
	background-color: rgba(255, 255, 255, 0.50);
	padding: 10px;
	max-height: 200px;
	overflow-y: auto;
}

.transcriptElement {
	padding: 8px;
}

.transcriptElement:hover {
	background-color: #DFDFDF;
}

.transcript-hidden {
	display: none;
}

.shareIcon {
	vertical-align: middle;
	display: inline-block;
	text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

.shareIcon {
	background-color: white;
	color: black;
	padding: 5px 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin: 2px;
}

.shareIcon:hover {
	background-color: rgb(170, 170, 170);
}

footer {
	color: white;
	background-color: rgb(30 30 35);
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	font-family: calibri;
}

.footerContent {
	display: inline;
}

.SocialMedia {
	background-color: transparent;
	color: white;
	background: transparent;
}

.subscribeButton {
	display: block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}

.fb_iframe_widget span {
	vertical-align: baseline !important;
}

.Subscribe,
.Subscribe:link,
.Subscribe:visited {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	background: #f44336;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 13px;
	border-radius: 5px;
	transition: .2s ease;
	height: 14px;
	padding: 7px 10px;
	vertical-align: top;
	font-weight: 500;
}

.Subscribe:hover {
	background: #F12010;
}
@media screen and (max-width: 600px) {
	#myTopnav {
		display: none;
	}
	
}


/*
table, th, td {
border: 1px solid black;
}*/


/*td {
	width: calc(100/6)% ;
	}*/