/*homepage.css*/
header {
/*	background: rgb(195,213,208);
	background: linear-gradient(60deg, rgba(195,213,208,1) 0%, rgba(69,125,108,1) 100%);*/
background: rgb(213,225,222);
background: linear-gradient(160deg, rgba(213,225,222,1) 0%, rgba(69,125,108,1) 100%);
}


.upper-nav ul li i {
	font-size: 1.5rem!important;
}


h2 {
/*	font-size:  3rem!important;*/
    font-size: calc(.75rem + 1.6vw);
    text-wrap: nowrap;
}

h4 a {
	font-weight: 300;
	color: #FFF;
	text-decoration: none;
}

h4 a:hover {
	color: #d0ddda;
}

.map {
	background: url(/images/v2/map.png) no-repeat top left;
	width: 400px;
	height: 422px;
	position: relative;
}

.state-circle {
	display: block;
	border-radius: 50%!important;
	background-color: #FFF;
	width: 80px;
	height: 80px;
	box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025);
	position: absolute;
}

.state-circle img {
	position: absolute;
}

.state-hi {
	top: 319px;
    left: 29px;
}
.state-hi img{
	top: 16px;
    left: 16px;
}

.state-id {
	top: 92px;
	left: 173px;
}
.state-id img{
	top: 10px;
    left: 20px;
}

.state-mt {
	top: 28px;
    left: 248px;
}
.state-mt img{
	top: 22px;
    left: 7px;
}

.state-nv {
	top: 176px;
    left: 120px;
}
.state-nv img{
	top: 19px;
	left: 8px;
}

.state-nm {
	top: 302px;
    left: 303px;
}
.state-nm img{
	top: 20px;
    left: 19px;
}

.state-ut {
	top: 205px;
    left: 209px;
}
.state-ut img{
	top: 17px;
    left: 21px;
}

.state-or {
	top: 78px;
    left: 69px;
}
.state-or img{
	top: 27px;
    left: 7px;
}

.state-wa {
	top: -9px;
    left: 85px;
}
.state-wa img{
	top: 20px;
	left: 7px;
}


.navbar {
	top: 62px;
	background-color: #c3d5d0;
	filter: drop-shadow(0px 2px 3px #B3ABAB);

}

.navbar-nav .nav-item .nav-link{
	color: #085942;
}

@media (min-width: 1200px) {
	.nav-item{
		font-size: 1.1rem!important;
	}
}

@media (max-width: 1199px) {
	.nav-item{
		font-size: .9rem!important;
	}
}









.transition {
  transition: all 0.25s ease-in-out;
}



.float-ani-1 {
  animation: floatAnimation1 8.25555s infinite alternate;
}
.float-ani-2 {
  animation: floatAnimation2 7.15555s infinite alternate;
}
.float-ani-3 {
  animation: floatAnimation3 10.05555s infinite alternate;
}
.float-ani-4 {
  animation: floatAnimation4 9.43555s infinite alternate;
}
.float-ani-5 {
  animation: floatAnimation4 7.43555s infinite alternate;
}
.float-ani-6 {
  animation: floatAnimation4 9.93555s infinite alternate;
}
.float-ani-7 {
  animation: floatAnimation4 10.43555s infinite alternate;
}
.float-ani-8 {
  animation: floatAnimation4 9.13555s infinite alternate;
}

@keyframes floatAnimation1 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -2px);
  }
  50% {
    transform: translate(2px, 1px);
  }
  75% {
    transform: translate(-1px, 2px);
  }
  100% {
    transform: translate(2px, -2px);
  }
}

@keyframes floatAnimation2 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -2px);
  }
  50% {
    transform: translate(1px, 2px);
  }
  75% {
    transform: translate(-1px, 2px);
  }
  100% {
    transform: translate(1px, -2px);
  }
}


@keyframes floatAnimation3 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, -1px);
  }
  50% {
    transform: translate(2px, 1px);
  }
  75% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(2px, -1px);
  }
}

@keyframes floatAnimation4 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, -2px);
  }
  50% {
    transform: translate(2px, 2px);
  }
  75% {
    transform: translate(-2px, 2px);
  }
  100% {
    transform: translate(2px, -2px);
  }
}

@keyframes floatAnimation5 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -2px);
  }
  50% {
    transform: translate(2px, 1px);
  }
  75% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(2px, -2px);
  }
}

