/*
Pure CSS Navigation v1.8
by Adam Culpepper | @adamculpepper
https://github.com/adamculpepper/pure-css-navigation
*/
@media only screen and (max-width: 1150px) {
    .pure-css-nav {
        display: none;
    }
}
.pure-css-nav > nav ul li a.step1 {
    display: flex
;
    align-items: center;
    font-size: 16px;
    color: rgb(8, 24, 43);
    font-weight: 500;
    line-height: 85px;
    text-transform: uppercase;
    position: relative;
    padding: 0px 15px;
    overflow: hidden;
}
/* Customizable styles */
.pure-css-nav > nav ul li a			{color:rgb(0, 0, 0);}

.pure-css-nav > nav > ul > li			{margin-right:1px;}

/* Level 1 */
.my-megamenu{
    display: inline-table;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    box-shadow: rgba(82, 0, 57, 0.1) 0px 10px 15px 0px;
    border-width: 2px 0px 0px;
    border-image: initial;
    border-top: 2px solid rgb(56, 147, 194);
    padding: 10px 0px !important;
    border-radius: 0px 0px 14px 14px;
}
.my-megamenu li a {
    display: block;
    width: 100%;
    clear: both;
    font-weight: 400;
    color: rgb(17, 10, 50);
    text-align: inherit;
    background-color: transparent;
    font-size: 17px;
    padding: 15px;
    white-space: nowrap;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
}
.pure-css-nav > nav ul li a			{font-size:1rem; /*line-height:50px;*/ padding:13px 20px;}

/* Level 2 and beyond */
.pure-css-nav > nav ul ul				{background-color:white;}
.pure-css-nav > nav ul ul li a			{
	border-bottom: 1px solid #cfcece52;
	font-size: 18px;
    line-height: 25px;
    padding: 8px 20px;
    /* line-break: strict; */
    white-space: initial;

}
.pure-css-nav > nav ul ul li a:hover{
	color:#1f6ea9;
}
/* Hover colors */
.pure-css-nav > nav ul li:hover,
.pure-css-nav > nav ul li li:hover > a:first-child:nth-last-child(2),
.pure-css-nav > nav > ul > li:hover > a:first-child:nth-last-child(2) {color:#1f6ea9;}
.pure-css-nav > nav ul li:hover a.step1{
    color:#1f6ea9;
}
/* Font icon arrow colors */
.pure-css-nav > nav > ul > li > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.30);}
.pure-css-nav > nav > ul > li:hover > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.60);}
.pure-css-nav > nav ul li li > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.30);}
.pure-css-nav > nav ul li li:hover > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.60);}

/* Mobile Navigation overlay */
.pure-css-nav.mobile-nav input:checked + label + nav {background-color:rgba(255, 255, 255, 0.9);}

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
.pure-css-nav > nav {width:100%;}

.pure-css-nav > nav ul,
.pure-css-nav > nav li					{margin:0; padding:0; list-style:none;}
.pure-css-nav > nav li:hover			{cursor:pointer;}
.pure-css-nav > nav a					{text-decoration:none;}

/* Level 1 */
.pure-css-nav > nav ul					{display:flex; flex-wrap:wrap;}
.pure-css-nav > nav ul li				{overflow:hidden; white-space:nowrap; text-align:left;}
.pure-css-nav > nav ul li:hover			{overflow:visible;}
.pure-css-nav > nav ul > li				{position:relative;}
.pure-css-nav > nav ul li a				{display:block; height:100%;}

/* Level 2 */
.pure-css-nav > nav ul ul				{visibility:hidden; opacity:0; position:absolute; z-index:1; display:block;}
.pure-css-nav > nav ul li:hover > ul	{visibility:visible; opacity:1;width: 300px;}

/* Level 3 */
.pure-css-nav > nav ul ul ul			{top:0; left:100%;}
.pure-css-nav > nav ul ul ul			{margin-top:5px;}

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

/* Transitions */
.pure-css-nav > nav ul,
.pure-css-nav > nav ul li,
.pure-css-nav > nav ul li a,
.pure-css-nav > nav ul li a:first-child:nth-last-child(2):after {transition:all 200ms linear;}

.pure-css-nav.mobile-nav				{transition:all 0.5s linear;}







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

/* Arrow styles */
.pure-css-nav > nav ul li a {display:flex; align-items:center;}
.pure-css-nav > nav ul li a:first-child:nth-last-child(2):after {
	content:'';
	display:inline-block;
	width:12px;
	height:12px;
	margin-left:10px;
	opacity:0.50;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:13px 13px;
	background-image:url("https://icon-library.com/images/right-arrow-icon-png/right-arrow-icon-png-22.jpg");
}
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):before,
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):after {content:'';}
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):before {order:1; margin-left:10px;}
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):after {order:2; margin-left:auto;}

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

/* FontAwesome Icon arrow support */
.pure-css-nav.nav-font-icons ul li a:first-child:nth-last-child(2):after {
	content:'\f078'; /* arrow: down */
	font-family:'FontAwesome';
	opacity:1;
	width:auto;
	height:auto;
	background:none;
}
.pure-css-nav.nav-font-icons ul ul li > a:first-child:nth-last-child(2):after {content:'\f054';} /* arrow: right */

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

