.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px 10px 15px;min-height: 168px;
}

.h5, h5 {
    font-size: 1.15rem !important;  
}

.mobilearea {float:left;width:100%; background-color:#74c600;}	

.menuicon2 {display:none;}

/*New top menu*/
.mobile-nav {
	position:fixed;
	z-index:22;
	top:0;
	overflow:hidden; font-family:calibri;
	width:16.20rem;	
	height:100%; 
	color:#ffffff; margin-top:0px;
	background-color:#74c600; border-right:0px solid #fff;
}
.mobile-brand {
	font-size:17px;
	font-weight:bold;
	display:block;
	padding:6px 0 6px 10px;
	text-decoration:none; 
	color:#fff;border-bottom:1px solid #fff;
}

.menpad {padding-left:8px;}


.menpad {color:#fff; text-decoration:none;}


.mobile-brand a {color:#fff; text-decoration:none;}

.mobile-brand:hover {color:#ffffff; background:none; text-decoration:none;}


.mobile-menu a {color:#fff; text-decoration:none;}

.mobile-menu a:hover {color:#fff; text-decoration:none;}



.mobarrow {float:right; padding-top:8px; padding-right:5px;}

.mobile-menu {
	margin:0;
	padding:0 0px 0 0px;
	list-style:none
}

.mobile-overlay {
	position:fixed;
	z-index:1;
	top:0;
	left:0; 
	display:none;
	width:100%;
	height:100%;
	background-color:none
}
.mobile-open .mobile-overlay {
	display:block
}
.mobile--top .mobile-nav {
	top:-100%;
	left:0;
	width:100%;
	height:auto;
	max-height:100%;
-webkit-transition:top .6s cubic-bezier(.19, 1, .22, 1);
transition:top .6s cubic-bezier(.19, 1, .22, 1)
}
.mobile--top.mobile-open .mobile-nav {
	top:0
}
.mobile--top .mobile-hoorray, .mobile--top.mobile-open .mobile-hoorray {
	right:0
}
.mobile--left .mobile-nav {
	left:-16.25rem;
-webkit-transition:left .6s cubic-bezier(.19, 1, .22, 1);
transition:left .6s cubic-bezier(.19, 1, .22, 1)
}
.mobile--left .mobile-hoorray, .mobile--left.mobile-open .mobile-nav, .mobile--left.mobile-open .mobile-navbar .mobile-hoorray {
	left:0
}
.mobile--left.mobile-open .mobile-hoorray {
	left:16.25rem
}
.mobile--right .mobile-nav {
	right:-16.25rem;
-webkit-transition:right .6s cubic-bezier(.19, 1, .22, 1);
transition:right .6s cubic-bezier(.19, 1, .22, 1)
}
.mobile--right .mobile-hoorray, .mobile--right.mobile-open .mobile-nav, .mobile--right.mobile-open .mobile-navbar .mobile-hoorray {
	right:0
}
.mobile--right.mobile-open .mobile-hoorray {
	right:16.25rem
}
.mobile-hoorray {
	z-index:4;
	top:0;
	display:block;
	box-sizing:content-box;
	width:40px; border:0px solid red;
	padding:0;
	margin:10px;
	border:0;
	outline:0;
	background-color:transparent;
	
}
.mobile-hoorray:hover {
	cursor:pointer;
	background-color:transparent
}
.mobile-hoorray-icon {
	position:absolute;
	display:block; 
	margin-top:1px;margin-left:-6px;
}
.mobile-hoorray-icon, .mobile-hoorray-icon:after, .mobile-hoorray-icon:before {
	width:23px;
	height:2px;
	background:#fff;	z-index:44444;
}
.mobile-hoorray-icon:after, .mobile-hoorray-icon:before {
	position:absolute;
	top:-7px;
	left:0;
	content:' '
}
.mobile-hoorray-icon:after {
	top:7px
}
.mobile-open .mobile-hoorray-icon {
	background-color:transparent
}
.mobile-open .mobile-hoorray-icon:after, .mobile-open .mobile-hoorray-icon:before {
	top:0
}
.mobile-open .mobile-hoorray-icon:before {
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg)
}
.mobile-open .mobile-hoorray-icon:after {
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg)
}

@media (min-width:64em) {
.mobile--sidebar .mobile-hoorray {
display:none;
visibility:hidden
}
.mobile--sidebar .mobile-nav {
display:block;
-webkit-transform:none;
-ms-transform:none;
transform:none;
position:fixed;
width:12.5rem;
height:100%
}
.mobile--sidebar.mobile--left .mobile-nav {
left:0;
border-right:1px solid #fff
}
.mobile--sidebar.mobile--left .mobile-contents {
margin-left:12.5rem
}
.mobile--sidebar.mobile--right .mobile-nav {
right:0;
border-left:1px solid #fff
}
.mobile--sidebar.mobile--right .mobile-contents {
margin-right:12.5rem
}
.mobile--sidebar .mobile-container {
max-width:48rem
}
}
@media (min-width:75em) {
.mobile--sidebar .mobile-nav {
width:16.25rem
}
.mobile--sidebar.mobile--left .mobile-contents {
margin-left:16.25rem
}
.mobile--sidebar.mobile--right .mobile-contents {
margin-right:16.25rem
}
.mobile--sidebar .mobile-container {
max-width:60rem
}
}
.mobile--navbarTopGutter {
	padding-top:3.75rem
}
.mobile-navbar .mobile-navbar-header {
	border-bottom:1px solid #ddd;
	background-color:#fff
}
.mobile-navbar {
	z-index:3;
	top:0;
	width:100%
}
.mobile-navbar--fixed {
	position:fixed
}
.mobile-navbar-header {
	position:relative;
	z-index:3;
	box-sizing:border-box;
	width:100%;
	height:3.75rem;
padding:0 .75rem;
	text-align:center
}
.mobile-navbar .mobile-brand {
	line-height:3.75rem;
	display:inline-block;
	padding-top:0;
	padding-bottom:0; 
	text-decoration:none
}
.mobile-navbar .mobile-brand:hover {
	background-color:transparent
}
.mobile-navbar .mobile-nav {
	padding-top:3.75rem
}
.mobile-navbar .mobile-menu {
	padding-bottom:7.5rem
}
@media (min-width:64em) {
.mobile-navbar {
height:3.75rem;
border-bottom:1px solid #ddd;
background-color:#fff
}
.mobile-navbar .mobile-navbar-header {
position:relative;
display:block;
float:left;
width:auto;
padding:0;
border:0
}
.mobile-navbar .mobile-menu--right {
float:right
}
.mobile-navbar .mobile-menu li {
float:left; 
}
.mobile-navbar .mobile-menu-item {
line-height:3.75rem;
padding-top:0;
padding-bottom:0
}
.mobile-navbar .mobile-hoorray {
display:none
}
.mobile-navbar .mobile-nav {
position:relative;
left:0;
overflow:visible;
width:auto;
height:3.75rem;
padding-top:0; 
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
.mobile-navbar .mobile-menu {
padding:0
}
.mobile-navbar .mobile-dropdown-menu {
position:absolute;
width:16.25rem;
border:1px solid #ddd
}
.mobile-navbar .mobile-dropdown-menu-item {
padding-left:.75rem
}
}
.mobile-dropdown-menu {
	display:none;
	box-sizing:border-box;
	width:100%;
	margin:0;
	padding:0;
	background-color:#fff
}
.mobile-dropdown-menu>li {
	width:100%;
	list-style:none
}
.mobile-dropdown-menu-item {
	line-height:3.75rem;
	display:block;
	padding:0;
padding-right:.75rem;
	padding-left:1.5rem;
	text-decoration:none;
	color:#222
}
.mobile-dropdown-menu-item:hover {
	text-decoration:underline;
	color:#555;
	background-color:transparent
}
.mobile-dropdown.open>.mobile-dropdown-menu {
	display:block
}
.mobile-dropdown .mobile-caret {
	display:inline-block;
	width:0;
	height:0;
	margin-left:4px;
-webkit-transition:opacity .2s ease, -webkit-transform .2s ease;
transition:opacity .2s ease, -webkit-transform .2s ease;
transition:transform .2s ease, opacity .2s ease;
transition:transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
	vertical-align:middle;
	border-top:4px solid;
	border-right:4px solid transparent;
	border-left:4px solid transparent
}
.mobile-dropdown.open .mobile-caret {
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg)
}
.mobile-container {
	margin-right:auto;
	margin-left:auto
}
@media (min-width:64em) {
.mobile-container {
max-width:60rem
}
}
@media (min-width:75em) {
.mobile-container {
max-width:70rem
}
}

@media screen and (max-width:1024px) {
	.rectangle {
		padding:6px 3px 6px 3px !important; line-height:25px !important;
	  }
	  .gujratiyear2 {display:none;}
	  .menuicon {display:none;}
	  .menuicon2 {display: block;}
	  
	  .level-1::before {height:120px !important;}

	  .col-md-3 {margin-bottom:20px !important;}

	  .gap20 {margin-top:0px !important;}

}

.gap20 {margin-top:20px;}

:root {
	--level-1: #1d9bf0;
	--level-2: #f5cc7f;
	--level-3: #7b9fe0;
	--level-4: #f27c8d;
	--black: #333;
  }
  
  .rectangle {
	position: relative;
	padding:6px 3px 6px 3px;color: white;  line-height:25px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);font-size: 16px;
  }


  .level-1 {
	width:50.3%;
	margin: 0 auto 20px;
	background: var(--level-1);font-size: 16px;color: white;
  }
  
  .level-1::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 2px;
	background: var(--black);
  }
  
  
  
  .level-2-wrapper {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
  }
  
  .level-2-wrapper::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 25%;
	width: 50%;
	height: 2px;
	background: var(--black);
  }
  
  .level-2-wrapper::after {
	display: none;
	content: "";
	position: absolute;
	left: -20px;
	bottom: -20px;
	width: calc(100% + 20px);
	height: 2px;
	background: var(--black);
  }
  
  .level-2-wrapper li {
	position: relative;
  }
  
  .level-2-wrapper > li::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 20px;
	background: var(--black);
  }
  
  .level-2 {
	width: 45%;
	margin: 0 auto 30px;
	background: var(--level-4);
  }
  
  .level-2::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 20px;
	background: var(--black);
  }
  
  .level-2::after {
	display: none;
	content: "";
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-100%, -50%);
	width: 20px;
	height: 2px;
	background: var(--black);
  }

  .level-3-wrapper {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20px;
	width: 90%;
	margin: 0 auto;
  }
  
  .level-3-wrapper::before {
	content: "";
	position: absolute;
	top: -20px;
	left: calc(25% - 5px);
	width: calc(50% + 10px);
	height: 2px;
	background: var(--black);
  }
  
  .level-3-wrapper > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -100%);
	width: 2px;
	height: 20px;
	background: var(--black);
  }
  
  .level-3 {
	margin-bottom: 20px;
	background: var(--level-3);
  }
  

  .level-4-wrapper {
	position: relative;
	width: 80%;
	margin-left: auto;
  }
  
  .level-4-wrapper::before {
	content: "";
	position: absolute;
	top: -20px;
	left: -20px;
	width: 2px;
	height: calc(100% + 20px);
	background: var(--black);
  }
  
  .level-4-wrapper li + li {
	margin-top: 20px;
  }
  
  .level-4 {
	font-weight: normal;
	background: var(--level-4);
  }
  
  .level-4::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-100%, -50%);
	width: 20px;
	height: 2px;
	background: var(--black);
  }
  
 
  @media screen and (max-width: 700px) {
	.rectangle {
	  padding: 20px 10px;
	}
  
	.level-1,
	.level-2 {
	  width: 100%;
	}
  
	.level-1 {
	  margin-bottom: 20px;
	}
  
	.level-1::before,
	.level-2-wrapper > li::before {
	  display: none;
	}
	
	.level-2-wrapper,
	.level-2-wrapper::after,
	.level-2::after {
	  display: block;
	}
  
	.level-2-wrapper {
	  width: 90%;
	  margin-left: 10%;
	}
  
	.level-2-wrapper::before {
	  left: -20px;
	  width: 2px;
	  height: calc(100% + 40px);
	}
  
	.level-2-wrapper > li:not(:first-child) {
	  margin-top: 50px;
	}
  }
  
 
  
  /* Person */