@keyframes floatAnimation6 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -2px);
  }
  50% {
    transform: translate(1px, 2px);
  }
  75% {
    transform: translate(-2px, 2px);
  }
  100% {
    transform: translate(2px, -1px);
  }
}

@keyframes floatAnimation7 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -2px);
  }
  50% {
    transform: translate(1px, 1px);
  }
  75% {
    transform: translate(-1px, 2px);
  }
  100% {
    transform: translate(1px, -2px);
  }
}

@keyframes floatAnimation8 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, -2px);
  }
  50% {
    transform: translate(2px, 2px);
  }
  75% {
    transform: translate(-1px, 1px);
  }
  100% {
    transform: translate(2px, -2px);
  }
}


/*EXISTING*/

#body-content #hm-left{

	width:494px;
	float:left;
	margin-bottom:30px;
	/* height: 492px; */
}


#body-content #hm-right{

	width:466px;
	float:right;
	/* height:492px; */
	overflow:hidden;
	margin-bottom:0px;

}


/*#hm-left .white-shadow{
	background:url('/images/white-back.png') no-repeat top left;
}*/

#hm-left #map-area{

	width:494px;
	overflow:hidden;

}

#map-area #state-site-txt{

	background:url('/images/hm-state-sites.png') no-repeat top left;
	position:absolute;
	width:170px;
	min-height:198px;
	z-index:5;

}

#map-area #state-site-txt p{

	margin:60px 12px 0 18px;

}

#map-area #current-state{
	position:absolute;
	float:left;
}

#map-area #states{
	background:url('/images/hm-state-map.png') no-repeat top left;
	width:494px;
	height:414px;

}

#map-area #states .state-ut{

	background:url('/images/hm-state-map-ut.png') no-repeat top left;
	width:112px;
	height:101px;
	margin:148px 0 0 227px;
	opacity: 0.5;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	cursor: pointer;
}

#map-area #states .state-wa{

	background:url('/images/hm-state-map-wa.png') no-repeat top left;
	width:113px;
	height:56px;
	margin:20px 0 0 141px;
	cursor: pointer;

}

#map-area #states .state-or{

	background:url('/images/hm-state-map-or.png') no-repeat top left;
	width:148px;
	height:89px;
	margin:55px 0 0 97px;
	cursor: pointer;

}

#map-area #states .state-mt{

	background:url('/images/hm-state-map-mt.png') no-repeat top left;
	width:172px;
	height:75px;
	margin:35px 0 0 267px;
	cursor: pointer;

}

#map-area #states .state-id{

	background:url('/images/hm-state-map-id.png') no-repeat top left;
	width:111px;
	height:123px;
	margin:32px 0 0 209px;
	cursor: pointer;

}

#map-area #states .state-nv{

	background:url('/images/hm-state-map-nv.png') no-repeat top left;
	width:121px;
	height:140px;
	margin:136px 0 0 137px;
	cursor: pointer;

}

#map-area #states .state-nm{

	background:url('/images/hm-state-map-nm.png') no-repeat top left;
	width:140px;
	height:113px;
	margin:248px 0 0 297px;
	cursor: pointer;

}

#map-area #states .state-hi{

	background:url('/images/hm-state-map-hi.png') no-repeat top left;
	width:157px;
	height:106px;
	margin:290px 0 0 6px;
	cursor: pointer;

}

#state-ads-wrapper, #wpma-ads-wrapper{
	width:494px;
	text-align:center;
	margin:0 auto;
}

#wpma-ads-wrapper{
	width:477px;
	text-align:left;
}

#state-ads, #wpma-ads{
	width:466px;
	border:1px solid #005941;
	height:74px;
	margin:1px auto 0 auto;
	padding:0;
}

#wpma-ads{
	margin:0;
}

#state-ads ul, #wpma-ads ul{
	height:72px;
	width:464px;
}

#state-ads ul li, #wpma-ads ul li{
	position:absolute;
}


#hm-right-wrapper{
	width:477px;
	overflow:hidden;
	margin-top:9px;
}

#cal-of-events-wrapper{
	width:200px;
	border:1px solid #005941;
	float:left;
}

#cal-of-events-header{
	background:url(/images/hm-cal-of-events-header.png) no-repeat top left;
	width:198px;
	height:33px;
}

