@charset "utf-8";
/* FOnts

font-family: 'Nunito Sans', sans-serif;
font-family: 'Roboto', sans-serif;
*/

:root {
    --supBlue: #00A0DF; /* rgba(0, 160, 223, 1) */
    --drkNavy: #002E6C;  /* rgba(0, 46, 108, 1)  */
    --splxRed: #EB0028;  /* rgba(235, 0, 40, 1)  */
    --splxRed2: #F6323E;
    --teal: #003D51; /* rgba(0, 61, 81, 1)  */
	
	--bottomNav: #00214d;
	--bottomNav2: #004db3;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}


.googleMap{
	width: 580px;
	height: 435px;
}

.holidayTable{
	 width: 100%;
	font-size: 20px;
	padding-bottom:10px;
}

.holidayTable tr{
	border: solid rgba(0,0,0,0.60) 1px; 
	font-color: rgba(0,0,0,0.65);
}

.holidayTable tr:nth-child(even){
	background-color: rgba(0,0,0,0.09);
}

.holidayTable th{
	color: rgba(0,0,0,0.75);
	text-align: center;
	background-color: var(--supBlue);
}

.holidayTable td{
	color: rgba(0,0,0,0.60);
	font-weight: bold;
}


.navbar {
	margin:auto;
	width:100%;
}

.splxNav{
	background: var(--drkNavy); 
	border-bottom: 6px ridge var(--drkNavy);
}

body{
	color:#7A7A7A;
	font-family: 'Roboto', sans-serif;
	background-color: white;
	font-size: 18px;;
}

.navLogo{
	max-width: 100%;
	min-width: 275px;
}

.socialIconLinks{
	opacity: 0.85;
}

.socialIconLinks:hover{
	opacity: 1;
}

.navLogoLink{
	max-width: 225px;
}


.blurbFour{
	font-family: 'Nunito Sans', sans-serif;
	
}

.articleTitle{
	color: var(--supBlue);
}



.textured{
	text-shadow: 1px 1px 4px rgba(0,0,0,1);
	/*background-image: url("../images/products/gplay.png");*/
	/*background: rgb(199,196,185);
	background: -moz-linear-gradient(135deg, rgba(199,196,185,1) 0%, rgba(217,216,211,1) 24%, rgba(199,196,185,1) 33%, rgba(196,194,184,1) 44%, rgba(214,213,206,1) 55%, rgba(199,196,185,1) 65%, rgba(214,212,205,1) 84%, rgba(199,196,185,1) 95%);
	background: -webkit-linear-gradient(135deg, rgba(199,196,185,1) 0%, rgba(217,216,211,1) 24%, rgba(199,196,185,1) 33%, rgba(196,194,184,1) 44%, rgba(214,213,206,1) 55%, rgba(199,196,185,1) 65%, rgba(214,212,205,1) 84%, rgba(199,196,185,1) 95%);
	background: linear-gradient(135deg, rgba(199,196,185,1) 0%, rgba(217,216,211,1) 24%, rgba(199,196,185,1) 33%, rgba(196,194,184,1) 44%, rgba(214,213,206,1) 55%, rgba(199,196,185,1) 65%, rgba(214,212,205,1) 84%, rgba(199,196,185,1) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c7c4b9",endColorstr="#c7c4b9",GradientType=1);*/
	background: rgb(199,196,185);
background: -moz-linear-gradient(135deg, rgba(199,196,185,1) 0%, rgba(207,205,200,1) 7%, rgba(224,223,217,1) 14%, rgba(218,215,206,1) 22%, rgba(195,192,180,1) 29%, rgba(185,181,168,1) 35%, rgba(170,168,162,1) 41%, rgba(199,196,185,1) 47%, rgba(207,204,196,1) 53%, rgba(219,218,211,1) 62%, rgba(214,212,202,1) 69%, rgba(193,191,185,1) 76%, rgba(182,180,169,1) 83%, rgba(164,163,158,1) 88%, rgba(199,196,185,1) 95%);
background: -webkit-linear-gradient(135deg, rgba(199,196,185,1) 0%, rgba(207,205,200,1) 7%, rgba(224,223,217,1) 14%, rgba(218,215,206,1) 22%, rgba(195,192,180,1) 29%, rgba(185,181,168,1) 35%, rgba(170,168,162,1) 41%, rgba(199,196,185,1) 47%, rgba(207,204,196,1) 53%, rgba(219,218,211,1) 62%, rgba(214,212,202,1) 69%, rgba(193,191,185,1) 76%, rgba(182,180,169,1) 83%, rgba(164,163,158,1) 88%, rgba(199,196,185,1) 95%);
background: linear-gradient(135deg, rgba(199,196,185,1) 0%, rgba(207,205,200,1) 7%, rgba(224,223,217,1) 14%, rgba(218,215,206,1) 22%, rgba(195,192,180,1) 29%, rgba(185,181,168,1) 35%, rgba(170,168,162,1) 41%, rgba(199,196,185,1) 47%, rgba(207,204,196,1) 53%, rgba(219,218,211,1) 62%, rgba(214,212,202,1) 69%, rgba(193,191,185,1) 76%, rgba(182,180,169,1) 83%, rgba(164,163,158,1) 88%, rgba(199,196,185,1) 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c7c4b9",endColorstr="#c7c4b9",GradientType=1);
	
	padding-top: 18px;
	padding-bottom: 4px;
}

.textured p{
	font-size: 1.1rem;
}

.styleBar{
	text-shadow: 1px 1px 4px rgba(0,0,0,1);
	background: var(--splxRed);
	width: 100%;
	margin: auto auto;
	padding: 20px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.styleBar p{
	font-size: 1.1rem;
}

.styleBar h3{
	font-size: 2.25rem;
	letter-spacing: 1px;
}

.redBar{
	padding: 20px;
	background-color: rgba(235, 0, 40, 1);
}

.blurbFourMarkets{
	font-family: 'Nunito Sans', sans-serif;
	color: white;
}



.paraDiv{
	height: 52vh;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
	flex-grow: 2;
}

.paraLogo{
	max-height: 30%;
	align-self: center;
}

.paraHeader{
	
	color: var(--drkNavy);
	align-self: center;
	text-shadow: 1px 1px 3px white;
}

.paraPara{
	font-size: 1.4em;
	font-weight: bold;
	color: var(--drkNavy);
	align-self: center;
	text-shadow: 1px 1px 3px white;
	margin: 4px;
}

.productBlurb h1{
	font-weight:600;
}

.blockButtons{
	
	border: 0;
	background-color: rgba(0,0,0,0);
	color:rgba(255,255,255,1);
	text-shadow: 3px 3px 5px black;
	border-bottom: 4px solid rgba(255,255,255,0.5);
	width: 160px;

}

.blockButtonTitleLoc{
	top: 20%;
	left:50%;
	transform: translate(-50%,-50%);
}

.blockButtons:hover{
	background-color: rgba(255,255,255,0.15);
	border-bottom: 4px solid rgba(255,255,255,0.1);
}

.footerButton{
	border: 2px solid rgba(255,255,255,0.8);
	border-radius: 5px;
	padding: 6px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: rgba(0,0,0,0);
	color:rgba(255,255,255,1);
	text-shadow: 3px 3px 5px black;
	width: auto;
	margin: 1px;
	
}

.footerButton:hover{
	background-color: rgba(255,255,255,0.15);
	scale: 1.02;
}


.footerCustom{
	background-color: var(--drkNavy);
	width: 100%;
}

.copyRight{
	color: rgba(255,255,255,0.3);
	font-size: 0.85rem;
	font-weight: bold;
	
}

a.nav-link-custom:link, a.nav-link-custom:visited {
	color: white;
	text-decoration: none;
	display: block;
	padding: 0.5rem;
}

a.nav-link-custom:hover, a.nav-link-custom:active {
	color: rgba(255,252,252,0.70);
	text-decoration: none;
	display: block;
	padding: 0.5rem;
}

a.apply-link:link, a.apply-link:visited {
	color: var(--supBlue);
	text-decoration: none;
	display: block;
	font-size: 2.5vh;
	font-weight: bolder;
}

a.apply-link:hover, a.apply-link:active {
	color: var(--supBlue);
	text-decoration:underline;
	display: block;
	font-size: 2.5vh;
	font-weight: bolder;
	
}

.address{
	font-size:0.7rem;
	color: white;
}

.socialIcons{
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	transition: transform 0.5s;
	}

.socialIcons:hover{
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	 transform: scale(0.90);
	opacity: 0.8;
	}


a.resourceLinks:hover,
a.resourceLinks:visited,
a.resourceLinks:link{
	color: var(--supBlue);
	font-weight: bold;
	text-decoration: none;
}

/* css for the scroll to top button */
#scrollBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: auto; /* Remove outline */
  background-color: rgba(0,0,0,0.25); /* Set a background color */
  color: rgba(255,255,255,0.6); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding-left: 20px; /* Some padding */
  padding-right: 20px; /* Some padding */
  padding-bottom: 5px; /* Some padding */
  border-radius: 15px; /* Rounded corners */
  font-size: 32px; /* Increase font size */
	text-align:center;
  -webkit-transform: rotate(90deg);
}

#scrollBtn:hover {
  background-color: rgba(0,0,0,0.25); /* Add a dark-grey background on hover */
  color: rgba(0,0,0,0.5); /* Text color */
}

/* css for the scroll to top button */


.searchBtn{
	background-color: rgba(0,0,0,0);
	color: white;
	border-color: rgba(0,0,0,0);
}

.searchBtn:hover{
	background-color:  rgba(0,0,0,0);
	color:rgba(255,255,255,0.5);
	border-color: rgba(0,0,0,0);
}

input[type=search].formSearch {
    background-color: rgba(0,0,0,0);
    color: white;
	border-color: white;
	border-radius: 20px;
	
}

::placeholder{
	color: rgba(255,255,255,.6);
}


input[type=search].formSearch:hover {
    background-color: rgba(0,0,0,0);

}

.tabOne{
	display: flex;
}

.tabTwo{
	display: none;
}

.tabThree{
	display: none;
}

.tabFour{
	display: none;
}

.infoBrowse{
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;
	background-color: var(--supBlue);
	border: 0;
	border-radius: 5px;
	margin: 3px;
	color: rgba(255,255,255,1);
	font-size: 14px;
}

.infoBrowse:hover{
	background-color: rgba(0, 160, 223,0.8); 
	scale: 1.01;
}


/******************CSS for Browsing Blocks*******************************/

#ib_1{
 display: block;
	opacity: 1;
	transition-duration: .3s;
}

