@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Muli');

body{
   font-family: 'Nunito', sans-serif;
}
.box{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
}
.main {
	width: 100%;
}

header {
	font-size: 16px;
	background: rgba(0,0,0,0.01);
}
.name-block {
	font-size: 2.25em;
	margin: 0;
	font-weight: 300;
}
.name-short{
	height: 48px;
}
.padd-zero{
	padding: 0;
}

.social-link{
	padding:0px 0px 5px 0px;
	margin:0 auto;
	display:block;
	overflow:hidden;
	list-style:none;
	text-align:center;
}
.social-link li{
	display: inline-block;
	padding: 0px 2px 5px 2px;
	
}
.social-link li a{
	display:block;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	font-size:20px;
	color:#F0F0F0;
	box-shadow: #777 0px 5px 5px -1px;
	border-radius:50%;
	transition:all 0.3s ease-in-out;
}
.social-link li a:hover, .social-link li a:focus{
	text-decoration:none;
}
@media (max-width: 49.938em) {
	.social-link li a{
		width:36px;
		height:35px;
	}
}
.twitter{
	background: #55acee;
}
.twitter:hover {
	background: #EEE5DE;
	color: #55acee;
	border: outset #55acee 2px;
	font-size:22px;
}
.facebook{
	background: #3b5998;
}
.facebook:hover {
	background: #EEE5DE;
	color: #3b5998;
	border: outset #3b5998 2px;
	font-size:22px;
}
.linkedin{
	background: #236B8E;
}
.linkedin:hover {
	background: #EEE5DE;
	color: #236B8E;
	border: outset #236B8E 2px;
	font-size:22px;
}

header span {
	display: block;
	font-size: 40%;
	color: #ceccc6;
	padding: 0 0 0.6em 0.1em;
}