.person {
	border: 1px solid black;
	padding: 10px;
	min-width: 150px;
	background-color: #FFFFFF;
	display: inline-block;
}

.person.female {
	border-color: #F45B69;
}

.person.male {
	border-color: #456990;
}

.person div {
	text-align: center;
}

.person .name {
	font-size: 16px;
}

.person .parentDrop, .person .spouseDrop, .person .childDrop {
	border: 1px dashed #000000;
	width: auto;
	min-width: 80px;
	min-height: 80px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding-top: 15px;
}

.person .parentDrop>span,
.person .spouseDrop>span,
.person .childDrop>span {
	position: absolute;
	top: 2px;
	left: 2px;
	font-weight: bold;
}
.parentDrop>.person,
.spouseDrop>.person,
.childDrop>.person {
	margin-top: 20px;
}

/* Tree */
.tree ul {
	padding-top: 20px;
	position: relative;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	display: table-cell;
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}



/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 1px solid #ccc;
	width: 50%;
	height: 20px;
}

.tree li::after {
	right: auto;
	left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
	padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after {
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 1px solid #ccc;
	width: 0;
	height: 20px;
}

.tree li .parent {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	margin-top: 10px;
}
.tree li .parent::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 3px;
    height: 10px;
}
.tree li .family {
	position: relative;
}
.tree li .family .spouse {
	position: absolute;
	top: 0;
	left: 50%;
    margin-left: 95px;
}
.tree li .family .spouse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 10px;
    height: 3px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li .child:hover,
