/* ----------------------------------------------- */
/*                  BASE STYLES                   */
/* ----------------------------------------------- */
html {font-size:16px;}
body {
	font-family: Nunito,san serif;
	width:100%;
        margin: 0 auto;
        padding: 0;		
	background-color:#ffffff; 
	color:#000000;
}

/* Global Styles */
.italic{font-style:italic;}
err {color:maroon;font-weight:bold;}
.imagestyle {border: 4px solid #eeeeee;}

/* To make sidebar alignment work */
table, tr, td, td .sidebar {
  vertical-align:top;
}

/*  Adjusts superior, inferior */
sub,
sup {
  position: relative;
  font-size: 75% !important;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}
ul{padding-left:24px;}

.rule{border-bottom:2px solid navy;margin-top:12px;margin-bottom:12px;}


/* ------------------------------------ */
/*    font-awesome characters           */
/* ------------------------------------ */
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    font-size: inherit;
    margin-right:2px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------- */
/*           Molly Box on Family Page              */
/* ----------------------------------------------- */
.mollybox{
	width:100%;
	height:210px;
	background:red;
	color:#000000;
	font-size:18px;
	line-height:1.3em;
	text-shadow:none;
	padding-top:12px !important;
	text-align:center;
}
.setborder{border:2px solid #000000;padding:6px;margin-top:14px;}


/* ----------------------------------------------- */
/*   Basic Page Container                          */
/* ----------------------------------------------- */

.container{width:100%;max-width:984px;margin:12px auto 0px auto;padding:12px;background-color:#ffffff;}
.blog{
	width:100%;
	margin-top:12px;
	background:blue;
	color:#000000;
	font-size:18px;
	line-height:1.3em;
	text-shadow:none;
	padding-top:12px;
	padding-bottom:18px;
}
.blog{background:lightblue;padding-bottom:36px;}
.blog img{border: 2px solid navy;}

/* -------------------------------------------------------- */
/*   Column Stucture - widths for two columns or more       */
/* -------------------------------------------------------- */

/* Home Page Stucture - set rows and col widths */
.full{width:100%;padding:0px 3px;}
.col-90{width:90%;padding:0px 3px;}
.col-80{width:80%;padding:0px 3px;}
.col-70{width:70%;padding:0px 3px;}
.col-60{width:60%;padding:0px 3px;}
.col-50{width:50%;padding:0px 3px;}
.col-40{width:40%;padding:0px 3px;}
.col-30{width:30%;padding:0px 3px;}
.col-25{width:25%;padding:0px 3px;}
.col-20{width:20%;padding:0px 3px;}

.left {float:left;}
.right {float:right;}
.clear {clear:both;}

.text {font-size: 1rem;}  /* = 16px */
.cutline{font-size: .875rem;line-height:1rem;font-weight:bold;padding:0px 18px;}  /* = 10px */

@media only screen and (max-width: 800px) {
	.container{width:85%;margin:12px auto 36px auto;}

}
@media only screen and (max-width: 900px) {
	.container{width:100%;margin:12px auto 36px auto;}
	.full,.col-20,.col-30,.col-40,.col-50,.col-60,.col-70,.col-80{float:none;width:100%;}

}

.videospace{width:25%;float:left;margin:12px;}
.prompt{margin:24px;}
.indent{margin:36px !important;}

/*  Box with background color */
.boxcopy{
	width:100%; 
	background-color:#cccccc;
	padding:24px;
}

/* ------------------------------------ */
/* image library of trees */
/* ------------------------------------ */
.library{width:23%;float:left;margin:3px 6px;padding:0}
.library_rightcol{width:70%;float:left;padding:0px;margin:12px 0px 0px 24px;}

@media only screen and (max-width: 600px) {
.library{width:95%;float:none;margin:0 auto 12px auto;}
.library_rightcol{width:95%;float:none;padding:0px;margin:0 auto 12px auto;}
}
@media only screen and (min-width: 601px) and (max-width: 846px) {
.library{width:45%;float:left;margin:3px 6px;padding:0}
.library_rightcol{width:45%;float:left;padding:0px;margin:12px 0px 0px 24px;}
}
@media only screen and (min-width: 847px) and (max-width: 950px) {
.library{width:45%;float:left;margin:3px 6px;padding:0}
.library_rightcol{width:40%;float:left;padding:0px;margin:12px 0px 0px 24px;}
}


/* ----------------------------------------------- */
/* Headline sizes                                  */
/* ----------------------------------------------- */

/* Headline sizes */
H1 {font-weight: bold;font-family:Macondo; font-size: 1.5rem; color: #003366; line-height: 1.25em;}                          /* = 24px */
H2 {font-weight: bold;font-family:Macondo; font-size: 1.25rem; color: #003366; line-height: 1.25em; font-style: italic;}     /* = 20px */
H3 {font-weight: bold;font-family:Macondo; font-size: 1.125rem; color: #003366; line-height: 1.25em;font-style: normal;}     /* = 18px  used for second line*/
H4 {font-weight: bold;font-family:Macondo; font-size: 1rem; color: #003366; line-height: 1.25em; font-style: normal;}        /* = 16px */
H5 {font-weight: bold; font-size: .875rem; color: #003366; line-height: 1.25em; text-align: center}    /* = 14px */
H6 {font-weight: bold; font-size: .75rem; color: #003366; line-height: 1.25em;}                             /* = 12px */
H7 {font-weight: bold; font-size: .625rem; color: #003366; line-height: 1.25em; text-align: center}    /* = 10px */
H8 {font-weight: bold; font-size: 2rem; color: #003366; line-height: 1.25em; text-align: center}    /* = 32px */
H9 {font-weight: bold; font-size: .625rem; color: #003366; line-height: 1.25em; text-align: center}    /* = 10px */
.header{font-weight: bold; font-size: 1.5rem; color: #003366; line-height: 1.25em;}                      /* = 10px */
.subheader {font-weight: bold; font-size: 1.125rem; color: #003366; line-height: 1.25em;font-style: normal;} /* = 18px */


/* ---------------------------- */
/*      Common Footer           */
/* ---------------------------- */

.footer{margin:18px auto 12px auto;font-size:.875rem;text-align:center;}

/* HTML generated footer */
footer {
    margin-top:18px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-bottom:48px;
}
footer p {
    margin: 0;
    font-size: .875rem;} /* = 14px */
}

/* ------------------------------------ */
/*    Color Changes for href            */
/* ------------------------------------ */

a.white{color: #ffffff;text-decoration:none;}
a:visited.white{color: #ffffff;text-decoration:none;}
a:active.white{color: #ffffff;text-decoration:none;}
a:hover.white{color: #ffcc00;text-decoration:none;}
a:visited:hover.white {color: #ffcc00;text-decoration:none;}

.red a {color: #cc0000;}
.red a:visited {color: #cc0000;}
.red a:active {color: #cc0000;}
.red a:hover {color: #cc0000;}

.smlink {color: #000000;font-size: 12px;}
.smlink a:link {color: #000000;font-size: 12px;}
.smlink a:visited {color: #000000;font-size: 12px;}
.smlink a:active {color: #000000;font-size: 12px;}
.smlink a:hover{color: #000000;font-size: 12px;}

.white{color:#000000;}
.black{color:#ffffff;}
.toc {background: gray}
.look {background: #ff80c0; color: lime}   

/* ------------------------------------ */
/*         Gold  Button                 */
/* ------------------------------------ */

 .gold-btn { 
        width:200px;
  	font-size:1.125rem;
	padding:8px;
	border:2px solid #e6b800;
	border-radius:3px;  /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
	transition: background-color 0.3s ease;
	background: #ffcc00 !important; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcc00', endColorstr='#e6b800'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffcc00), to(#e6b800)) !important; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ffcc00,  #e6b800) !important; /* for firefox 3.6+ */
	text-shadow: none !important; /* Don't remove this - covers browsers which don't support text-shaddow  */
	text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25) !important;
	color:#000000 !important;
	font-weight:normal;
	margin-bottom:18px;
}

.gold-btn:active, .gold-btn:focus {background: #ffcc00 !important;}

.gold-btn:hover {
	background-color:#e6b800 !important;
	border-color:#e6b800 !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6b800', endColorstr='#ffcc00'); /* for IE */
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e6b800), color-stop(1, #ffcc00) ) !important;
	background:-moz-linear-gradient( center top, #e6b800 5%, #ffcc00 100% ) !important;
}

@media screen and (max-width: 650px) {
	.gold-btn {width:96%;float:left;padding:10px;margin:0px;}
 } 
/* --------- End Generic  Button ---------- */


/* ----------- Button Used on El Camino Slideshow Pages ----------*/

.button{
	width:100px;
	padding:8px;
	margin-top:6px;
	z-index:0;
	border-top-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-left-width:1px;
	-moz-border-radius:3px !important; /* Firefox */
	-ms-border-radius:3px !important; 
	-o-border-radius:3px !important; 
	-webkit-border-radius:3px !important; /* Safari and Chrome */
	border-radius:3px !important;  /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
	border-color:#000 !important;
	background: #990000 !important; /* for non-css3 browsers */
	text-shadow:none !important;
	color:#fff !important;
	font-weight:normal !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#990000', endColorstr='#600000'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#600000)) !important; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #990000,  #600000) !important; /* for firefox 3.6+ */
}
.button:active, button:focus {background: #600000 !important;}

/*Button Hover Status. Inverse of class above */
button:hover {
	background-color:#600000 !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#600000', endColorstr='#990000'); /* for IE */
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #600000), color-stop(1, #990000) ) !important;
	background:-moz-linear-gradient( center top, #600000 5%, #990000 100% ) !important;
}

/* ------------------------------------ */
/*     Slideshow (el-camino and tours)  */
/* ------------------------------------ */
* {box-sizing:border-box}
.mySlides {display:none;}

.textright{text-align:right;font-weight:bold;}

/* Slideshow container */						  
.slideshow-container {
  max-width:70%;	
  position: relative;
  margin: auto;
}

/* Select city, state on Southwest */
select {
	padding: 10px;
        margin: 10px;
        font-size: 16px;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 250px;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  background-color:black;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev{
 	float:left;
	left:0;
}

.prev:hover, .next:hover, .prev:active, .next:active, .prev:focus, .next:focus {
  background-color:black;
}

/* Caption text */
.myslides .text {
  color: #000000;
  font-size: inherited;
  margin: 24px;
  background:white;
}

/* Caption text */
.slidetext {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: relative;
  top:99%;
  width: 100%;
  text-align: center;
  background:black;
  opacity:70%;
}

.return{position:relative;width:14%;float:left;} /* -- return button -- */	
.cityreturn{position:relative;float:left;width:29%;margin:0px 3px 12px 3px;} /* -- return button on tucson, bl, na -- */	
.viewall{position:relative;width:10%;float:left;} /* -- on el camino -- */

/* ---------- Thumbnails below slideshow ------------ */
.snapshot{
	width:80%;
	text-align:center;
	font-size:12px;
	line-height:1.2em;
	font-weight:bold;
	margin-bottom:18px;
	}
.snapshot li{list-style-type:none;display:inline-block;width:15%;margin:0px 8px 6px 0px;}

/* ---------- Thumbnails at right of slideshow ------------ */

.aside{width:100%;}
.aside li{list-style-type:none;float:left;display:block;width:30%;margin:0px 8px 6px 0px;}

/* ---------- Southwest autoslide show with border on active ------------ */
.slide {
        width:100%;
        display:none;
        padding:0px;
        margin-bottom:12px;
}
.slide img {
        width: 100%;
}
.active {
	display: block;
}
.thumbnails img {
        width:20% !important;
        object-fit: cover;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 3px;
}

.thumbnails img.active-thumb {
        border: 2px solid #333;
}

/* ---------- Slideshow Thumbnails where? ------------ */
.snapshothome, .fullshothome{
	width:80%;
	float:right;
	text-align:center;
	font-size:12px;
	line-height:1.2em;
	font-weight:bold;
	margin-bottom:18px;
	}
.snapshothome li{list-style-type:none;display:inline-block;width:15%;margin-bottom:6px;margin-right:6px;margin-left:0;}
.fullshothome li{list-style-type:none;display:inline-block;width:100%;margin-bottom:6px}

@media only screen and (max-width: 900px) {
  .snapshothome{width:100%;}
  .snapshothome li{list-style-type:none;display:inline-block;width:15%;margin:3px;}
  .snapshot li{list-style-type:none;display:inline-block;width:15%;margin:3px;}
  .fullshothome li{list-style-type:none;display:inline-block;width:15%;margin:3px}
  .return{width:100%;margin-bottom:10px;}
  .slideshow-container{max-width:100%;}

}
@media only screen and (max-width: 600px) {
  .slideshow-container{width:100%;}
  .snapshothome li{list-style-type:none;display:block;float:left;width:20%;margin:3px 8px 3px 3px;}
  .slideshow-container{max-width:100%;}
}

/* Number text (1/3 etc) */
.numbertext {
  color: WHITE;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background:BLACK;
}

/* ------------ numbered dots used on reunion slides  ---------------- */

.dot {
  cursor:pointer;
  height: 26px;
  width: 26px;
  margin:4px;
  padding:2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* ------------------ Fading animation  -------------------- */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}



/* ------------------------------------------------- */
/*       Image Rollovers on Family Page              */
/* ------------------------------------------------- */

.full_image_container {
	width:100%;
	min-height:336px; 	
	background:url(/images_unique/img_main-467x336.jpg) #ffffff no-repeat top left;
}
#thumbnails_container {margin-top:6px;}
.thumbnails{margin:0px auto;}
.thumbnails img {margin:0px 2px 4px 2px;width:30%;}

@media only screen and (max-width: 956px) {
	.full_image_container {
		float:none;
		width:100%;
		height:100%;
		margin-left:auto;
		margin-right:auto;
	}
	.thumbnails img {width:30% !important;}

}

@media only screen and (max-width: 600px) {
	.full_image_container {
		float:none;
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	.thumbnails img {width:30% !important;}

}
.caption{font-size.875;text-align:left;font-style:italic;margin:0px;padding:6px 18px;}


/* ----------------------------------------- */
/*     3 columns for displaying DB listings  */
/* ----------------------------------------- */
.dbrow{border-bottom:1px solid #cccccc;margin:6px 12px 0 12px;padding-bottom:10px;}
.dbcol-1{display:inline-block;width:34%;font-weight:bold;vertical-align: text-top;}
.dbcol-2{display:inline-block;width:24%;vertical-align: text-top;}
.dbcol-3{display:inline-block;width:14%;vertical-align: text-top;}
.dbcol-4{display:inline-block;width:24%;vertical-align: text-top;}

.dbcol-1 h4{font-size:16px;line-height:1em;font-weight:bold;}
.dbcol-2 h4{font-size:16px;line-height:1em;font-weight:bold;}
.dbcol-3 h4{font-size:16px;line-height:1em;font-weight:bold;}
.dbcol-4 h4{font-size:16px;line-height:1em;font-weight:bold;}

@media screen and (max-width: 840px) {
	.dbcol-1{display:block;width:100%;}
	.dbcol-2{display:block;width:95%;}
	.dbcol-3{display:block;width:95%;}
	.dbcol-4{display:block;width:95%;}
	.dbcol-1 h4{display:none;}
	.dbcol-2 h4{display:none;}
	.dbcol-3 h4{display:none;}
	.dbcol-4 h4{display:none;}

}




/* ------------------------------------------------- */
/*           SampsonCons Logo Header on Nav          */
/* ------------------------------------------------- */

.topnav a.titlelogo{
	font-size:20px;
	line-height:1.4em;
	color:navy;  
	padding: 14px 12px;
	margin:0 auto;
	background:white;
}
.samconHdr{width:100%;max-width:984px;margin:12px auto 0px auto;padding:12px;background-color:#ffffff;}
.samconHdr span{font-family: 'Montserrat', sans-serif;font-size:12px;height:60px;color:#ffffff;background:navy;padding:6px 30px 6px 30px;text-transform:lowercase;}
.samconHdr a{text-decoration:none !important;}

/* ------------ Sampson Top Menu Navigation ----------------- */
.topnav {
  overflow: hidden;
}

.topnav a, .topnav a:visited {
  float: left;
  display: block;
  color: navy;
  background-color:#ffffff;
  text-align: center;
  padding:30px 10px 12px 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight:bold;
  text-shadow:none;
}

.topnav a:hover, .dropdown:hover .dropbtn{
  background-color: #ffffff;
  color: #B8860B;
  text-decoration: none;
}

.topnav a:active, .topnav a:visited  {
  background-color: #ffffff;
  color: navy;
}

.topnav a:visited:hover{
  background-color: #ffffff;
  color: #B8860B;
}

.topnav .icon {
  display: none;
  font-size:18px !important;
}

@media screen and (max-width: 918px) {
  .samconHdr .fa{margin-right:24px;}
  .topnav a{padding-top:8px;}

  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* --------------------------------------- */
/*       Family Password Logon Styles      */
/* --------------------------------------- */
#login-container{
    width:80%;
    float:right;
    xposition: absolute;
    top: 10px;
    right: 40px;
    font-family: inherit; /* picks up body font */
    font-size: inherit;   /* picks up body size */
    z-index: 900;
}

/* Form styling */
#login-container form {
    background: #f5f5f5;    
    background: #cccccc;;    
    padding: 6px 6px 0px 6px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-bottom:12px;
}

/* Inputs */
.login_form input, .login-links{margin-right:6px;}
.login_form input[type="text"],
.login_form input[type="password"] {
    width: 100px;
    padding: 6px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

/* Submit button */
.login_form input[type="submit"], .login_form input[type="reset"] {
    width: 110px;
    padding: 6px;
    background-color: navy;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login_form input[type="submit"]:hover, .login_form input[type="reset"]:hover {
    background-color: #003366;
}

/* Links (reset + logoff) */
.login_links {
    padding-top:6px;
    text-align: right;
}

.login_links a {
    font-size: 0.9em;
    text-decoration: none;
    color: navy;
    margin-left: 10px;
}

.login_links a:hover {
    text-decoration: underline;
}

.special{background-color:white;margin:auto;}
@media screen and (max-width: 775px) {
    #login-container{
	width:100%;
   	float:none;
    }
}

/* --------------------------------------------------- */
/*      Flyout sidebar Navigation for family pages     */
/* --------------------------------------------------- */
flyout {
	margin: 0;
	font-family: Arial, sans-serif;
	background: #f5f7fa; /* light clean background */
	color: #222;
}

/* Menu Button */
#menuBtn {
    xposition: fixed;
    xtop: 15px;
    xleft: 15px;
       font-size: 24px;
       padding: 10px 15px;
       background: #0b1f3a;
       color: white;
       border: none;
       cursor: pointer;
    xz-index: 1001;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b1f3a', endColorstr='#0b1f3a'); /* for IE */
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0b1f3a), color-stop(1, #0b1f3a) ) !important;
    background:-moz-linear-gradient( center top, #0b1f3a 5%, #0b1f3a 100% ) !important;

}

/* Sidebar */
#sidebar {
	position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100%;
 	backdrop-filter: blur(12px);
  	background: rgba(11, 31, 58, 0.95); /* navy */
  	border-right: 1px solid rgba(0, 180, 255, 0.3);
  	box-shadow: 0 0 20px rgba(0, 180, 255, 0.2);
  	transition: 0.35s ease;
  	padding-top: 60px;
        z-index: 1002;
        overflow-y: auto;

}
 
/* Overlay */
#overlay {
	position: fixed;
       	display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
}

/* Links + buttons */
.sidebar a, .dropdown-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	color: white;
	text-decoration: none;
	font-size: 18px;
	background: none;
	border: none;
	width: 100%;
	cursor: pointer;
	transition: 0.25s;
	position: relative;
}

/* Glow + sparkle */
.sidebar a:hover, .dropdown-btn:hover {
	background: rgba(255,255,255,0.08);
	box-shadow: inset 0 0 12px rgba(0,180,255,0.4);
}

.sidebar a:hover::after, .dropdown-btn:hover::after {
	content: " ";   /* was a question mark */
  	position: absolute;
  	right: 20px;
  	animation: sparkle 0.6s ease;
}

@keyframes sparkle {
	0% { transform: scale(0.5) rotate(0); opacity: 0; }
  	50% { transform: scale(1.3) rotate(20deg); opacity: 1; }
  	100% { transform: scale(1) rotate(0); opacity: 0; }
}

.sidebar i {
  	width: 20px;
}
/* Close Button */
#closeBtn {
	position: absolute;
        top: 15px;
        right: 15px;
        font-size: 22px;
        color: white;
        cursor: pointer;
}


/* Links */
.nav-link {
    xdisplay: flex;
    xjustify-content: space-between;
    xalign-items: center;

	display: block;
        padding: 15px 20px;
        color: white;
        text-decoration: none;
        cursor: pointer;
}

.nav-link i {
        margin-right: 10px;
}

/* Sparkle hover */
.nav-link:hover {
	background-color: #001f4d;
        box-shadow: inset 0 0 10px rgba(255,255,255,0.25);
}

/* Dropdown base */
.dropdown-content {
	display: none;
	background: rgba(255,255,255,0.05);
}

.dropdown.active > .dropdown-content {
	display: block;
}

/* Indentation levels */
.dropdown-content .nav-link {
	padding-left: 40px;
	font-size: 14px;
}
.dropdown-content .dropdown .dropdown-content .nav-link {
	padding-left: 60px;
        font-size: 13px;
}

/* Slight variation for nested headers */
.nested > .nav-link {
	font-size: 15px;
}

/* Chevron animation */
.chevron {
    transition: transform 0.25s ease;
    float: right;
}

.dropdown.active .chevron {
    transform: rotate(180deg);