#cal-of-events{
	width:198px;
	height:371px;
	overflow-y: auto;
	padding:10px;
}

#cal-of-events h5 a{
	font-size:14px;
	font-weight:bold;
	color:#215300;
}

#cal-of-events p{
	font-size:12px;
	line-height:15px;
	color:#7f7f7f;
	border-bottom:1px solid #215300;
	margin-bottom:10px;
	padding-bottom:10px;
}

#cal-of-events p span{
	color:#215300;
}

#nc-wrapper{
	border:1px solid #005941;
	width:257px;
	height:406px;
	float:left;
	margin-left:9px;
}



#hm-right #hm-welcome{

	width:408px;
	height:275px;
	border:1px solid #FEFEFE;
	margin:0 0 10px 0;

}

#hm-welcome h2{
	background:url('/images/hm-welcome-txt.png') no-repeat top left;
	width:254px;
	height:22px;
	margin:24px 0 0 22px;
}

#hm-welcome h2 span{
	display:none;
}

#hm-welcome p{
	margin:10px 35px 0 22px;
}

#hm-welcome #welcome-ad{

	width:408px;
	height:229px;
	float:left;

}

#hm-welcome .ad1{
	background:url('/images/welcome-ad/welcome-ad1.png') no-repeat top left;
}

#hm-welcome .ad2{
	background:url('/images/welcome-ad/welcome-ad2.png') no-repeat top left;
}

#hm-right #current-events{

	border:1px solid #FEFEFE;
	float:left;
	height:203px;
	width:200px;
	display:block;
	background:url('/images/hm-current-event-back.gif') repeat-x 0 31px;
	margin:0;


}

#current-events #events{

	height:174px;
	overflow:hidden;

}


#events h5{

	font-size:14px;
	color:#365e11;
	margin:7px 0 0 10px;

}

#events h5 a{

	color:#365e11;
	text-decoration:underline;

}

#events p{

	margin:0 0 0 10px;
	padding:0 0 4px 0;
	width:170px;
	font-size:11px;
	line-height:12px;
	border-bottom-style:dotted;
	border-bottom-width:1px;
	border-bottom-color:#7a8e68;

}

#events p span{
	color:#365e11;
	font-size:10px;
}

#hm-right #conv{

	border:1px solid #FEFEFE;
	float:right;
	width:198px;
	height:203px;
	padding:0;
	margin:0;

}

/*#body-content #hm-footer{

	clear:both;

}*/

#body-content .hm-bottom{

	/*height:65px;*/
	/*background-color:#FFF;*/
	float:left;
	width:235px;
	margin:10px 10px 0 0;
	padding:0px;
	font:11px/12px Arial, Verdana;
	color:#5d7e3e;
}

.hm-bottom .hm-bottom-content{

	height:55px;
	padding:10px 1px 0 13px;

}

.hm-bottom .hm-bottom-content span{

	font-weight:bold;

}

.hm-bottom .hm-bottom-content span.contact{

	width:50px;
	display:block;
	float:left;

}

#body-content #hm-next-conv, #body-content #oil-price{

	float:left;
	display:block;
	width:198px;
	border:1px solid #FFF;
	margin:10px 0 0 0;

}

#body-content #oil-price{

	height:65px;
	border:0px;
	background:url('/images/oil-graph-bg.png') no-repeat top left;
	color:#000;
	position:relative;

}


#body-content #oil-price #time{

	font-size:8px;
	font-weight:bold;
	position:absolute;
	right:10px;
	top:7px;

}

#body-content #oil-price #price{

	font-size:18px;
	position:absolute;
	left:28px;
	top:36px;
	color:#01296b;

}

#body-content #oil-price #oil-arrow{

	position:absolute;
	left:108px;
	top:39px;
	display:block;
	width:11px;
	height:13px;

}

#oil-price #oil-arrow.neg{
	background:url('/images/oil-graph-arrow-neg.png') no-repeat top left;
}
#oil-price #oil-arrow.pos{
	background:url('/images/oil-graph-arrow-pos.png') no-repeat top left;
}

#oil-price #change{

	font-size:18px;
	position:absolute;
	left:125px;
	top:36px;

}

#oil-price #change.neg{
	color:#ff0000;
}
#oil-price #change.pos{
	color:#318201;
}