#ib_2{	
 display: none;
	opacity: 0;
	transition-duration: .3s;
}

#ib_3{
 display: none;	
	opacity: 0;
	transition-duration: .3s;

}

#ib_4{
 display: none;	
	opacity: 0;
	transition-duration: .3s;
}

#ib_5{
 display: none;	
	opacity: 0;
	transition-duration: .3s;

}

#ib_6{
 display: none;	
	opacity: 0;
	transition-duration: .3s;
}

#ib_7{
 display: none;	
	opacity: 0;
	transition-duration: .3s;
}

.batt_charge_table{
	width: 100%;
}

.batt_charge_table th{
	font-size: 1.3em;
	padding: 15px;
	text-align: left;
	
}

.batt_charge_table td{
	font-size: 1em;
	padding: 5px;
	padding-left: 10px;
	text-align: left;
}

.batt_charge_table tr:nth-child(odd){
	background-color:#dcebf7;
}

/*************************************************/
/***************************************************/



/*******************Start CSS For media queries**********************************/
/* Full Size */


.dropdown-menu{
	background-color: rgba(0, 46, 108, 1)!important;
	border: 1px solid rgba(255,255,255,0.2);
}

.dropdown-item{
	color: rgba(255,255,255,0.65)!important;
	padding-bottom: 10px!important;
}

