@charset "UTF-8";
/* 
$content-width will be the max width of the content within the navigation bar. 
$breakpoint determines at which width the media query breakpoint will take effect.
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);@import url("https://fonts.googleapis.com/css?family=Exo:500,600,700|Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
html {
  overflow-x: hidden;
}



/*Loading Animation*/
/*---------------------------------------------------------------------------------------------------------------*/
.loading{
	position:fixed;
	width:100%;
	height:100vh;
	background:white url("../images/medical symbols 3.gif") no-repeat center;
	z-index: 9999;
}





/*Back to top button*/
/*---------------------------------------------------------------------------------------------------------------*/


.revealbuttontop {
  transition: all 0.3s;
  cursor: pointer;
  opacity: .6 !important;
}



.backtop {
  position: fixed;
  background-color: #D95B05;
  z-index: 9999 !important;
  display: inline-block;
  right: 62px;
  width: 50px;
  height: 50px;
  bottom: 150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border-radius: 50px;
  transition: 0.3s;text-decoration:none !important;
}
@media (max-width: 992px) {
  .backtop {
    bottom: 130px;
    right: 56px;
  }
}

@media (max-width: 699px) {
  .backtop {
    bottom: 40px;
    right: 10px;
  }
}
@media (max-width: 768px) {
  .backtop {
    width: 45px;
    height: 45px;
  }
}
.backtop:hover {
  background-color: #D95B05;opacity:1 !important;
}
.backtop i {
  color: #fff;
  font-size: 20px;
}

/*----------------------------------------------------------------------------------------------------------------*/


   /*Reveal Classes for text animation*/
/*--------------------------------------------------------------------------------------------------------------------*/
.reveal{                                                    
  position: relative;
  transform: translateY(100px);                 
  opacity: 0;
  transition: .8s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}
/*-----------------------------------*/
.revealleft{
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: 1s all ease;
}

.revealleft.active2{
  transform: translateX(0);
	opacity: 1;}
/*------------------------------------*/
.revealright{
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 1s all ease;
}

.revealright.active3{
  transform: translateX(0);
	opacity: 1;}

/*--------------------------------------------------------------------------------------------------------------------*/




/* SOCIAL PANEL CSS */
/*----------------------------------------------------------------------------------------------------------------------*/
.social-panel-container {
	position: fixed;
	right: 0;
	bottom: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;z-index:5;
}

.social-panel-container.visible {
	transform: translateX(-10px);
}

.social-panel {	
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
	border: 5px solid #001F61;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Muli';
	position: relative;
	height: 169px;	
	width: 370px;
	max-width: calc(100% - 10px);
}

.social-panel button.close-btn {
	border: 0;
	color: #97A5CE;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
}

.social-panel button.close-btn:focus {
	outline: none;
}

.social-panel p {
	background-color: #001F61;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 17px 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 235px;
}

.social-panel p i {
	margin: 0 5px;
}

.social-panel p a {
	color: #FF7500;
	text-decoration: none;
}

.social-panel h4 {
	margin: 20px 0;
	color: #97A5CE;	
	font-family: 'Muli';	
	font-size: 14px;	
	line-height: 18px;
	text-transform: uppercase;
}

.social-panel ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-panel ul li {
	margin: 0 10px;
}

.social-panel ul li a {
	border: 1px solid #DCE1F2;
	border-radius: 50%;
	color: #001F61;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	text-decoration: none;
}

.social-panel ul li a:hover {
	border-color: #FF6A00;
	box-shadow: 0 9px 12px -9px #FF6A00;
}

