@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

#s4-workspace .megamenu .main-wrapper a {
    color:#383838;
    text-decoration:none !important;
}

#s4-workspace .menu-link {
	cursor: pointer;
}

#s4-workspace .megamenu ul li {
    list-style-type: none;
	position:initial !important;
}
#s4-workspace .megamenu .navbar-nav {
	display:flex;
	align-items:stretch;
	width:100%;
	flex-flow:row nowrap;
}
#s4-workspace .megamenu .navbar {
    background:#c7e1e5 !important;
    padding:0 !important;
    top:0;
    left:0;
    display:flex;
    flex-direction:column;
    z-index:10;
	justify-content:flex-start;
}
#s4-workspace .megamenu .brand-and-icon{
    display: flex;
    justify-content: space-between;
    padding:0;
    border-bottom:0;
}

#s4-workspace .megamenu .navbar-brand {
    font-size: 1.8rem;
    letter-spacing: 3px;
    font-weight: 700;
}

#s4-workspace .megamenu .pmnavbar-toggler {
    display: block;
    border: none;
    background: transparent;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border: 2px solid #000;
    border-radius: 4px;
}

#s4-workspace .megamenu .pmnavbar-toggler:hover {
    opacity: 0.7;
}
#s4-workspace .megamenu .pmnavbar-collapse{
    display: none;
	padding:0 !Important;
}
#s4-workspace .megamenu .navbar-nav {
	list-style:none;
	padding-left:0;
}
#s4-workspace .megamenu .navbar-nav > li {
    width:15.5%;
	list-style-type: none;
	position:initial !important;
	padding:0 !important;
	list-style-type: none;
}
#s4-workspace .megamenu .navbar-nav > li::marker {
	content:"";
	display:none;
}
#s4-workspace .megamenu .navbar-nav > li > a {
    text-transform:none;
    font-size:0.9rem;
    font-weight:700;
    display: block;
    padding:0;
    margin:0;
    border-bottom:0 !important;
    border-radius:0;
	position:relative;
	color:#383838 !important;
}
#s4-workspace .megamenu .navbar-nav > li > a:hover, #s4-workspace .megamenu .navbar-nav > li > a:focus, #s4-workspace .megamenu .navbar-nav > li > a:active {
	border-bottom:none;
	color:#383838 !important;
	background-color:#f5f8fa !important;
	
}
#s4-workspace .megamenu .drop-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
	color:#becace;
	font-size:1.2rem;
}
#s4-workspace .megamenu .sub-menu ul li {
    text-transform: none;
    padding: 0.2rem 0;
    margin: 0.2rem 0;
    font-size: 0.90rem;
	display: list-item !important;
}
#s4-workspace .megamenu .sub-menu-item {
    padding:0 1.0vw;
}

#s4-workspace .megamenu .sub-menu{
    display: none;
}

/*
.megamenu .sub-menu-item:nth-child(3){
    background: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.megamenu .sub-menu-item:nth-child(3) h2{
    text-transform: capitalize;
    margin: 1.5rem 0;
}
.megamenu .sub-menu-item:nth-child(3) .btn{
    border: 1px solid #000;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    background: #000;
    color: #fff;
    transition: all 0.5s ease;
}
.megamenu .sub-menu-item:nth-child(3) .btn:hover{
    background: transparent;
    color: #000;
}
.megamenu .sub-menu-item:nth-child(4){
    width: 50%;
    margin: 0 auto;
    padding: 2rem 0;
}
*/

/* Sub Menu Styles */
#s4-workspace .megamenu .sub-menu h4 {
    text-transform: none;
    font-size:0.9rem !important;
	color:#383838 !important;
    padding:1rem 0 0;
	font-weight:700;
	margin:4px 0 10px 0 !important;
}
#s4-workspace .megamenu .sub-menu ul li {
    text-transform: none;
    padding:0 0 0.3rem;
    margin:0 0 0.3rem;
	display: list-item !important;
	font-size:1.0rem;
}
#s4-workspace .megamenu .sub-menu ul li::marker {
	content:"";
}