.dropdown-item.active{
	background-color: rgba(255,255,255,0.15)!important;
	color: rgba(255,255,255,1)!important;
}

.dropdown-item:hover{
	color: rgba(255,255,255,0.95)!important;
	background-color: rgba(255,255,255,0.05)!important;
	padding-bottom: 10px!important;
}

.chargingTableDiv{
	width: 70%;
	display: block;
	margin:auto;
}

.chargingInfoDiv{
	width: 70%;
	display: inline-block;
	margin:auto;	
	
}

.carouselIndicator{
	display: none;
}

.carouselImageSizes{
	width: 80%;
	
}

.resourceHeader{
	color: white;
}

.ulResoruces{
	list-style-type: none;
	color: black;
	font-size: 1.25em; 
	padding-left: 50px;
	
	margin:auto;
}


.resourceListDiv{
	margin:auto;
	width: 60%;
}

.rhBlue{
	background-color: var(--drkNavy);
}

.rhTeal {
	background-color: var(--teal);
}

.fullBannerImage{
	width:80%;
}

.battuBadge{
	max-width: 75%;
	min-width: 210px;
	padding-top: 2px;
}

.buGroup{
	
	float: right;
	height: 400px;
	width: auto;
}

.buRandy{
	
	padding-left: 50px;
	height: 400px;
	width: auto;
}

