@font-face {
    font-family: SwissMedium;
    src: url(../fonts/STXS_MD.woff2);
  }

body {
	background-color: #1B1B1F;
}
#navcol-1 .hov:hover{
	opacity: 0.6;
}
#navcol-1 .nav-item > a {
	color: var(--light);
	font-family: "Rubik", Helvetica, Arial, Verdana, sans-serif;
}

/*---------------------------------------------
  Main Page Adjust for Safari Browser vh Issue
----------------------------------------------*/
#main-page{
	width: 100% !important;
	min-height: 100vh;
}

/* Avoid Chrome to see Safari */
@supports (-webkit-touch-callout: none) {
  #main-page {
    height: -webkit-fill-available;
  }
}
/*------------------------
    Video Background
-------------------------*/
.video-background-holder {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  z-index: -250;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.video-background-holder video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.video-background-content {
  position: relative;
  z-index: 2;
}

.video-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

/*------------------------
 Region-Top Social Links
-------------------------*/

.navicon {
	width: 22px;
	height: 22px;
	margin: 0px 6px 0px 0px;
	border: 2px solid #EE7623;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.navicon:hover {
	background-color: #EE7623;
	-ms-transition: background 0.4s ease, color 0.4s ease;
	-moz-transition: background 0.4s ease, color 0.4s ease;
	-webkit-transition: background 0.4s ease, color 0.4s ease;
	transition: background 0.4s ease, color 0.4s ease;
	cursor: pointer;
}
.navicon a{
	color: #EE7623;
	width: 100%;
}
.navicon a:hover{
	color: white;
}
.navicon .fa-xs{
	font-size: 10px;
}

#navcol-1 .fa-facebook-f{
	margin: 0 0 10px 6px;
}
#navcol-1 .fa-twitter {
	margin: 0 0 10px 4px;
}
#navcol-1 .fa-linkedin-in{
	margin: 0 0 10px 4.5px;
}
#navcol-1 .fa-instagram{
	margin: 0 0 10.5px 4px;
	font-size: 11px !important;
}
#navcol-1 .fa-youtube{
	margin: 0 0 10px 3.5px;
}


/*------------------------
   Region-Mid Video
-------------------------*/
#region-mid{
	margin-bottom: 20px;
}
.sm-video-background-content{
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
}
#sm-message{
	margin: auto 0;
	font-family: 'Bebas Neue', cursive;
	color: rgb(255,255,255);
	text-align: center; 
	font-size: 40px;
}
@media (min-width: 992px) {
  #region-mid {
    display: none;
  }
}

