body.color-mode {
	background-image: url('bg.jpg');
	background-size: cover;
	  background: url(bg.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.ineedcolor {
	cursor:pointer;
	z-index: 9999;
	border-radius: .3rem;
	display:block;
	position: absolute!important;
	top:1.6rem!important;
	right:3rem!important;
	width:auto;
}

.ineedcolor a {
	color:#58595b;
	cursor:pointer;
	font-size:1rem;
	font-weight: 500;
	padding:1rem;
	display: block;
	pointer-events:none;
	text-transform: uppercase;

}

.color-mode a.color-swap {
	color:white;
}

@keyframes rainbow {
	0%   {  
		color: #4A4B4C;
	}
	20%  {
		color: #F59F16;
	}
	40%  {
		color: rgba(6,48,70,1);
	}
	60%  {
		color: #F56B16;
	}
	80%  {
		color: #204a60;
	}
	100% { 
		color: #4A4B4C;
	}
	}
}

@keyframes ramp {
	0%   { opacity:0; }
	100% { opacity:1; }
	}
}

#charms ul li div img {
	display:block;
}

#charms ul li div img.color-charm {
	display:none;
}

.color-mode #charms ul li div img.color-charm {
	display:block;
}

.color-mode #charms ul li div img {
	display:none;
}

.color-mode #charms ul li h3 {
	color:#063046;
	font-weight: 500;
}

.color-mode #charms ul li h4 {
	color:#063046;
	opacity: .75;
}

.color-mode #nameplate h1 {
	color:white;
	font-weight: 700;
}

.color-mode #nameplate h1 span {
	color:#F59F16;
}

.color-mode #nameplate .st1 {
	fill:#063046;
	opacity: .5;
}

.color-mode #nameplate .logo {
	transform: 
		translate(-12.25rem,-2.25rem)
		scale(.7);


}

.color-mode #nameplate h2 {
	color:#F56B16;
	font-weight: 600;
	text-transform: uppercase;
	font-style: normal;
	letter-spacing: 6px;
}

.color-mode nav ul li a {
	color:white;
}

.color-mode nav .st0 {
	fill:#063046;
}

.color-mode #charms ul li img {
	animation: bounce .75s;
}

.color-mode #charms ul li:nth-of-type(2) img {
	animation-delay: .1s;
}
.color-mode #charms ul li:nth-of-type(3) img {
	animation-delay: .2s;
}
.color-mode #charms ul li:nth-of-type(4) img {
	animation-delay: .3s;
}
.color-mode #charms ul li:nth-of-type(5) img {
	animation-delay: .4s;
}
.color-mode #charms ul li:nth-of-type(6) img {
	animation-delay: .5s;
}
.color-mode #charms ul li:nth-of-type(7) img {
	animation-delay: .6s;
}

@keyframes bounce {
	0%   { transform:translateY(0rem);}
	50%  { transform:translateY(-4rem);}
	100% { transform:translateY(0rem);}
}

.color-mode.port-page nav .st0 {
	fill: #e4e5e6;
	animation: ramp .75s;
}

.port-page.color-mode img.port-charm-hero.color,
.port-page img.port-charm-hero:not(.color) {
	display:block;
}

.port-page img.port-charm-hero,
.port-page.color-mode img.port-charm-hero {
	display:none;
}

.port-page .ineedcolor a {
	color:#e4e5e6;
}