/* Reset Styles */
* {
    margin: 0;
    padding: 0;
}

body {
	width:100vw;
	height:100vh;
	margin: 0;
}

/*IMAGES*/
/*to work on responsive images rm the x's*/
body img {
	width: 60%;
	height: unset;
	border-radius: 5px;
}
@media (max-width: 998px) {
body img {
	width: 80%;
}
}
@media (max-width: 650px) {
body img {
	width: 100%;
}
}
/*add this class to keep images orig size*/
body img.resize1 {
	width: unset;
	height: unset;
}

/*VIDEOS*/
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.container16-9 {
  position: relative;
  overflow: hidden;
  width: 60%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  border-radius: 5px!important;
}
@media screen and (max-width: 998px) {
.container16-9 {
  width: 100%;
}
}

/*FONTS*/
body p, body li, body ul, body td > p, body td {
	color: #000;
	font-family: Veranda, Arial;
	font-size: 16px;
}
font {
	color: #000;
}
/*highlight text realistically*/
b, strong, i {
	color: #29054B;
	font-weight: normal;
	margin: 0 -0.4em;
    padding: 0.1em 0.4em;
    border-radius: 0.8em 0.3em;
    background: transparent;
    background-image: linear-gradient(to right, rgb(239, 216, 183, 0.1), rgba(239, 216, 182, 1) 4%, rgba(239, 216, 183, 0.4));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
}
h1, h2, h3, h4, h5, h6 {
	color:#0f0f0f;
	font-family: Times New Roman, serif;
	font-style: italic;
	padding-top: 15px;
	padding-bottom: 5px;
}
h1 {
	font-size: 28px;
	padding-bottom: 40px;
	font-style: italic;
	color: #29054B;
}
h2 {
}
h3 {
	color: #d78000;
}
h4 {
	font-size: 1.1em;
}
#main ul {
	padding-top: 15px;
	padding-inline-start: 40px;
}
a:visited {
	color: #7d70a4;
}
a:link {
	color: #7c15de;
}
a:active {
	color: red;
}
.cursor-default {
	cursor: default!important;
}

/*TABLES*/
/*To make a table responsive switch to divs*/
.table img {
	xwidth: 100%
}
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  border: none;
  padding: 5px;
  width: 80%;
  align-content: start;
}
@media (max-width: 998px) {
.table img {
	xwidth: 40%;
}
.tr {
    display: block;
    float: left;
  }
.td {
    display: block;
	width: 100%;
}
} 

@media (max-width: 650px) {
.table img {
	xwidth: 100%;
}
.tr {
    display: block;
    float: left;
}
.td {
    display: block;
	width: 100%;
}
} 



/*MENU*/
/* Header Styles */
#header {
	position: absolute;
	z-index: 2;
}
body #header p {
	font-family: Times New Roman, serif;
	font-style: italic;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column; /* Stack children vertically */
    height: 12%; /* Fixed height */
    padding: 15px 40px 15px 40px;
    width: 100%; /* To set the navbar to fixed position */
	position: fixed; /* To set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */ /* To set the navbar to fixed position */
	background: #e9d7fa;
	background: linear-gradient(90deg, rgba(233,215,250,1) 40%, rgba(255,255,255,1) 80%);
}
@media screen and (max-width: 1600px) {
.header {
    height: 6vw; /* Fixed height */
}
}
#header-main-1 {
	display: flex;
	width: 260px; /* To set the navbar to fixed position */
	position: absolute; /* To set the navbar to fixed position */
	top: 0; /* To set the navbar to fixed position */
	left: 0; /* To set the navbar to fixed position */
	margin: 40px 0 0 40px; /* To set the navbar to fixed position */
}
#header-main-2 {
	display: flex;
	/* width: 100%; /* To set the navbar to fixed position */
	position: static; /* To set the navbar to fixed position */
	/* top: 0; /* To set the navbar to fixed position */
	/* left: 260px; /* To set the navbar to fixed position */
	padding-left:260px;  /* To set the navbar to fixed position */
}
#header-col-1 {
	width: 260px;
	z-index: 99999;
}
#header-col-2 {
	/* padding-left: 50px; /* To set the navbar to fixed position */
    top: 30px;
    position: relative;
    width: 90%;
    margin: 0 auto;
	box-shadow: 0px 15px 10px -15px #29054B; /*bottom shadow*/
}
@media screen and (max-width: 998px) {
#header-col-2 {
    top: unset;
}
}
#header-col-3 {
	width: 50px;
	text-align:right;
}
/* Navigation Styles */
li.mobile {
	display : none;
	}