/*------------------------
   Region-Bottom Links
-------------------------*/
.link-group {
  color: rgba(255, 255, 255, 0.8);
  display: inline-block;
  cursor: pointer;
}
.gradient_button {
  height: 9vh; 
  padding-left: 10px;
  background-color: rgba(0,0,0,0.31);
  border-style: ridge;
  border-color: rgb(96,96,96);
  border-width: .5px .0 .1px 0;
  backdrop-filter: blur(6px);
  background-size: 200% auto;
  background-position: 200% 100%;
  background-image: linear-gradient(to left, #D32608 0%, #EE8822 50%, rgba(253,160,133,0) 50%, rgba(246,211,101,0) 100%);
  transition: 0.333s;
  pointer-events: all;
  display: inline-flex;
  clip-path: polygon( 0 0, 100% 0, calc(100% - 2vw) 100%, 0 100% );
  -webkit-clip-path: polygon( 0 0, 100% 0, calc(100% - 2vw) 100%, 0 100% );
  position: relative;
}
.gradient_button:hover {
	text-decoration: none;
}
.gradient_button h5{
	margin: auto 0;
	padding-top: 1%;
	width: 100%;
	color: rgb(255,255,255);
	font-family: 'Bebas Neue', cursive;
}
.gradient_button img{
	height: 100%;
}
.orange_lines{
	position: absolute;
	/*opacity: 100%;*/
}
.white_lines{
	position: absolute;
	display: none;
	/*opacity: 0%;*/
	-ms-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}
.nav_link {
  color: #FFF;
  font-family: SwissMedium, 'Rubik';
}
@media (max-width: 1899px){
    .nav_link{
        font-size: 1.5vw;
    }
}
@media (min-width: 1900px){
    .nav_link{
        font-size: 28.5px;
    }
}
.nav_link:hover {
  color: #ff7527;
  text-decoration: none;
}
/*------------------------
          Desktop
-------------------------*/
@media (min-width: 992px) {
	.link-group{
		pointer-events: none;
	}
	.link-group:hover{
		pointer-events: all;
	}
   .link-group:hover .gradient_button {
     	background-position: 100% 100%;
	}
	.nav_item {
      	color: #FFF;
      	position: relative;
	  	margin-right: 4%;
      	opacity: 0;
      	transition: opacity 0.5s ease, top 0.5s ease;
      	transition-delay: 0;
 	}
	.link-group:hover .nav_item {
      opacity: 1;
      top: 1px;
    }
    .nav_item:nth-child(1) {
      transition-delay: 0.15s;
    }
    .nav_item:nth-child(2) {
      transition-delay: 0.2s;
      /*margin-left: 30px;*/
    }
    .nav_item:nth-child(3) {
      transition-delay: 0.25s;
    }
    .nav_item:nth-child(4) {
      transition-delay: 0.3s;
    }
    .nav_item:nth-child(5) {
      transition-delay: 0.35s;
    }
    .nav_item:nth-child(6) {
      transition-delay: 0.40s;
    }
    .nav_item:nth-child(7) {
      transition-delay: 0.65s;
    }
    .nav_item:nth-child(8) {
      transition-delay: 0.70s;
    }
    .nav_item:nth-child(9) {
      transition-delay: 0.75s;
    }
    .nav_item:nth-child(10) {
      transition-delay: .8s;
    }
    .nav-grouping:hover .nav_item:nth-child(1) {
      transition-delay: 0.25s;
    }
    .nav-grouping:hover .nav_item:nth-child(2) {
      transition-delay: 0.3s;
    }
    .nav-grouping:hover .nav_item:nth-child(3) {
      transition-delay: 0.35s;
    }
    .nav-grouping:hover .nav_item:nth-child(4) {
      transition-delay: 0.4s;
    }
    .nav-grouping:hover .nav_item:nth-child(5) {
      transition-delay: 0.45s;
    }
    .nav-grouping:hover .nav_item:nth-child(6) {
      transition-delay: 0.5s;
    }
    .nav-grouping:hover .nav_item:nth-child(7) {
      transition-delay: 0.55s;
    }
    .nav-grouping:hover .nav_item:nth-child(8) {
      transition-delay: 0.6s;
    }
    .nav-grouping:hover .nav_item:nth-child(9) {
      transition-delay: 0.65s;
    }
    .nav-grouping:hover .nav_item:nth-child(10) {
      transition-delay: 0.7s;
    }
	.gradient_button {
    	max-width: 435px;
   		min-width: 435px;
  	}
	.gradient_button h5{
		font-size: 36px;
		padding-left: 4.5vh;
	}
	.link-group:hover .orange_lines{
        display: none;
    }
    .link-group:hover .white_lines{
        display: block;
    }
}
/*------------------------
          Mobile
-------------------------*/
@media (max-width: 991px){
	body{
		background-image: url("../img/techbackground.jpg");
		background-size: cover;
	}
	#professionals_button[aria-expanded="true"] {
 		background-position: 100% 100%;
	}
	#patient_button[aria-expanded="true"] {
 		background-position: 100% 100%;
	}
	#corporate_button[aria-expanded="true"] {
 		background-position: 100% 100%;
	}
	#professionals_button[aria-expanded="true"] .orange_lines {
 		display: none;
	}
	#professionals_button[aria-expanded="true"] .white_lines {
 		display: block;
	}
	#patient_button[aria-expanded="true"] .orange_lines {
 		display: none;
	}
	#patient_button[aria-expanded="true"] .white_lines {
 		display: block;
	}
 	#corporate_button[aria-expanded="true"] .orange_lines {
 		display: none;
	}
	#corporate_button[aria-expanded="true"] .white_lines {
 		display: block;
	}
	.nav_link{
		font-size: 20px;
	}
	.gradient_button {
    	max-width: 96%;
    	min-width: 96%;
		min-height: 50px;
  	}
	.gradient_button h5{
		font-size: 30px;
		padding: 10px 0px 10px 50px;
	}
	.nav_item{
		margin-top: 15px;
	}
	#corporate_links::after{
		content: "";
		clear: both;
		display: table;
	}
	.collapse, .collapsing {
		width: 80%;
	}
}



