/* Start Global Rules */		
		*
		{
			padding: 0 ;
			margin: 0 ;
			line-height: 25px ;
			
			box-sizing: border-box ;
		}		
				
				/* End Global Rules */
		
		/*///////////////////////////////////////////////////////////////////*/
		
				/*  Start Header  : all header css is here EXCEPT the new nav bar */
		
		
		.header .logo .img #logo{
				float: left;
				padding-top:10px;
				padding-bottom: 10px;
			
				margin-left: 10px ;
				/* height: 80px ; */
			}
		
		.header .logo .img .head-text
		{
				float: right;
				color: rgb(66, 168, 244);
				font-size: 28px;
				/* padding-top: 5%; */
				margin: 40px 10px 40px 40px;
		}
		
		
		.header .navbar{
			overflow: hidden;
			border-top: 2px solid rgb(66, 168, 244);
			border-bottom: 2px solid rgb(66, 168, 244);
			
			
			padding-left: 10px ;
			
			margin: 0  ;
		}
		
		
		.header .navbar a 
		{
				 text-decoration: none;
			 color: black ;
			 
			 font-weight: bold ;
			 
		
		}
		
		
		.header .navbar  a:hover
		{
			color: white ;
		}
		
		
		
		.header .navbar ul{
				list-style: none;
		
			
			margin: 0 ;
			padding: 0 ;
			 
			
		}
		
		.header .navbar ul li{
				float: left;
				font-size: 22px;
			
		
			padding: 12px ;
			margin: 0 ;
		
		
		}
		
		.header .navbar ul li:hover{
		
			background-color: rgb(66, 168, 244) ;
			
		}
		
		.header .navbar .active{
			background-color: rgba(66, 168, 244, 0.7) ;
			color:#FFF;
		}
		
		
		/* Search */
		.header .navbar .search {
			float: right;
		}
		
		.header .navbar .search input{
			height: 30px;
			background-color: #c3eef8ff;
			border: none;
			margin: 9px 0 8px 0px;
		
			padding: 0 7px ;
		}
		
		.header .navbar .search i{
			height: 30px;
		
			font-size: 20px;
			font-weight: light ;
			background-color: black ;
			color: white ;
			padding: 6px ;
			margin: 9px 0 8px 0;
		
			float: right;
		}
		
		
		
		
		.read-more-state {
			display: none;
		}
		
		#radio-open:checked ~ #mySidenav {
			width: 500px ;
		}
		
		#radio-close:checked ~ #mySidenav {
			width: 0px ;
		}		
		
		
				/*  End Header   */
			

			

/*///////////////////////////////////////////////////////////////////*/

/*///////////////////////////////////////////////////////////////////*/


			/* Start Footer */
.footer
{
	margin-top: 0px ;
}

.footer hr{

	border-top: 3px solid rgb(66, 168, 244) ;
	border-radius: 100% ;
	margin-top: 20px;
	
}

.footer h2{
    font-family:Open_Sans;
	font-size:18px;
	
	padding: 15px ;
}

			/* End Footer */

/*///////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////*/

/* Start Media */
/* Media Media Media Media Media Media Media Media */


		/* Start large screens */

@media (min-width:1200px)
{

		/* Start : Header  */
	.header .navbar ul li
	{
/*		
		padding-top:0.5%;
		padding-right:4.5%;
*/		
	}

	.header .new-nav
	{
		display: none ;
	}
		/* End : Header  */

	.box
	{
		float: right ;
	}
}

		/* End large screens */

/*///////////////////////////////////////////////////////////////////*/
		
		/* Start Medium screens */

@media (min-width:992px) and (max-width:1199px)
{

	
		/* Start : Header  */
	
	
	.header .navbar .search input{
		width: 100px ;
	}


	.header .new-nav
	{
		display: none ;
	}
		/* End : Header  */

	
}
		/* end Medium screens */
		
/*///////////////////////////////////////////////////////////////////*/
		
		
		/* Start Small screens */

@media (min-width:768px) and (max-width:991px)
{

			/* Start : Header  */
	.header .navbar
	{
		display: none ;
	}

	.header .nav-button
	{
		position: absolute ;
		top: 0px ;
		right: 0px ;
	}
		
		
	.header .logo strong
	{
		font-size: 20px ;
	}
	
	.header .logo span
	{
		width: 40% ;
		display: block ;
		float: right ;


		position: relative ;
		right: 50px ;
	}
	
		/* End : Header  */

	
}

		/* End small screens */
		
/*///////////////////////////////////////////////////////////////////*/
		
		/* Start extra small screens */

@media (max-width:767px)
{

			/* Start : Header  */

	.header .navbar
	{
		display: none ;
	}
	
	.header .nav-button
	{
		position: absolute ;
		top: 0px ;
		right: 0px ;
	}
	
	.header .logo strong
	{
		font-size: 20px ;
	}
	
	.header .logo span
	{
		width: 50% ;
		display: block ;
		float: left ;
		
		position: relative ;
		right: 50px ;

	}
	
		/* End : Header  */


}		
	
		/* End extra small screens */

				