#s4-workspace .megamenu .sub-menu ul li a, #s4-workspace .megamenu .sub-menu ul li a:visited {
    text-decoration:none !important;
	border-bottom:0 !important;
	font-size:0.95rem !important;
	color:#03405b !important;
}
/*  UHN Hover Style
#s4-workspace .megamenu .sub-menu ul li a:hover, #s4-workspace .megamenu .sub-menu ul li a:focus, #s4-workspace .megamenu .sub-menu ul li a:active {
    text-decoration:none !important;
	color:#fff !important;
	background-color:rgb(10,85,136)!important;
	border-bottom:0 !important;
	outline:1px solid rgb(10,85,136);
}
*/
#s4-workspace .megamenu .sub-menu ul li a:hover, #s4-workspace .megamenu .sub-menu ul li a:focus, #s4-workspace .megamenu .sub-menu ul li a:active {
    text-decoration:none !important;
	color:#000 !important;
	background-color:transparent !important;
	border-bottom:1px solid #03405b !important;
}

#s4-workspace .megamenu .sub-menu {
	box-shadow:0 0.125rem 0.25rem rgb(0 0 0 / 40%);
	z-index:2001;
}
#s4-workspace .megamenu .sub-menu-item .menu-item-children li {
	padding: 0 0 0 0.6rem !important;
	margin: 0 0 0 0.6rem;
}
	
@media screen and (max-width: 767px) {
	/* Mobile Menu Styles */
	#s4-workspace .megamenu .navbar {
		max-height:	none !important;
	}
	#s4-workspace .megamenu .pmnavbar-collapse {
		background:#e2edf2;
		width:100%;
		margin:0;
	}
	#s4-workspace .megamenu .pmnavbar-collapse .navbar-nav {
		flex-direction:column;
		margin:0;
	}
	#s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li {
		width:100% !important;
		border-bottom:2px solid #fff;
		padding:0 !important;
	}
	#s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a {
		font-size:1.0rem;
		color:#0072c6 !important;
		font-weight:700;
		text-decoration:none;
		padding:15px 30px !important;
	}
	#s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a:hover, #s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a:focus, #s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a:active {
		color:#fff !important;
		font-weight:700;
		text-decoration:none;
		background:#0072c6 !important;
	}
	#s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a > .drop-icon {
		position:static;
		color:#0072c6 !important;
		float:right;
		margin-top:12px;
	}
	#s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a:hover > .drop-icon, #s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a:focus > .drop-icon, #s4-workspace .megamenu .pmnavbar-collapse .navbar-nav > li > a:active > .drop-icon {
		color:#fff !important;
	}
	
	/* Mobile Styles and Overrides */
	#s4-workspace .megamenu .navbar {
		background:#f4f9fc !important;
		justify-content:center;
	}
	#s4-workspace .megamenu .brand-and-icon {
		justify-content:flex-start;
		background:#f4f9fc;
		padding:0 0 0 30px;
		min-height:60px;
	}
	#s4-workspace .megamenu .pmnavbar-toggler {
		color:#fff;
		border:0;
		min-width:0;
		opacity:1;
	}
	#s4-workspace .megamenu .pmnavbar-toggler > i::before {
		font-size:1.6rem;
		color:#0072c6;
		margin-right:8px;
	}
	#s4-workspace .megamenu .pmnavbar-toggler::after {
		content:"Menu";
		font-size:1.2rem;
		color:#383838;
		font-weight:700;
		margin-top:4px;
		line-height:100%;
		float:right;
		margin-left:8px;
	}
	#s4-workspace .megamenu .sub-menu {
		box-shadow: 0 0 0 rgb(0 0 0 / 0%);
		margin-bottom:40px;
	}
	#s4-workspace .megamenu .sub-menu h4 {
		font-size:1.0rem !important;
		margin-left:1.0rem !important;
	}
	#s4-workspace .megamenu .sub-menu ul li {
		padding:0.6rem 0.6rem !important;
		margin:0;
		border-bottom:1px solid #fff;
	}	
	#s4-workspace .megamenu .sub-menu .menu-item-children li {
		border-bottom:0 !important;
	}
	
	#s4-workspace .megamenu .sub-menu ul li a, #s4-workspace .megamenu .sub-menu ul li a:visited {
		font-size:1.0rem;
	}
	#s4-workspace .megamenu .sub-menu ul li a:hover, #s4-workspace .megamenu .sub-menu ul li a:focus, #s4-workspace .megamenu .sub-menu ul li a:active {
		background:transparent !important;
		color:#035381 !important;
	}
	#s4-workspace .megamenu .sub-menu ul li:hover {
		background:rgba(255,255,255,0.5);
	}
	#s4-workspace .megamenu .sub-menu .sub-menu-title {
		display:none;
	}
	#s4-workspace .megamenu .sub-menu .sub-menu-grid {
		margin:0;
	}
	#s4-workspace .megamenu .sub-menu-item {
		padding:0 3.5vw 0 3.8vw;
	}
	#s4-workspace .megamenu .sub-menu-item-hidden {
		display:none !important;
	}
	#s4-workspace .megamenu .sub-menu-item > ul {
		list-style:none;
		padding-left:0 !important;
	}
	#s4-workspace .megamenu .sub-menu-item > ul li::after {
		content: "\f054";
		font-family:"Font Awesome 5 Free";
		font-weight:900;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style:normal;
		font-variant:normal;
		text-rendering:auto;
		line-height:22px;
		margin-left:2px;
		color:#0071bc;
		height:16px;
		width:16px;
		text-align:center;
		border-radius:8px;
		font-size:1.2rem;
		float:right;
	}
	#s4-workspace .megamenu .menu-item-children > li::after {
		content:"" !important;
	}
	#s4-workspace .megamenu li.no-arrow::after {
		content:"" !important;
	}
}
/* Media Queries */
@media screen and (max-width: 400px) {
	#s4-workspace .megamenu .sub-menu-item > ul li::after {
		float:none;
		font-size:1.0rem;
	}
}