.icon-menu {
	color: #363636;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

a, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* Global CSS that are applied for all screen sizes */

.nav-main ul {
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.3em;
	font-weight: 300;
	
}

.nav-main li span {
	display: block;
}

.nav-main a {
	display: block;
	padding: 0.4em 0em 0em 0em;
	color: rgba(247, 247, 247, .9);
	text-decoration: none;
	font-size: 0.9em;
	-webkit-transition: color .5s, background .5s, height .5s;
	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
	-ms-transition: color .5s, background .5s, height .5s;
	transition: color .5s, background .5s, height .5s;
}

/* Remove the blue Webkit background when element is tapped */

a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Hover effect for the whole nav-mainigation to make the hovered item stand out */

.no-touch .nav-main ul:hover a {
	color: rgba(237, 237, 237, 0.6);

}

.no-touch .nav-main ul:hover a:hover {
	color: rgba(249, 249, 249, 0.99);
}

/* Adding some background color to the different menu items */

.nav-main li{
	background: #539DC2;
	box-shadow: #C1CDCD 0px 6px 5px -2px;
}


/* For screen bigger than 800px */
@media (min-width: 50em) {
	.head-block{
		padding: 0px 70px 0px 70px;
	}

	.nav-main ul{
		height: 2.411em;
	}
	/* Transforms the list into a horizontal nav-mainigation */
	.nav-main li {
		float: left;
		width: 14.271%;
		text-align: center;
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
	}

	.nav-main a {
		display: block;
		width: auto;
		box-shadow: 0px 2px 2px rgba(0,0,0,0.20); 
		border-left: 2px #B3B3B3 solid;
		border-right: 2px #B3B3B3 solid;
		border-bottom: 3px #B3B3B3 solid;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
	}

	/* hover, focused and active effects that add a little colored border to the different items */
	.no-touch .nav-main li a:hover,
	.no-touch .nav-main li a:active,
	.no-touch .nav-main li a:focus {
		background: #5D92B1	;
		border-radius: 0;
		border-bottom: 4px solid #303030;
	}

	/* Animating the height of the element*/
	.nav-main a {
		height: 2.3em;
	}

	.no-touch .nav-main a:hover ,
	.nav-main a:active ,
	.nav-main a:focus {
		height: 2.6em;

	}	
	.hide-socl{
		display: none;
	}

}

@media (min-width: 50em) and (max-width: 61.250em) {
	.name-short{
		height: 45px;
	}
	.social-block{
		padding-top: 5px;
	}
	
	
	/* Transforms the list into a horizontal nav-mainigation */
	.nav-main li {
		float: left;
		width: 14.27%;
		text-align: center;
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
		border-radius: 5px;
	}

	.nav-main a {
		display: block;
		width: auto;
		border-left: 2px silver solid;
		border-right: 2px silver solid;
		border-bottom: 3px silver solid;
		font-size: 0.8em;
	}

	/* hover, focused and active effects that add a little colored border to the different items */
	.no-touch .nav-main li a:hover,
	.no-touch .nav-main li a:active,
	.no-touch .nav-main li a:focus {
		background: #8C8C8C;
		border-radius: 0;
		border-bottom: 4px solid #303030;
	}

	/* Animating the height of the element*/
	.nav-main a {
		height: 2.3em;
	}

	.no-touch .nav-main a:hover ,
	.nav-main a:active ,
	.nav-main a:focus {
		height: 2.6em;

	}	
	.hide-socl{
		display: none;
	}

}

/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {		
	.head-block{
		padding:none;

	}
	.fix-hig{
		padding: 6px 0px 0px 0px;
	}
	.name-short{
		height: 42px;
	}
	.social-block{
		padding-top: 0px;
	}
	/* Instead of adding a border, we transition the background color */
	.no-touch .nav-main li a:hover,
	.no-touch .nav-main li a:active,
	.no-touch .nav-main li a:focus {
		background: rgb(44, 168, 219);
	}
	.nav-main ul li {
		-webkit-transition: background 0.5s;
		-moz-transition: background 0.5s;
		-o-transition: background 0.5s;
		-ms-transition: background 0.5s;
		transition: background 0.5s;
	}	
	

}

/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
	.fix-hig{
		padding: 4px 0px 0px 0px;
	}
	.name-short{
		height: 42px;
	}
	.social-block{
		padding-top: 0px;
	}
	/* Transforms the list into a horizontal nav-mainigation */
	.nav-main li {
		float: left;
		width: 14.27%;
		text-align: center;
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
		border-radius: 5px;
	}

	.nav-main a {
		display: block;
		width: auto;
		border-left: 2px silver solid;
		border-right: 2px silver solid;
		border-bottom: 3px silver solid;
		font-size: 0.8em;
	}

	/* hover, focused and active effects that add a little colored border to the different items */
	.no-touch .nav-main li a:hover,
	.no-touch .nav-main li a:active,
	.no-touch .nav-main li a:focus {
		border-bottom: 4px solid rgb(12, 110, 149);
	}

	/* Animating the height of the element*/
	.nav-main a {
		height: 2.3em;
	}

	.no-touch .nav-main a:hover ,
	.nav-main a:active ,
	.nav-main a:focus {
		height: 2.6em;

	}	
		
}

/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {
	.nav-main li {
		font-size: 0.9em;
	}
	.name-short{
		height: 40px;
	}
	.fix-hig{
		padding: 4px 0px 0px 0px;
	}
}

/* Styling the toggle menu link and hiding it */
.nav-main .navtoogle{
	display: none;	
	width: 100%;
	padding: 0.4em 1.0em 0.2em 1.0em;
	font-weight: bolder;
	text-align: right;
	color: #C1CDCD;
	font-size: 1.2em;
	background: none;	
	border: none;
	border-bottom: 3px solid #353F3E;
	cursor: pointer;
	box-shadow: #C1CDCD 0px 6px 5px -2px;
}

.navtoogle i{
	z-index:-1;
}

.icon-menu {
	position: relative;
	top: 3px;
	line-height: 0;
	font-size: 1.6em;
	color: #363636;
	padding-top: 0.5em;
}