.information_menu{
	padding-left: 80px;
	padding-right: 20px;	
}

.information_videoBlock{
	padding-left: 20px;
	padding-right: 80px;
	padding-top: 30px;
}


.iframeHolder{
	width:560px; 
	height:315px;
}

.iframeContainer{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */	
}



.iframeResponsive{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;	
}

.parallax {
	
	background-image:url("../images/bannerImgs/Superior_plant_aerial_view_reduce_cropped_wide.jpg");
	min-height: 600px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.article{
	padding-left:10px;	
	padding-right:100px;
	padding-top: 15px;
		
	}

.article2x3{
	padding-left:10px;	
	padding-right:100px;
	padding-top: 15px;
		
	}


.battuArticle{
	padding-top: 15px;
	padding-right:75px;
}

.overlayText{
	text-align: justify; 
	font-size: 1.3vw;
}

/* Small Screens */

@media (min-width:469){
	.batteryPhoto{
		max-width: 100%;
	}
	
	.footerLogo{
		max-width: 100%;
	}
	
	
	.buGroup{
			float:none;
			display:block;
			margin:auto;
			height:300px;
			width: auto;
	}

		.buRandy{
			float:none;
			display:none;
		
		}
	
}

/* medium screens */
@media (min-width: 268px) and (max-width: 1250px){
	
	.overlayText{
	text-align: justify; 
	font-size: 20px;
	}
	
	.carouselIndicator{
		display: none;
		}
	
	.carouselImageSizes{
		width: 100%;
		}
	
	.article{
		padding-left:20px;
		padding-right:20px;
	}
	
	.article2x3{
		padding-left:20px;
		padding-right:20px;
	}
	
	.textured{	
			padding-top: 10px;
			padding-bottom: 1px;
		}
	
	.screen_sm_md_top_border{
		border-top: rgba(0,0,0,0.2) solid 3px;
	}
	

	
}

@media (min-width: 800px) and (max-width: 1250px){
	.ulResoruces{
	padding-left: 25px;

	}
		.buGroup{
	
		float: right;
		height: 250px;
		width: auto;
		}

		.buRandy{

			padding-left: 50px;
			height: 250px;
			width: auto;
		}
	
	.resourceListDiv{
		margin:auto;
		width: 70%;
		font-size: 0.7em;
	}

}

/* medium-big screens */
@media (min-width: 1250px) and (max-width: 1550px){
	
	.buGroup{
	
		float: right;
		height: 300px;
		width: auto;
	}

	.buRandy{

		padding-left: 50px;
		height: 300px;
		width: auto;
	}

}

/* Large Screens */

@media (min-width:1200){
	.batteryPhoto{
		max-width: 570px;
	}
	
	.footerLogo{
		max-width: 55%;
	}
	
}


/* Small to Large */

@media (min-width: 268px) and (max-width: 991px) {
		.chargingTableDiv{
			width: 100%;

		}
	
		

		.chargingInfoDiv{
			width: 100%;

		}
		.buGroup{
			display: none;
		}

		.buRandy{
			float:none;
			display:block;
			margin:auto;
			padding-left: 0px;
			height: 300px;
			width: auto;

		}
	
	.resourceListDiv{
		margin:auto;
		width: 80%;
		font-size: 0.7em;
	}
	
	.nav-link {
		font-size: 1.75em!important;
		text-align: center;
	}
	
	.dropdown-item {
		font-size: 1.75em!important;
		text-align: center;
	}
	
	.dropdown-menu{
		background-color: rgba(255, 255, 255, .15)!important;
		border: 1px solid rgba(255,255,255,0.2);
	}

	
}


/* Medium to Large */
@media (min-width: 768px) and (max-width: 991px) {
   
	.blockButtons{
		border: 0;
		background-color: rgba(0,0,0,0);
		color:rgba(255,255,255,1);
		text-shadow: 3px 3px 5px black;
		border-bottom: 4px solid rgba(255,255,255,0.5);
		width: 100px;
		font-size: 14px;

	}
	
	.ulResoruces{
	font-size: 1.0em; 
	padding-left:15px;
	}
	
	.blockButtonTitleLoc{
	top: 40%;
	left:50%;
	transform: translate(-50%,-50%);
	}
	
		.buGroup{
			float:none;
			display:block;
			margin:auto;
			height:300px;
			width: auto;
		}

		.buRandy{
			float:none;
			display:none;
		
		}
	
}

/* small to medium */
@media (min-width: 200px) and (max-width: 768px) {
   
	.battuArticle{
		padding-right: 20px;
		padding-left: 20px;
	}
	
	
	
	.blockButtons{
		border: 0;
		background-color: rgba(0,0,0,0);
		color:rgba(255,255,255,1);
		text-shadow: 3px 3px 5px black;
		border-bottom: 4px solid rgba(255,255,255,0.5);
		width: 200px;
		

	}
	
	.blockButtonTitleLoc{
		top: 40%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	
	.fullBannerImage{
		width:100%;
		height: auto;
	}
	
	.battuBadge{
	max-width: 75%;
	min-width: 230px;
	padding-top: 10px;
	}
	
	.parallax {
	background-image:url("../images/bannerImgs/Superior_plant_aerial_view_reduce_cropped.jpg");
	min-height: 300px;
	}
	

	
}
/* Less than 1500 more than 1070 */
@media (min-width: 1070px) and (max-width: 1500px){
	
	.information_menu{
		padding-left: 10px;
		padding-right: 10px;	
	}

	.information_videoBlock{
		padding-left: 10px;
		padding-right: 10px;	
	}

	.iframeHolder{
		width:500px; 
		height:281px;
	}

}


@media (min-width: 992px) and (max-width: 1070px){
	
	.information_menu{
		padding-left: 10px;
		padding-right: 10px;	
	}

	.information_videoBlock{
		padding-left: 10px;
		padding-right: 10px;	
	}

	.iframeHolder{
		width:350px; 
		height:200px;
	}

}

@media (min-width: 694px) and (max-width: 991px){
	
	.information_menu{
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 30px;
	}

	.information_videoBlock{
		padding-left: 10px;
		padding-right: 10px;	
	}

}

@media (min-width: 550px) and (max-width: 694px){
	
	.information_menu{
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 30px;
	}

	.information_videoBlock{
		padding-left: 10px;
		padding-right: 10px;	
	}

	.iframeHolder{
		width:500px; 
		height:281px;
	}
	
	.googleMap{
		width: 450px;
		height: 425px;
	}

}

@media (min-width: 250px) and (max-width: 549px){
	
	.information_menu{
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 30px;
	}

	.information_videoBlock{
		padding-left: 10px;
		padding-right: 10px;	
	}
	
	.ulResoruces{
	font-size: 1em;
		padding-left:5px;

	}

	.iframeHolder{
		width:250px; 
		height:140px;
	}
	
	.googleMap{
		width: 320px;
		height: 425px;
	}

}


@media (min-width: 1200px) and (max-width: 1399px){
	
	.article{
		padding-left:20px;
		padding-right:20px;
	}
}


@media (min-width: 1400px) and (max-width: 4000px){
	
	.article{
		padding-left: 150px;
		padding-right: 150px;
	}
	
	.article2x3{
		padding-left: 50px;
		padding-right: 50px;
	}

}

@media (min-width: 1400px) and (max-width: 4000px){
	.ulResoruces{
		list-style-type: none;
		color: black;
		font-size: 1.5em; 
		padding-left: 150px;

		margin:auto;
	}


}