/* End Media */
/* Media Media Media Media Media Media Media Media */


/*///////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////*/

	   /*Start Global Styling */
*
{
	padding:0px;
	margin:0px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	 box-sizing:border-box;
	 line-height:25px;
	 font-family: 'Roboto Slab', serif;
}

		/*End Global Styling */



body
{
	/*background-color:#E1E1E1;*/
}

.cv
{
	/* background-color: #EFEFEF ; */
	padding-bottom: 20px ;
	padding-top: 10px ;
}
		
		/* Start Section */
		
section
{
	background-color:#5EA3DA;
	margin:1%;
	color:white;
	border-radius:10px;
	position:relative;

}
section .content h2
{
	text-align: center ;
}

section .content .reasearch-info h2
{
	text-align: left ;
}

section .content h3
{
	margin-top:10px;
	text-align: center ;

}


section .content img
{
	margin-top:10px;
}
section .content
{
	margin-bottom:10%;
}
				/* Start Large screens */
				
@media(min-width:1200px)
{	
	section .main-info img
	{
		/* margin-left:25%; */
		margin-left: 9vw ;
		margin-bottom:5px;
	}
	section
	{
		width:30%;
	}

}
				/* End Large screens */
				
				/* Start Medium screens */
				
@media(min-width:992px) and (max-width:1199px)
{
	section .main-info img
	{
		margin-left: 6.5vw ;
		margin-bottom:5px;
	}
	section
	{
		width:30%;
	}
}
				/* End Meduim screens */
			
				/* Start small screens */
				
@media(min-width:707px) and (max-width:991px)
{
	
	section
	{
		width:90%;
		margin-left:5%;
	}
	
	section .main-info 
	{
		width:calc(100% - 150px);
		margin-bottom:5%;
		overflow:hidden;
	}
	section .main-info img
	{
			float:left;
			
	}
	section .main-info :not(img)
	{
		margin-top:5%;
		margin-left:10%;
		float:left;
	}
	hr
	{
		margin:auto;
		display:block !important;
	}
	.box
	{
		float: left !important ;
	}
}
	
				/* End Small Screens */

				/* Start Extra small screens */
				
@media(max-width:706px)
{
	section
	{
		width:90%;
		margin-left:5%;
	}
	section .main-info img
	{
		margin-left:35%;
		margin-bottom:5px;
	}
	section .main-info :not(img)
	{
		text-align:center;
	}
}
	
				/* End Extra Small Screens */

	/* End Section */
	

	/* Start Box */
	
.box
{
	background-color: #f1f1f1;
	color:black;
	box-shadow: 3px 5px 5px #888888;
	border-radius:10px;
	position:relative;
    float: right ;	
}

.box a
{
  text-decoration: none;
  color:#140871c7;
}

.box a:hover
{
  color:black; 
  transition:0.3s;	
}

.box .content
{
	margin-top:10px;
	margin-bottom:10px;
}

.box ol
{
	padding-left:25px;
	
}

.box ol li
{
	color: #0d4078 ;
	padding-left:0px;
	margin-left: 20px ;
	
}
.box p {
	color: #0d4078 ;
	padding-left:0px;
	margin-left: 20px ;
	font-family: Arial !important;
}

				/* Start Large screens */
				
@media(min-width:1200px)
{
	.box
	{
		width:66%;
		margin-left:1%;
		/* margin-right:1%; */
		margin-top:1%;
	}

	.box:last-of-type
	{
		/* margin-bottom:2%; */
		/* margin-right:6%; */

	}
}
				/* End Large screens */

				/* Start Medium screens */
				
@media(min-width:992px) and (max-width:1199px)
{
	.box
	{
		width:65%;
		margin-left:1%;
		margin-right:1%;
		margin-top:1%;
	}	
		.box:last-of-type
	{
		margin-bottom:2%;
		/* margin-right:3.5%; */
	}
}
				/* End medium screens */
				
				/* Start Small screens */
				
@media(max-width:991px)
{
	.box
	{
		width:80%;
		margin-left:10%;
		margin-top:2%;
		margin-bottom:2%;
	}	
	.box:last-of-type 
	{
		margin-bottom:2%;
		margin-right:10%;
	}

}
				/* End Small screens */



	/* End Box */

	
	/* Start Button */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

.button {
  width: 200px;
  height: 40px;
  background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%);
  border: none;
  border-radius: 5px;
  position: relative;
  border-bottom: 4px solid #2b8bc6;
  color: #fbfbfb;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  font-size: 15px;
  text-align: left;
  text-indent: 5px;
  box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
  cursor: pointer;
  /* margin-right:5%; */
  
  margin-left: 50px ;

  
}

.button:active {
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
  top: 1px;
}