.nav {
    display: flex;
    gap: 15px;
}
.nav div {
    margin: 4px 0 4px 0;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(45deg, #29054B, #8557B3 );
    border-right: 2px #333333 solid;
	border-bottom: 2px #333333 solid;
    transition: 0.3s;
	width: 240px;
}
.nav .submenu div {
		width: 175px;
}
.nav div:hover {
    background: linear-gradient(45deg, #8557B3, #29054B);
    border-right: 2px #ffeab7 solid;
	border-bottom: 2px #ffeab7 solid;
}
/*Current page indicators (add class to header.html and <body> of page)*/
.home div.home, .downloads div.downloads, .links div.links, .faq div.faq, .respiratory div.respiratory, .stomatitis div.stomatitis, .conditions div.conditions, .sars div.sars, .blood div.blood, .register div.register, .donate div.donate, .fip div.fip, .fcov div.fcov, .faq div.faq, .faq div.faq, .faq div.faq, .faq div.faq, .faq div.faq, .faq div.faq, .faq div.faq, .faq div.faq, .faq div.faq, .faq div.faq {
	background: linear-gradient(45deg, #8557B3, #29054B);
    border-right: 2px #ffeab7 solid;
	border-bottom: 2px #ffeab7 solid;
}
.nav a {
    text-decoration: none;
}
.nav ul {
    list-style-type: none;
	font-weight: 600;
}
.nav p {
    background-color: #000; /* with text-shadow on, becomes the text shadow */
	text-shadow: -2px 0px 0px #efd8b7; /* add to create the text */
	/* Use for gradiant colored letters
    background-image: linear-gradient(90deg, #ffeab7, #efd8b7);
    background-image: linear-gradient(to bottom, #ffeab7 0%,#efd8b7 100%);
	*/
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

/* Sub-Menu Styles */
.nav .has-submenu {
    position: relative;
}
.nav .has-submenu .chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
}
.nav .has-submenu .submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #29054b36;
    padding: 10px 0 10px 10px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	width: 210px;
	/* overflow-x: hidden; /* Work with this and assigning height for scrolling sub-menus */
	/* overflow-y: scroll; /* Work with this and assigning height for scrolling sub-menus */

}
@media screen and (max-width: 998px) {
.nav .has-submenu .submenu {
background: transparent;
}
}
.nav .has-submenu:hover .submenu {
    display: block;
}

/* Burger Menu (Hidden by Default) */
.burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    width: 35px;
    height: 30px;
    justify-content: center;
    align-items: center;
    position: relative;
}
.burger div {
    width: 30px;
    height: 4px;
    background: #29054B;
    border-radius: 2px;
    transition: 0.3s;
    position: absolute; /* Ensures absolute positioning for alignment */
    left: 0; /* Align them to the left of the burger container */
}
.burger div:nth-child(1) {
    top: 3px;
}
.burger div:nth-child(2) {
    top: 13px; /*was 10*/
}
.burger div:nth-child(3) {
    top: 23px; /*was 20*/
}
.burger.active div:nth-child(1) {
    top: 6px;
    transform: rotate(45deg) translate(5px, 5px);
	width: 31px;
	background: #efd8b7;
}
.burger.active div:nth-child(2) {
    opacity: 0;
}
.burger.active div:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg) translate(5px, -5px);
	width: 31px;
	background: #efd8b7;

}
.nav .has-submenu:hover .submenu {
    z-index: 9999999;
}