.floating-btn {
	border-radius: 26.5px;
	background-color:  #D95B05;
	border: 1px solid  #D95B05;
	box-shadow: 0 16px 22px -17px  #E9792D;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 20px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

.floating-btn:hover {
	background-color: #FD861A;
	color: white;
}

.floating-btn:focus {
	outline: none;
}

.floating-text {
	background-color: #001F61;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-family: 'Muli';
	padding: 7px 15px;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 998;
}

.floating-text a {
	color: #FF7500;
	text-decoration: none;
}



.divider {
  width: 40px;
  height: 5px;
  background:  #D95B05;
}

@media screen and (max-width: 1200px) and (min-width:500px){

	.social-panel-container.visible {
		transform: translateX(0px);
	}
	
	.floating-btn {
		right: 10px;
	}
}
@media screen and (max-width: 700px) {
	.social-panel-container{display:none;}
	.floating-btn {
		display:none;
	}
	
}




/*-------------------------------------------------------------------------------------------------------------------------*/

/*Nav coding begins from here*/

.body4{ overflow-x: hidden;overflow-y: hidden;
    width: 100%;
	-webkit-font-smoothing: antialiased;
     -webkit-box-sizing: border-box;  
   -moz-box-sizing: border-box;  
   -ms-box-sizing: border-box;  
   -o-box-sizing: border-box;  
   box-sizing: border-box;  
  
}

nav {
  float: right;font-size:.8em;
}



nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;top:0;left:160px;
  position: relative;font-size:1.2em;
}

nav ul li a {
  display: block;
  padding: 0 15px;
  line-height: 50px;
  background: #ffffff;
  color: #463f3f;
  text-decoration: none;
	cursor:pointer;
  /*
  The full path of this code is nav ul li a:not(:only-child):after. This means that the code will apply to any a tag in our nav list that is NOT an only child, aka any dropdown. The :after means it comes after the output of the tag. I’ve decided that to specify any nav item as a dropdown, it will be followed by a unicode arrow – ▾ (#9662).
  */
}

nav ul li a:hover {
  background:  #D95B05;line-height: 40px !important;margin-top:5px;
  color: white;border-radius:10px;
}

nav ul li a:not(:only-child):after {
  padding-left: 4px;
  content: " ▾";
}

nav ul li ul{position:fixed !important;
	height:500px;
	width:190px;
	top:120px;
	transition: all 500ms ease-in-out;
	background-color:white;}

.dropdownheight2{top:68px !important;transition: all 500ms ease-in-out;}
.dropdownheight3{top:115px !important;transition: all 500ms ease-in-out;}


nav ul li ul li {
min-width: 190px;
	left:.1%;
	text-align:left;
	
}

nav ul li ul li a {
  padding: 10px 10px 10px 15px;font-size:.8em !important;
  line-height: 20px;color:#939393;font-family: 'Asap', sans-serif;
}
nav ul li ul li a:hover{ line-height:20px !important; margin-top:0;}

