@charset "ISO-8859-1";

.header-area {
	background-color: var(--clr-y-primary);
	padding: 10px 50px;
	position: relative;
}
/* .nav-container-outside{
	display: flex;
flex-direction: column;
} */
.username-contact,
.username{
	width:2rem;
	height:2rem;
	float:right;
	margin-right:.5rem;
	}

.top-navbar{
	padding:1rem;
	}
.phone{
	padding:1rem 3rem;
	border-radius:.5rem;
  position: relative;
  animation-name:phone;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
@keyframes phone {
  0%   {background-color:#ffc107; left:0px; top:0px;}
  50%  {background-color:#ffd865; left:10px; top:0px;}
  100%  {background-color:#ffc107; left:0px; top:0px;}
 }	
.nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo {
	width: 20rem;
	height:13rem;
	}

.ul-topnavbar,
.nav-logout {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ul-topnavbar,
.navbar {
	list-style-type: none;
	display: flex;
	align-items: center;
	}
.ul-topnavbar{
	margin-right:5rem;
}
.nav-links {
	color: var(--clr-g-dark);
	display: block;
	text-align: center;
	padding: 1rem 1rem;
	text-decoration: none;
	position: relative;
}
.nav-links.active {
  width: 100%;
  position:relative;
}
.nav-links.active:after {
  background: none repeat scroll 0 0 transparent;
  content: "";
  width: 70%;
  height: 2px;
  background: var(--clr-g-dark);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  transition: all 0.3s ease-in-out;
}
.nav-links.active:hover::after {
  width: 30%;
  left: 50%;
}
.nav-links:after {
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 2px;
	left: 50%;
	position: absolute;
	background: var(--clr-g-dark);
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	width: 0;
}
.bg-clr{
	background-color:inherit;
}
.nav-links:hover::after{
	width: 60%;
	left: 20%;
}
.logout-btn {
	background-image: url('/images/logout-white.png');
	background-repeat: no-repeat;
	width: 3rem;
	height: 3rem;
	background-size: contain;
	cursor: pointer;
	border-radius: .5rem;
}

.logout-btn:hover {
	border: 2px solid var(--clr-white);
}

.menu-bar img, .close-bar img {
	padding: .3rem;
}

.mobile-btn .menu-bar, .mobile-btn .close-bar {
	display: none;
	margin-right: 1rem;
	width: 3.3rem;
	height: 3.3rem;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

.mobile-btn .menu-bar:hover, .mobile-btn .close-bar:hover {
	border: 2px solid var(--clr-white);
}

.trip-ul{
	list-style-type: none;
	display: flex;
/*	align-items: center;
 justify-content: space-around;*/
	flex-wrap: wrap;
	/*flex: 1 1 auto;
  flex-shrink: 0;*/
 
	}
.tnavitems{
	flex-grow:1;
	text-align:center;
	padding:1rem .2rem;
	border:1px solid var(--clr-g-light);
	
}
/*.tnavitems:hover{
	background-color:green;
}*/
	
.trip-links {
/*color: var(--clr-g-dark);*/
text-decoration: none;
		cursor:pointer;
}
.newt-links .trip-links{
	color:#ffc107;
	
}
.newt-links:hover{
	background-color:rgba(255, 193, 7, .2);
}
.plant-links .trip-links{
	color:#0745ff;
}
.plant-links:hover{
	background-color:rgba(7, 69, 255, .2);
}
.plancon-links .trip-links{
	color:#042999;
}
.plancon-links:hover{
	background-color:RGBA(4,41,153,.2);
	}
.livet-links .trip-links{
	color: #ff0000;
}
.livet-links:hover{
	background-color:rgba(255, 0, 0, .2);
}
.closet-links .trip-links{
	color:#808080;
}
.closet-links:hover{
	background-color:rgba(128, 128, 128, .2);
}
.tripsheet-links .trip-links{
	color:#997304;
}
.tripsheet-links:hover{
	background-color:RGBA(153,115,4,.2);
	
}


.footerForAll{
	background-color:#222;
	color:#888;
	padding:1rem 2rem;
	
	font-weight:500;
	font-size:1rem;
	
	display:grid;
	/*grid-template-rows: max-content;*/
	grid-template-columns: [full-start] minmax(6rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
			 minmax(6rem, 1fr)[full-end];
			 
}
.footer-grid{
	grid-column: col-start 4/full-end;
	}
.footer-link{
	color:#999;
	font-size:1.2rem;
	font-weight:500;
}
.column{
	flex-direction: column;
}
/*
.footer-link:visited,
.footer-link:link{
	text-decoration:none;
	color:#f2f2f2;
}
.footer-link:hover{
	text-decoration:underline;
}
.footer-link:active{
	color:var(--clr-y-primary);
	}

*/

/*RESPONSIVE*/
@media only screen and (max-width: 62em) {
/** 992 / 16 = 62 **/
.header-area {
	padding: 10px 15px;
}

.logo {
	width: 17rem;
	height:12rem;
}

.nav-links {
	color: var(--clr-g-dark);
	display: block;
	text-align: center;
	padding: .5rem 1.5rem;
}

.mobile-btn .menu-bar {
	display: block;
}

.navbar {
	background-color: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(10px);
	position: fixed;
	top: 6rem;
	left: 0;
	width: 100%;
	height: 80vh;
	transform: translateX(100%);
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
	transition: all 0.2s ease-in;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	z-index:1;
}

.nav-open .navbar {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transform: translateX(0);
}

.nav-open .mobile-btn .close-bar {
	display: block;
}

.nav-open .mobile-btn .menu-bar {
	display: none;
}

}
@media only screen and (max-width: 48em) {
/* 768 / 16 = 48   */ 
.footer-grid{
	grid-column: col-start 2/full-end;
	}
}
@media only screen and (max-width: 37.5em) {
	/** 600 / 16 = 37.5 **/
	.header-area {
		padding: 10px 10px;
	}
	.ul-topnavbar{
	flex-direction: column;
	font-size:1.4rem;
	margin-right:2rem;
	}
	.username-contact{
	width:1.5rem;
	height:1.5rem;
	float:right;
	margin-right:.5rem;
	}

.phone{
	padding:1rem 3rem;
	border-radius:.3rem;
  }
@keyframes phone {
  0%   {background-color:#ffc107; left:0px; top:0px;}
  50%  {background-color:#ffd865; left:8px; top:0px;}
  100%  {background-color:#ffc107; left:0px; top:0px;}
 }
	.logo {
		width: 15rem;
		height:10rem;
	}
	.logout-btn {
		width: 2.8rem;
		height: 2.5rem;
	}
	.mobile-btn .menu-bar, .mobile-btn .close-bar {
		margin-right: .5rem;
		width: 2.6rem;
		height: 2.6rem;
	}
	.footer-grid{
	grid-column: full-start /full-end;
	}
	.footer-grid{
	flex-direction: column;
	justify-content:center;
	}
}
@media only screen and (max-width:25em) {
	/* 400 /16  = 25  */
	.header-area {
		padding: 8px 8px;
	}
	.ul-topnavbar{
	flex-direction: column;
	font-size:1.2rem;
	margin-right:1rem;
	}
	.username-contact{
	width:1.2rem;
	height:1.2rem;
	float:right;
	margin-right:.5rem;
	}
	.logo {
		width: 13rem;
		height:8rem;
	}
	.phone{
	padding:.5rem .5rem;
	border-radius:.3rem;
  }
}