@media (max-width: 32.438em) {
	.nav-main {
		width: 100%;
		background-color: #00C5CD;
		position: fixed;
		z-index: 3;

	}
	.name-short{
		height: 35px;
		float: left;
		padding-top: -5px;
	}
	.head-block{
		padding-left: 0px;

	}
	.fix-hig{
		padding: 54px 0px 0px 0px;
	}
	.setwidth{
		padding: 0px 3px 0px 18px;
	}
	.name-block{
		display: none;
	}
	/* Unhiding the styled menu link */
	.nav-main .navtoogle{
		display: block;
	}
	
	/* When JavaScript is disabled, we hide the menu */
	.no-js .nav-main ul {
		max-height: 30em;
		overflow: hidden;
		width: 100%;
	}
	
	/* When JavaScript is enabled, we hide the menu */
	.js .nav-main ul {
		max-height: 0em;
		overflow: hidden;
		width: 100%;
	}
	
	/* Displaying the menu when the user has clicked on the button*/
	.js .nav-main .active + ul {		
		max-height: 30em;
		overflow: hidden;
		-webkit-transition: max-height .4s;
		-moz-transition: max-height .4s;
		-o-transition: max-height .4s;
		-ms-transition: max-height .4s;
		transition: max-height .4s;
	}

	/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
	
	.nav-main li span {
		display: inline-block;
		height: 100%;
	}

	.nav-main a {
		padding: 0.2em;	
		margin: 0.1em;	
		font-size: 0.8em;
		color: rgb(80, 105, 135)	;
		font-weight: 400;
	}
	
	.nav-main li{
		border-bottom: 3px solid rgb(122, 169, 221);
		background: rgb(198, 226, 255);
	}
	/* make the nav-main bigger on touch screens */
	.touch .nav-main a {
		padding: 0.3em;
	}
}
.text-fit-hightwise{
	padding-top: 10px; display: block;
    display: -webkit-box;
   	height: auto;
    margin: 0 auto;
    -webkit-line-clamp: 14;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alnright{
	color: black;
	position: relative;
	margin-top: -1.62915em;
	
}
.alnright:hover{
	margin-top: -1.62915em;
	background-color: #F7F7F7;
}
@media (max-width: 543px){ 
	.text-fit-hightwise{
		-webkit-line-clamp: 13;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.alnright{
		color: black;
		position: relative;
		margin-top: -1.62915em;
	
	}
}
@media (min-width: 544px) and (max-width: 767px){ 
	.text-fit-hightwise{
		-webkit-line-clamp: 7;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.alnright{
		color: black;
		position: relative;
		margin-top: -1.62915em;
		
	}
}
@media (min-width: 768px) and (max-width: 991px){ 
	.text-fit-hightwise{
		-webkit-line-clamp: 8;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;

	}
	.alnright{
		color: black;
		position: relative;
		margin-top: -1.62915em;
		
	}
}
@media (min-width: 992px) and (max-width: 1199px){ 
	.text-fit-hightwise{
		-webkit-line-clamp: 10;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.alnright{
		color: black;
		position: relative;
		margin-top: -1.62915em;
	
	}
}
.btn_bphy{
	background-color: #E6E6FA;
	font-size: 1.0em;
}
.btn_bphy:hover{
	background-color: #A6A6A6;
	font-size: 1.035em;
	color:white;
	box-shadow: 0 5px 10px rgba(0,0,0,0.20); 
	border-bottom: #999999 solid 1px;
}

.text-wrap{
	white-space:normal;
}
	
@media (min-width: 50em){
	.setone{
    	padding-left: 20px;
	}
}
@media (min-width: 50em) and (max-width: 61.250em){
	.setone{
    	padding-left: 20px;
	}
}
@media (max-width: 49.938em){
	
}
@media (min-width:32.5em) and (max-width: 49.938em){
	.setone{
   		padding-left: 20px;
	}
}
@media (min-width: 32.5em) and (max-width: 38.688em){
	.setone{
   		padding-left: 0px;
	}
}
@media (max-width: 32.438em){
	.setone{
   		padding-left: 0px;
	}
}

.alllinks{
	margin-top: 10px;
	margin-bottom:10px; 
	text-shadow:2px 0px 2px #E3E3E3; 
}
.alink{
	border-width: 0px; 
	border-radius: 0px;
	border-left: 2px solid white;
}
.alink:hover{
	border-width: 0px; 
	border-left: 2px solid gray;
	color: black;
	border-radius: 0px;
}

.contact-set{
	border-width: 0px; 
	padding-top: 1px;
}
.counter{
	float: right; 
	position: relative; 
	top: -55px;
}

@media (max-width: 32.438em){
	.counter{
		float: right; 
		position: relative; 
		top: -5px;
	}
}
.footerlink{
	border-top: silver 2px solid;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}
.foot_link_rht{
	border-right: #F0F0F0 2px solid;
	background: transparent;
}
.bgcolor{
	background-color: #DCDCDC;
}
.imground{
	border-radius: 100px;
	height: 150px;
	margin-top: 20px;
}
.border-none{
	border-width: 0px;
}
/*#### COLOR CODE #####*/
.text-blue{
	color: rgb(80, 166, 194);
}
.bg-blue{
	background: rgb(80, 166, 194);
}
.bg-gray{
	background-color: #C3E4ED;
}
.bg-news{
	background-color: #E6E6FA;
}
.bg-simple{
	background-color: #F5F5DC;
	color: #595959;
}
.btn-simple{
	background-color: #EBEBEB;
}
.btn-simple:hover{
	background-color: #D6D6D6;
}

/* jandk Project Css start here */ 
.jk_nav{
	padding: 20px 0px 0px 0px; 
	background-color: #DCDCDC;
	margin: 0px 0px 12px 0px;
	border: none;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.tab_style{
	padding: 5px;
	border-radius: 50px;
}

/* Research Css Start Here*/
.research_bg{
	padding: 50px 0px 0px 0px; 
	background-color:;
	margin: 0px 0px 12px 0px;
}
.font_size{
	font-size: 16.5px;
	font-weight: normal;
}
.name_phd_stu{
	margin: 5px 0px 5px 0px;
}

/*Books css Start*/
@media (max-width: 32.438em){
	.image-hight{
		height: 150px;
	}
	.rsch-fine{
		padding: 5px 0px 5px 8px;
	}
}
/*Books css Start*/
/*Basic Physics video lecture series css*/
.bg-head-title-bsc{
	padding:0; 
	background-color: #9E9E9E;
}
/* Nuclear home page Css Start*/
.top_ncl_back{
	background-color: white;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px; 
}
.bg-mcn{
	background-color: #787878 ;
	color: white;
}
/*Nuclear leactures css*/
.bg-head-title-ncl{
	padding:0; 
	background-color: #737373	;
}
/*videos lectures series css start here*/
.flip a { padding: 15px 20px 0px 20px; display: inline-block;  width: 100%; color: #ffffff; position: relative; text-decoration: none; }
.flip a:after { font-family: "FontAwesome"; content: "\f1237"; position: absolute; right: 20px; font-size: 20px; font-weight: 400; top: 50%; line-height: 1; }
.flip a.collapsed:after { content: "\f196"; }
.all-video-call{
	padding: 0;
}
.bg-head-title{
	padding:0; 
	background-color: #566D7E;
}
.poem-tab{
	padding: 0px 0px 0px 4px; 
	font-size: 18px;
}
.title-name{
	background-color: #E8E8E8;
}

/*Talks Css*/
.border{
	border-bottom: 1px gray solid; 
	padding: 0;
}

/*Articles Css For Pages*/
.text-size{
	font-size: 16px;
	letter-spacing: 0.65px;
}
.list-set{
    padding: 0px 15px 0px 15px; 
    border: none;
}
.list-color{
	background-color: #E6E8FA;
}
.bg-bquote{
    background-color: #E6E8FA;
    border-left-color: #5F9EA0 ;
}

/* Gallery Images Css  Start*/
.img-gallery .gallery a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}
.img-gallery .gallery a.big img {
  width: 100%;
}
/* Gallery Images Css End */

.sst_background {
    background-image: url('../../../Images/workshop.svg');
    /* url('Images/workshop.svg'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

.bg-triangle{
    background-image:
    url('../../../Images/triangle-left.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.sst_test_heading{
    font-weight: 800;
    line-height: 48px;
    text-align: left;
    text-transform: uppercase;
}

/* Choose all input elements that have the attribute: type="radio" and make them disappear.*/
input[type="radio"] {
	display: none;
}

/* The label is what's left to style. 
As long as its 'for' attribute matches the input's 'id', it will maintain the function of a radio button. */
.label-radio {
	margin-top:0.5em;
	padding: 0.4em 1.5em;
	display: inline-block;
	border: 1px solid rgba(211, 211, 211, 0.884);
	cursor: pointer;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	-o-border-radius:4px;
}

.blank-label {
	display: none;
}

/* The '+' is the adjacent sibling selector.
It selects what ever element comes right after it,
as long as it is a sibling. */
input[type="radio"]:checked+label {
	background: rgb(80, 166, 194);
	color: #fff;
}

.error {
	color: red;
	margin-left: 5px;
}

label.error {
	display: inline;
}

.usn_background {
  background: radial-gradient(#fceabb, #f8b500);
  background-repeat: no-repeat;

}

.bg-right-triangle {
  background-image: url("../../../Images/triangle-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}