.button:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-top: 20px solid #187dbc;
  border-bottom: 20px solid #187dbc;
  border-left: 16px solid transparent;
  border-right: 20px solid #187dbc;
  position: absolute;
  opacity: 0.6; 
  right: 0;
  top: 0;
  border-radius: 0 5px 5px 0;  
}

.in
{
	font-size: 25px !important ;
}

@media(min-width:1200px)
{
	.button
	{
		margin-left:calc(100% - 200px);
		margin-top: 20px ;
		margin-bottom:10px;
	}
}

@media(min-width:992px) and (max-width:1199px)
{
	.button
	{
		margin-left:calc(97% - 200px);
	}
}

@media(max-width:992px)
{
	.button
	{
		margin-left:calc(90% - 200px);
	}
}



	/* End Button */
	
/* Start My Framework */

.cv hr
{
	display:none;
	margin-bottom:20px;
	width:70%;
}


.text-center
{
	text-align:center;
}
.container
{
	width:95%;
	margin:auto;
	/* padding-left:15px; */
	/* padding-right:15px; */
}
.clearfix
{
	clear:both;
}

.float-left
{
	float:left;
}

.float-right
{
	float:right;
}

.h1
{
	font-size:2em;
}

.responsive-paragraph
{
	line-height:23px;
}

.responsive-image
{
	width:100%;
	margin-bottom:-2px;
	margin-top:-2px;
}

.img-circle
{
	border-radius:50%;
}

.img-thumbnail
{
	padding:3px;
	background-color:#FFF;
	border:1px solid #CCC;
}

.Arial
{
	font-family:Arial !important;
}

.marginBottom
{
	margin-bottom:10px;
}

.classic-list
{
	/* list-style:none; */
}

/* End My Framework */








/*///////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////*/








/* START -  NEW NAVIGATION BAR */


/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
	/* left: 0; */
	
	right: 0;

  background-color: #f1f1f1 !important; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 40px; /* Place content 60px from the top */
	transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
	
	box-shadow: 0px 10px 19px 0px rgba(0,0,0,0.2);
}

/* The navigation menu links */
.sidenav a {
  padding: 15px 8px 15px 5px;
  text-decoration: none;
  font-size: 70px ;
	/* color: #818181; */
	color: #111 !important; 
  display: block;
	transition: 0.3s;
	
	/* background-color: #42a8f4ff !important; */
	margin-top: 30px !important;

	border-left: 5px solid rgb(60, 151, 221) ;
	margin-left: 25px ;

}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	color: white !important;
	background-color: rgb(60, 151, 221) ;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 100px;
	margin-left: 50px;
	
	border: none ;
}

.sidenav .closebtn:hover 
{
	background: none ;
	color: black !important;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
/*
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
*/












/* How TO - Menu Icon  */



.new-nav .nav-button
{
	display: inline-block ;
	float: right ;

}

.new-nav .nav-button span
{
	font-size: 70px !important ; 
	font-weight: bolder ;
	cursor: pointer;

	float: right;
	/* color: rgb(66, 168, 244); */
	padding-top: 5%;
	margin: 30px 20px 0 40px;
}






.new-nav hr
{
	/*background-color: rgb(66, 168, 244) ;*/
    /*height: 2px;*/

	width: 100% ;

	
	border-top: 2px solid rgb(66, 168, 244) ;
    border-radius: 100% ;
}



/* END -  NEW NAVIGATION BAR */


/*///////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////*/


#Btn {
  display: none;
  position: fixed;
  font-size:50px;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: 2px ;
  outline: none;
  background-color: #42a8f4ff;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 1000px;
    
  transition: ease 0.3s ;
   
}

#Btn:hover
{
	padding: 2px ;	
		
}	


#Btn:hover .fa-arrow-circle-up {
  
  /* transform: ; */
  transition: ease 0.3s ;
  
  font-size: 55px ;
}

.fa-arrow-circle-up
{
	font-size: 25px ;
  transition: ease 0.3s ;
	
}

/* End Anchor Button */





/* Start signIn Form */

/*body {font-family: Arial, Helvetica, sans-serif;}*/

/* Full-width input fields */
.input{
  width: 100%;
  padding: 5px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.button1 {
  background-color: rgb(66, 168, 244);
  color: white;
  padding: 5px 11px;
  margin: 0px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.button1:hover
{
  background-color: rgb(60, 151, 221) ;
}

.button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn1 {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer1 {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar1 {
  width: 20%;
  border-radius: 50%;
}

.container1 {
  padding: 16px;
}

span.psw1 {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content1 {
  background-color: #fefefe;
  margin: 5% 15% 15% 15%; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 70%; /* Could be more or less, depending on screen size */

}

/* The Close Button (x) */
.close1 {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close1:hover,
.close1:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate1 {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw1 {
     display: block;
     float: none;
  }
  .cancelbtn1 {
     width: 100%;
  }
}
  
/* End signIn Form */