/*BODY (needs to be here for precedence)*/
#main {
	position: relative;
	display: flex;
	max-width: 100%;
    padding: 15px 40px 15px 20px;
    xxxmargin: 40px 0 0 20px;
	/* margin-top: 180px; /* To set the navbar to fixed position */
	padding-top: 150px;
	max-width: 100%;
	z-index: 1;
	background: #e9d7fa;
    background: linear-gradient(90deg, rgba(233, 215, 250, 1) 40%, rgba(255, 255, 255, 1) 80%);
    background-repeat: no-repeat;
}
#body-col-1 {
	min-width: 265px;
}
#body-col-2 {
	width: 65%;
    margin: 0 auto;
}


/*RESPONSIVE*/
@media screen and (max-width: 998px) {
/*MENU*/
	li.desktop {
		display : none;
	}
	li.mobile {
		display : block;
	}
	.header {
		width: unset; /* To set the navbar to fixed position */
		position: static; /* To set the navbar to fixed position */
		top: unset; /* Position the navbar at the top of the page */ /* To set the navbar to fixed position */
		padding: 0px 40px 15px 40px; /* To set the navbar to fixed position */
	}
	#logo {
		width: 100%;
	}	
    .hide-on-mobile {
        display:none;
    }

    .nav {
		display: none;
        flex-direction: column;
        position: absolute;
        top: 32px;  /* To set the navbar to fixed position */
        right: 20px;
        background: #45484d;
        padding: 80px 15px 15px 15px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		width: 210px;
    }
    .nav.show {
        display: flex;
    }
    .burger {
        display: flex;
		z-index: 9999999; /* To set the navbar to fixed position */
    }
	.nav div {
		width: 190px;
		margin: 4px 0 4px 0;
		padding: 8px 10px;

	}
	.nav .submenu div {
		width: 175px;
	}
	.nav .has-submenu .submenu {
        position: static;
        display: none;
		padding: 0 0 0 30px; /*adjust padding and width so the menu is stable*/
		width: 210px;
    }
    .nav .has-submenu.active .submenu {
        display: block;
    }
	.nav .has-submenu .chevron {
		position: relative;
        bottom: 21px;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        float: right;
	}
	#header-main-1 {
		position: static;
}
	#header-main-2 {
		align-items: center;
		padding-left: 0; /* To set the navbar to fixed position */
	}
	#header-col-1 {
		width: 0;
	}
	#header-col-2 {
		width: auto;
	}
	#header-col-3 {
		width: 300px;
        text-align: right;
		margin-left: 15px;
	}
/*MAIN div*/
	#main {
		padding: 130px 20px;
		margin-top: unset;
	}
	#body-col-1 {
		display:none;
	}
	#body-col-2 {
		width: 100%;
        padding-left: 0;
        padding-right: 0;
	}
}



/*PAGES*/

/*treatment.htm PAGE*/
.link-highlight a {
	font-size: 20px;
}
div.link-highlight {
	display: block;
	padding-bottom: 20px;
}

/*LEGAL PAGE*/
.legal a, p.legal {
	color: grey;
	text-decoration: none;
}


/*SOCKET*/
footer p {
	font-family: Verdana, Arial;
	font-size: 12px;
}
div#footer {
	padding: 40px 0 20px 0;
}
@media only screen and (max-width: 769px) {
footer {
	margin-bottom: 0;
	height: 255px;
}
}
div#socket {
	width: 100%;
}
@media (max-width: 851px) {
div#socket {
	width: 100%;
	height: 160px;
}
}
body #socket img {
	width: 25px;
	height: 21px;
}
.socket1 {
	display: flex; 
	flex-direction: row; 
	justify-content: center; 
	flex-wrap: wrap;
}
.socket2 {
	width: 276px;
	margin-top: 4px;
}
.socket-text1 {
	flex-direction: row; 
	justify-content: center;
	margin-top: 5px;
	text-align: center;
}
.socket3 {
	width: 276px;
}
.socket-text2 {
	flex-direction: row; 
	justify-content: center;
    padding-bottom: 20px;	
}

@media (max-width: 998px) {
#cookie-bar {
    width: 100vw!important;
}
#cookie-bar p {
	padding: 10px 16px 10px 10px;
	margin: 0;
}
#cookie-bar-button, #cookie-bar-button-no {
    margin-bottom: 20px!important;
}
#cookie-bar-prompt {
	line-height: 1.2;
}
}

#cookie-bar-button-customize a {
	display:none!important;
}