@media screen and (min-width: 767px){
    #s4-workspace .megamenu .navbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-bottom:0;
        padding:0 20px !important;
        position:relative;
		justify-content:flex-start;
		align-items:center;
		background:#e2edf2 !important;
	
    }
    #s4-workspace .megamenu .pmnavbar-toggler{
        display: none;
    }
    #s4-workspace .megamenu .brand-and-icon{
        flex:0 0 0;
        border-bottom: none;
        padding: 0;
    }
    #s4-workspace .megamenu .pmnavbar-collapse {
		display:block !important;
        overflow-y: hidden;
        flex:auto;
    }
	#s4-workspace .megamenu .navbar-nav > li {
		background:#e2edf2;
	}
    #s4-workspace .megamenu .navbar-nav > li > a { 
        margin:0;
        padding:1.1rem 2.5rem 1.1rem 1.0rem;
        font-size:0.9rem;
		border-bottom:0 !important;
		color:#383838;
		min-height:85px;
		line-height:1.5;
		text-decoration:none !important;
    }
	#s4-workspace .megamenu .navbar-nav > li > a:hover .drop-icon, .megamenu .navbar-nav > li > a:focus .drop-icon, .megamenu .navbar-nav > li > a:active .drop-icon { 
		color:#0072c6;
	}
	#s4-workspace .megamenu .navbar-nav > li > a:hover, .megamenu .navbar-nav > li > a:focus, .megamenu .navbar-nav > li > a:active  {
		border-bottom:none;
		color:#383838 !important;
		background-color:#f5f8fa !important;
	}
	
    #s4-workspace .megamenu .sub-menu {
        position: absolute;
        left:0;
        width:100%;
        top:100%;
        background:#f5f8fa;
		padding:0;
		margin-top:-10px;
    }
	#s4-workspace .megamenu .navbar-nav > li:hover .sub-menu {
		display:block !important;
		
    }
	#s4-workspace .megamenu .navbar-nav .sub-menu-title, #s4-workspace .megamenu .navbar-nav .sub-menu-title:hover, #s4-workspace .megamenu .navbar-nav .sub-menu-title:focus, #s4-workspace .megamenu .navbar-nav .sub-menu-title:active, #s4-workspace .megamenu .navbar-nav .sub-menu-title:visited {
		display:block;
		font-size:1.2rem;
		font-weight:700;
		color:#0071bc !important;
		margin:23px 38px 13px;
		border-bottom:3px solid #f4de71 !important;
		padding-bottom:12px;
		background:transparent !important;
		text-decoration:none !important;
	}
	
	#s4-workspace .megamenu .navbar-nav .sub-menu-grid {
		display:grid;
        grid-template-columns:repeat(4, 1fr);
		grid-column-gap:20px;
		margin:0 27px 40px;
	}
	
	#s4-workspace .megamenu .navbar-nav .menu-item-children {
		list-style:none;
	}
	#s4-workspace .megamenu .navbar-nav .menu-item-children li {
		padding:0.2rem 0 0.2rem 0.6rem;
		margin:0.2rem 0 0.2rem 0.6rem;
	}
	#s4-workspace .megamenu .navbar-nav .menu-item-children li:before {
		content:"•";
		font-size:1.0rem;
		color:#0071bc;
		display:inline-block;
		margin-left:-1em;
		width:10px;
	}
	
	
	/* Patients, Caregivers and Visitors */
	#s4-workspace .megamenu .navbar-nav > li:nth-child(1) .sub-menu-grid {
		grid-template-columns:repeat(4, 1fr);
	}
	/* Healthcare Professionals */
	#s4-workspace .megamenu .navbar-nav > li:nth-child(2) .sub-menu-grid {
		grid-template-columns:repeat(3, 1fr);
	}
	/* Cancer Research */
	#s4-workspace .megamenu .navbar-nav > li:nth-child(3) .sub-menu-grid {
		grid-template-columns:repeat(3, 1fr);
	}
	/* Education and Training */
	#s4-workspace .megamenu .navbar-nav > li:nth-child(4) .sub-menu-grid {
		grid-template-columns:repeat(3, 1fr);
	}
	/* About the Princess Margaret */
	#s4-workspace .megamenu .navbar-nav > li:nth-child(5) .sub-menu-grid {
		grid-template-columns:repeat(4, 1fr);
	}
	/* Get Involved */
	#s4-workspace .megamenu .navbar-nav > li:nth-child(6) .sub-menu-grid {
		grid-template-columns:repeat(4, 1fr);
	}
	
	#s4-workspace .megamenu .navbar-nav > li {
        border-top: 4px solid transparent;
		border-right:2px solid #fff;
    }
	#s4-workspace .megamenu .navbar-nav li:last-child {
		border-right:0;
	}
    #s4-workspace .megamenu .navbar-nav > li:hover {
        border-top-color: #0072c6;
		background:#f5f8fa;
    }
	#s4-workspace .megamenu .navbar-nav > li:hover .drop-icon {
		color:#0072c6;
	}
	#s4-workspace .megamenu .sub-menu-item > ul {
		margin:0;
		padding:0;
		list-style:none;
	}
    #s4-workspace .megamenu .sub-menu-item:nth-child(3){
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* External Link Selector */
#s4-workspace .megamenu a[target="_blank"]:after {
	display:inline-block;
	content:"";
	width:13px;
	height:13px;
	background:url("/PrincessMargaret/Custom%20Code/Images/home/external_icon.svg") no-repeat;
	margin-left:5px;
}
#s4-workspace .megamenu a:hover[target="_blank"]:after, #s4-workspace .megamenu a:focus[target="_blank"]:after, #s4-workspace .megamenu a:active[target="_blank"]:after {
	background:url("/PrincessMargaret/Custom%20Code/Images/home/external_icon-black.svg") no-repeat;
}
#s4-workspace .megamenu .sub-menu-title[target="_blank"]:after {
	margin-left:10px;
}


/* IE11 Fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#s4-workspace .megamenu {
		width:100vw;
	}
	#s4-workspace .megamenu .navbar-nav {
		display:block !important;
	}
	#s4-workspace .megamenu .navbar-nav > li {
		position:static !important;
		width:16.5% !important;
	}
	#s4-workspace .megamenu .pmnavbar-collapse {
        overflow-y:visible;
    }
	#s4-workspace .megamenu .sub-menu {
        position:absolute !important;
        left:0;
        width:100vw;
        top:auto;
        background:#f5f8fa;
    }
}
@media all and (min-width:767px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#s4-workspace .megamenu .navbar-nav > li {
		position:static !important;
	}
	#s4-workspace .megamenu .navbar-nav > li:hover .sub-menu {		
		width:100vw;
		display:block !important;
		background:#f5f8fa;
		padding:0 0 40px;
    }
	#s4-workspace .megamenu .sub-menu-grid {
		display:block !important;
	}
	#s4-workspace .megamenu .sub-menu-grid .sub-menu-item {
		width:30%;
		display:block;
		margin-bottom:30px;
		float:left;
		margin-right:5%:
	}
	#s4-workspace .megamenu .pmnavbar-toggler:after {
		height:60px;
		margin-top:17px;
	}
}