.nav-list .active1{ color: #D95B05;}
.nav-list .active1:hover{ color: white;}
.nav-dropdown {
  position: absolute;
  z-index:1;
  /* Guarantees that the dropdown will display on top of any content. */
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  display:none;
}


.nav-mobile {
  display: none;
  position: absolute;
  top: 0;overflow: hidden !important;
  right: 0;
  background: #fff;
  height: 70px;
  width: 70px;
}
@media only screen and (min-width: 300px) and (max-width: 340px) {
	nav ul li ul{left:25% !important;}/* dropdown panel*/
}
@media only screen and (min-width: 341px) and (max-width: 400px) {
	nav ul li ul{left:30.5% !important;}/* dropdown panel*/
}
@media only screen and (min-width: 401px) and (max-width: 500px) {
	nav ul li ul{left:31% !important;top:245px !important;}/* dropdown panel*/
}
@media only screen and (min-width: 501px) and (max-width: 700px) {
	nav ul li ul{left:60% !important;top:245px !important;}/* dropdown panel*/
}
@media only screen and (min-width: 701px) and (max-width: 800px) {
	nav ul li ul{left:60% !important;top:295px !important;}/* dropdown panel*/
}
@media only screen and (min-width: 801px) and (max-width: 900px) {
	nav ul li ul{left:59.5% !important;top:295px !important;}/* dropdown panel*/
}
@media only screen and (min-width: 901px) and (max-width: 1000px) {
	nav ul li ul{left:59% !important;top:295px !important;}/* dropdown panel*/
}
@media only screen and (min-width: 1001px) and (max-width: 1100px) {
	nav ul li ul{left:58.5% !important;top:295px !important;}/* dropdown panel*/
}
@media only screen and (min-width: 1101px) and (max-width: 1200px) {
	nav ul li ul{left:57.5% !important;top:295px !important;}/* dropdown panel*/
}
@media only screen and (max-width: 1200px) {
  .nav-mobile {
    display: block;
  }
	

  nav {
    width: 100%;
    padding: 70px 0 15px;
  }

  nav ul {
    display: none;
  }

  nav ul li {
    float: none;left:0%;width:100%;top:38px;height:45px;
  }

  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
	
	nav ul li a:hover {
  background:  #D95B05;line-height: 14.5px !important;margin-top:0px;
  color: white;border-radius:10px;
}
	nav ul li ul{top:260px;left:22%;width:170px;height:496px !important; position:fixed !important;background-color:white;}/* dropdown panel*/
	
	nav ul li ul li {
	width: auto;top:10px;  /* dropdown content */
	left:0%;margin-top:-6px;
	text-align:left;}
	.dropspace{margin-top:15px;}
	
  nav ul li ul li a {
    padding:3px 0 3px 10px !important;margin:5 0 0 0 !important;line-height: 20px;width:170px;/* dropdown hyperlink */
	}
nav ul li ul li a:hover{
   line-height: 25px !important;/* dropdown hyperlink */
	}
}


@media only screen and (max-width: 1200px) {

.logo{margin-top:-2%;}
}
@media only screen and (max-width:400px){
	#nav-toggle {top:33px;}
	.visibility{display:none;}
	.logo img{visibility: hidden;}
.logo {margin-top:-25px;margin-left:-2.4vw;width:100% !important;transition: all 0ms ease-in-out;
background-image: url("../gastro logo no name.png");
background-repeat: no-repeat;
background-size:200px,auto;}
}

@media only screen and (max-width: 700px) and  (min-width:401px){
	#nav-toggle {top:33px;}
	.visibility{display:none;}
	.logo img{visibility: hidden;}
.logo {margin-top:-28.2px;margin-left:-2.6vw;width:100% !important;transition: all 0ms ease-in-out;
background-image: url("../gastro logo no name.png");
background-repeat: no-repeat;
background-size:210px,auto;}
}

@media only screen and (min-width: 701px) and (max-width:1200px) {
	#nav-toggle {top:37px;}
	.logo img{visibility: hidden;}
.logo {margin-top:-10px !important;margin-left:-2.6vw;width:100% !important;transition: all 0ms ease-in-out;
background-image: url("../gastro logo no name.png");
background-repeat: no-repeat;
background-size:220px,auto;}
}
	@media only screen and (min-height: 1000px) {
	
	
		.logo {margin-top:-15px !important;}
}

.logo-top-margin{margin-top:-28px !important;margin-left:-2.8vw;}
.logo-top-margin2{margin-top:-38px !important;}
.logo-top-margin3{margin-top:-34px !important;}
.logo-top-margin4{margin-top:-31px !important;}
.logo-top-margin5{margin-top:-47px !important;}
#nav-toggle {
  position: absolute;
  left: 18px;
  
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 4px;
  width: 30px;
  background: #463f3f;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
  top: -10px;
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

@media screen and (min-width: 1200px) {
  .nav-list {
    display: block !important;
  }
}
/* 
.navigation – the outer wrapper for the navbar. Specifies the height and color, and will stretch the full width of the viewport.
*/
.navigation {
  height: 90px;/*transition: all 0ms ease-in-out;*/
  background: #ffffff;
}

/*
.nav-container – the inner wrapper for the navbar. Defines how far the actual content should stretch.
*/
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}




.logo{
	  cursor:pointer;
		position:fixed;
		top:4%;left:4%;
	width:20%;}



.header
{color:black;
text-align: center;
	top:-7px;

	
}
	.headersticky {
  position: -webkit-sticky;
  position: sticky;
  top:0px;
  z-index:3;background-color: white;
}




	.add-shadow{
		 box-shadow: rgba(60, 64, 67, 0.5) 0px 1px 2px 0px;}

.change-logo-scroll{margin-top:-28px;left:82px;transition:all 0ms ease-in-out;
background-image: url("../gastro logo no name.png");
background-repeat: no-repeat;
background-size:185px ,auto;}
.scroll-visibility{display:none;transition:all 10ms;}

.hide-image2{visibility:hidden;}
.scrollnavtoggle{padding-bottom:20px !important;}
.navscrollspace{margin-top:13px !important;transition:margin 150ms ease-in-out;}
.navsmallheight{height:70px;transition: all 10ms ease-in-out;}