.source-selector-div {
	visibility: hidden;
}

/* setting for large screen */

@media (min-width: 767px) {
	.navbar {
		height: 80px;
		background-image: url("../../assets/img/bg-header-lg.png");
		background-size: 160px 80px;
		background-position: center;
	}
	.header > #line-1 {
		font-size: 180%;
	}
	.header > #line-2 {
		font-size: 140%;
		line-height: 80%;
	}
	.header > #line-3, #translator {
		font-size: 130%;
		line-height: 120%;
	}
	.header > #translator {
		color: white;
	}
	.page-content {
		top: 80px;
		height: calc(100vh - 80px);
		width: 100vw;
	}
	.tree {
/* 		border: 3px solid green; */
		position: absolute;
		top: 70px;
		width: 40vw;
		height: calc(100vh - 80px - 50px - 20px);
		overflow-y: scroll;
		overflow-x: hidden;		
	}
	.content {
/* 				border: 3px solid blue; */
		position: absolute;
		top: 70px;
		right: 0;
		width: 60vw;
		height: calc(100vh - 80px - 50px - 20px);
		overflow-y: scroll;
		overflow-x: hidden;		
	}
	.tree-control {
		position: absolute;
		top: 0;
		left: 0;
		height: 50px;
		width: 50vw;		
		margin-top:20px;
		margin-left:20px;
		align: center;
		vertical-align: middle;
	}
	.tree-control> .btn {
		height: 30px;		
	}
	.source-selector-div {
		position: absolute;
		top: 0;
		right: 0;
		height: 50px;
		width: 50vw;
		margin-top: 10px;
	}
	.text-source {
		font-size: 100%;
		font-weight: bold;
	}	
}


/* setting for mobile screen */

@media (max-width: 767px) {
	.navbar {
		height: 60px;
		background-image: url("../../assets/img/bg-header-lg.png");
		background-size: 120px 60px;
		background-position: center;
	}
	.header > #line-1 {
		font-size: 140%;
		line-height: 135%;
	}
	.header > #line-2 {
		font-size: 110%;
		line-height: 100%;
	}
	.header> #line-3 {
		font-size: 90%;
		color: #ffffff;
		font-style: normal;
		font-weight: lighter;
	}
	p {
		line-height: 120%;
	}
	.page-content {
		top: 60px;
		height: calc(100vh - 60px);
		width: 100vw;		
	}
	.tree-control {
		position: fixed;
		top: 60px;
		left: 0;
		height: 30px;
		width: 100vw;
	}
	.tree-control > .btn {
		padding: 4px 6px;
	}
	.tree {
		/* 		border: 3px solid green; */
		position: fixed;
		top: 90px;
		height: 160px;
		overflow-y: scroll;
		overflow-x: hidden;
		border-bottom: 2px solid #c1c1c1;
	}
	.content {
/* 		border: 3px solid blue; */
		position: fixed;
		left: 0;		
		top: 250px;
		bottom: 50px;
		width: 100vw;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.source-selector-div {
/* 		border: 3px solid black; */
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		width: 100vw;
		z-index: 999;
		padding:0;
	}
	.text-source {
		font-size: 90%;
		padding:0;
		margin:0;
	}
	.switcher {
		margin: 10px 0;
	}
	.text-source-pr{
		font-size: 85% !important;
	}
}

body {
	overflow: hidden;
}


.header {
	font-family: serif;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	color: #fff9af;
}

.page-content {
/* 	border: 5px solid #c1c1c1; */
	background-image: url("../../assets/img/bg-vajra.png");
	background-attachment: fixed;
	background-color: #fefff2;
	position: relative;
	left 0;
	width: 100vw;
}

.tree {
	padding: 20px 10px;
	left: 0;
}

.content {
	padding: 20px 30px;
}

.text-source {
	padding: 5px 0px;
	text-align: center;
	vertical-align: middle;
}

.switcher {
	padding: auto;
	margin: auto;
	padding-top: 10px;
}

#lamrim-tree a {
	white-space: normal;
	height: auto;
	padding: 0px 50px 0px 5px;
	font-size: 100%;
}

.author {
	color: #ff0066;
	text-align: right;
	font-size: 130%;
}

h3 {
	color: blue;
}

.photo-caption {
	text-align: center;
	margin-top: 10px;
}

.lamrim-day {
	color: #000000;
/* 	font-style: italic; */
	font-weight: bold;
}


/*
 *  SCROLLBAR STYLING
 */

.custom-scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: #F5F5F5;
}

.custom-scrollbar::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
	/* 	border: 2px solid #555555; */
}