.tree li .child:hover+.parent .person,
.tree li .parent .person:hover,
.tree li .child:hover+.parent .person+ul li .child,
.tree li .parent .person:hover+ul li .child,
.tree li .child:hover+.parent .person+ul li .parent .person,
.tree li .parent .person:hover+ul li .parent .person {
	background: none;
	color: #000;
	border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li .child:hover+.parent::before,
.tree li .child:hover+.parent .person+ul li::after,
.tree li .parent .person:hover+ul li::after,
.tree li .child:hover+.parent .person+ul li::before,
.tree li .parent .person:hover+ul li::before,
.tree li .child:hover+.parent .person+ul::before,
.tree li .parent .person:hover+ul::before,
.tree li .child:hover+.parent .person+ul ul::before,
.tree li .parent .person:hover+ul ul::before {
	border-color: #94a0b4;
}


.close {
  font-size: 1.5rem;
}

.col-12 img {
 
  cursor: pointer;
  margin:0rem 0rem 1rem 0rem;
  width:100%; max-width:100%;
}



.logindiv {font-size:18px;border-radius:6px; margin: 0 auto; padding:10px 0px 10px 0px; font-weight: bold; background-color: #1d9bf0; color: #fff; width:80%; text-align: center;}


.dattime {font-size:18px; padding:10px 0px 10px 0px; font-weight: bold; background-color: #1d9bf0; color: #fff; width: 100%; text-align: center;}

.gujratiyear {font-size:18px; padding:13px 20px 13px 20px; float: left; font-weight: bold; display: block; background-color: #9b59b6; color: #fff; width: 100%; text-align: center;}

.gujratiyear2 {font-size:18px;  padding:10px 0px 10px 0px;float: left; font-weight: bold; background-color: #74c600; color: #fff; width: 100%; margin-top:4px; text-align: center;}


.inpunbx {border-radius:6px; border:1px solid #fff; width:90%; padding:5px 5px 5px 10px;}

img {max-width: 100%;}

.date {
  font-size:18px;
  font-weight: bold; 
  font-family: 'Lato', sans-serif;margin-right:4px;margin-left:4px;
}

.bgimg {background: url('../img/family-tree-png-free-download.png') center top no-repeat; opacity:10; width: 100%;}

.tx-center {text-align: center;}

.mg-t-10 {margin-top: 10px;}

.mg-t-20 {margin-top: 20px;}

.mg-t-40 {margin-top: 40px;}

.mg-t-50 {margin-top: 50px;}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    border-right: 10px solid #ccc;
    margin:0px; font-weight: bold;
    padding:10px 4px 0px 4px;
    quotes: "\201C""\201D""\2018""\2019";
  }
  blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
  }
  blockquote:after {
    color: #ccc;
    content: close-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
  }
  blockquote p {
    display: inline;color: #333333;
  }

 .pds {width: 100%; text-align: center;color: #333333;font-size: 20px; padding-top: 159px;}

    .pds a {text-decoration: none;}
  
    .mg-t-30 {margin-top:20px;}

  .backDoor
{
  background-color: #ccc;
  position:relative;
  width:300px;
  height:400px;
  cursor: pointer;
  
  margin: 0 auto;
  margin-top:90px;
}

.door
{
  background:url('../img/door.png') no-repeat;
  position:absolute;
  top:0px;
  left:0px; cursor: pointer;
  width:300px;
  height:400px;
 
  transform-origin: left;
  /*Speed of the Door animation*/
  transition: all 0.5s ease-in-out;
}

.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg);
}