/* Justify Navigation (first level equal widths) */
.pure-css-nav.nav-justified > nav > ul {width:100%;}
.pure-css-nav.nav-justified > nav > ul > li {flex:1 1 auto;}
.pure-css-nav.nav-justified > nav > ul > li > a {justify-content:center;}

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

/* Vertical Navigation */
.pure-css-nav.nav-vertical nav > ul {display:block; width:200px;}
.pure-css-nav.nav-vertical nav > ul li a:first-child:nth-last-child(2):after {margin-left:auto;}
.pure-css-nav.nav-vertical nav > ul ul {left:100%; top:0; margin-top:5px;}
.pure-css-nav.nav-vertical nav > ul > li	{margin-bottom:1px;}

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

/* Mobile Navigation */
.pure-css-nav.mobile-nav input {display:none;}
.pure-css-nav.mobile-nav input + label {margin-bottom:0; z-index:999;}
.pure-css-nav.mobile-nav input + label + nav > ul > li {margin-right:1px;}
.pure-css-nav.mobile-nav input:checked + label {position:absolute; top:8px; right:10px;}
.pure-css-nav.mobile-nav input:checked + label i:before {content:'\f00d';}










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

/* Responsive Breakpoints - down */

/* Extra Small (xs) and down */
@media (max-width:575px) {}

/* Small (sm) and down */
@media (max-width:767px) {}

/* Medium (md) and down */
@media (max-width:991px) {
	.pure-css-nav.mobile-nav > nav {display:none;}
	.pure-css-nav.mobile-nav input:checked + label + nav {display:block;}







/* Mobile Navigation > Animations */
.pure-css-nav.mobile-nav input:checked + label + nav			{animation:mobile-nav-slide-in 0.5s;}
.pure-css-nav.mobile-nav.pure-css-nav-animation-ready input:not(:checked) + label + nav 	{animation:mobile-nav-slide-out 5s; animation-play-state:paused!important;}




.pure-css-nav.mobile-nav input:checked + label i:before		{animation:fade-icon-close 0.5s;}

@keyframes mobile-nav-slide-in {
	0%		{left:-100%; opacity:0; visibility:visible; /*transition-timing-function: linear;*/}
	100%	{left:0; opacity:1;}
}

@keyframes mobile-nav-slide-out {
	0%		{left:0; opacity:1; visibility:visible;}
	100%	{left:-100%; opacity:0; visibility:hidden;}
}



@keyframes fade-icon-close {
	0%		{opacity:0;}
	100%	{opacity:1;}
}


/* Mobile Navigation > Vertical Navigation */
.pure-css-nav.mobile-nav input:checked + label + nav > ul {display:block; width:300px; max-width:100%; height:100%;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul li a:first-child:nth-last-child(2):after {margin-left:auto;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul ul {left:0; top:100%; width:100%;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul > li {margin-bottom:1px;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul li:hover > ul {position:relative; margin-left:10px; border-left:3px solid #999;}
.pure-css-nav.mobile-nav input:checked + label + nav ul ul ul {margin-top:0;}

.pure-css-nav.mobile-nav input:checked + label i:before {animation:anim1 2s;}





@keyframes anim1 {
	from {color:red; background:green;}
}


.pure-css-nav.mobile-nav input + label + nav {background-color:rgba(255, 0, 255, 0.9)!important;} /* temp */
.pure-css-nav.mobile-nav input + label + nav {
	display:block;
	margin:0 -100%;
	margin:0 calc(50% - 50vw);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99;
	width:100%;
	height:100%;





}



.pure-css-nav.mobile-nav input:checked + label + nav {

	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99;
	width:100%;
	height:100%;




}



.pure-css-nav.mobile-nav input:checked + label + nav			{visibility:visible; opacity:1;}
.pure-css-nav.mobile-nav input:not(:checked) + label + nav 	{visibility:hidden; opacity:0;}




/*
.pure-css-nav.mobile-nav *,
.pure-css-nav.mobile-nav *:before,
.pure-css-nav.mobile-nav *:after {animation-play-state:paused!important;}
*/







.pure-css-nav.mobile-nav:not(:hover) * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	border:2px solid red;
}





}

/* Large (lg) and down */
@media (max-width:1199px) {}

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

/* Responsive Breakpoints - up */

/* Small (sm) and up */
@media (min-width:576px) {}

/* Medium (md) and up */
@media (min-width:768px) {}

/* Large (lg) and up */
@media (min-width:992px) {
	.pure-css-nav.mobile-nav input:not(:checked),
	.pure-css-nav.mobile-nav input:not(:checked) + label {display:none;}
}

/* Extra Large (xl) and up */
@media (min-width:1200px) {}

.pure-css-nav a:not([href]),
.pure-css-nav a[href='']:hover,
.pure-css-nav a[href='#']:hover,
.pure-css-nav a[href='']:active,
.pure-css-nav a[href='#']:active {pointer-events:none;}





/*
multi-layer mobile nav
https://codepen.io/tiffachoo/pen/yzZRXK



try not covering the whole window - just the slide out
*/