/* HOMEPAGE CSS */
		* {
            box-sizing: border-box;
            font-family: "Ubuntu",system,sans-serif;
			scroll-behavior: smooth;

        }
        .content {
            overflow-y: scroll;

            scroll-snap-type: y mandatory;
            /* Reserve space for header and additional space so above page are visible a bit*/ 
          
            position: absolute;
          
            top:0;
            bottom:0;
            left: 0;
            right: 0;
  
            /* Enable Safari touch scrolling physics which is needed for scroll snap */
            -webkit-overflow-scrolling: touch; 

        }
        .hero-image {
            width: calc(100vw - (100vw - 100%));
            height: 100vh;
            object-fit: cover;
            position: absolute; /*firefox !IMPORTANT*/
        }
        .container {
          scroll-snap-align: start; /* snap align start */
          height: 100vh;
          width: 100%;
          margin: 0;
          padding: 0;
          overflow:hidden; /* set for img zoom class on first slide*/
          display: flex;
          display: block; /*firefox !IMPORTANT*/
          position: relative; /*ie !IMPORTANT*/
        }
 
 
nav {
  position: absolute;
  width: 100%;
  z-index: 1; /* set for img zoom class on first slide*/
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav ul li {
  float: left;
}

nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
}

nav ul li a:hover:not(.active) {
  color: #DCDCDC;
}

nav ul li a.active {
  color: white;
}
.innernav {
  margin: auto;
  width: 95%;
  padding-left: 10%;
}
.zoom {
  transition: transform .6s;
}

.zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
}
#logo-pic {
  width: 200px;
  height: 77px;
}
#logo-2 {
  padding-left: 5px;
  padding-top: 5px;
}
.banner-first, .banner-second, .banner-third, .banner-fourth, .banner-fifth {
  position: absolute;
  padding: 5px;
  margin-top: 25vh;
  margin-left: 15vw;
  height:auto;
  width:auto;
}
.banner-text-first {
  color:white;
  font-family: 'Merriweather', serif;
  font-size: 2em;
  margin-bottom: 10px;
}
.button {
  background-color: white;
  border: 2px solid white;  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 8px;
  cursor: pointer;
  border-radius: 16px;
  min-width: 250px;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Ubuntu', sans-serif;
}
.button-clear {
  border: 2px solid white;
  background-color: transparent;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 8px;
  cursor: pointer;
  border-radius: 16px;
  min-width: 250px;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Ubuntu', sans-serif;
}
.button:hover, .button-clear:hover {
  background-color: #f1f1f1;
  border: 2px solid #f1f1f1;
  color:black;
}
h3.byline {
  color: white;
  font-weight: 400;
  max-width: 800px;
  font-family: 'Merriweather', serif;
  margin-top: 0px;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.arrow {
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px; /*change with size of arrow to make sit on bottom */
  color: white;
/*   background-image: url(); */
/*   background-size: contain; */
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@media only screen and (max-width: 3000px) and (min-width: 1069px) {
  #logo {
    width: calc((100vw - (100vw - 100%)) * 0.17);
  }
  #first-space {
    width: calc((100vw - (100vw - 100%)) * 0.04);
  }
  #hoz-links {
    width: 50%;
  }
  #space {
    display:none;
  }
  #more-links {
    width: 25%;
  }
  #hamburger {
    width: calc((100vw - (100vw - 100%)) * 0.03);
  }
  .innernav {
    margin: auto;
    width: 95%;
    font-size: 14px;
  }
}
@media only screen and (max-width: 1068px) and (min-width: 636px) {
  #logo {
    width: calc((100vw - (100vw - 100%)) * 0.20);
  }
  #first-space {
    display: none;
  }
  #hoz-links {
    width: 72%;
  }
  #space {
    display: none;
  }
  #more-links {
    display: none;
  }
  #hamburger {
    width: calc((100vw - (100vw - 100%)) * 0.03);
  }
  li a {
    padding: 12px 12px;
    font-size: 12px;
  }
  li {
    padding-left: 15px;
  }
  .innernav {
    padding-left: 10px;
  }
}
@media only screen and (max-width: 635px) and (min-width: 100px) {
  #logo {
    width: calc((100vw - (100vw - 100%)) * 0.45);
  }
  #first-space {
    display: none;
  }
  #hoz-links {
    display: none;
  }
  #space {
    display: none;
  }
  #more-links {
    display: none;
  }
  #hamburger {
    width: calc((100vw - (100vw - 100%)) * 0.10);
  }
}
@media (max-width: 700px) {
  .banner-first, .banner-second, .banner-third, .banner-fourth, .banner-fifth {
      position: relative;
      padding: 5px;
      margin: 10vh 15vw;
      width:auto;
  }
  #mobile-first, .bounce {
	bottom: 40px;
  }
}
#hamburger {
	display: block;
	visibility: visible;
}
.innernav, #space, #more-links, #hamburger {
	visibility: visible;
}
div.arrow a {
	color: white;
}
section.description ul {
		list-style-type: circle;
		margin: 0;
		padding: 0 0.6em 2em 2em;
		overflow: visible;
}
section.description li {
	float: unset;
	line-height: 1.6em;
}
section.description ul.fa-ul {
	list-style-type: none;
}
div.banner-fifth #phone:after{
    content:'Call Us';
}
div.banner-fifth #phone:hover:after{
    content:'714-755-0888';
} 
div.banner-second #email:after{
    content:'E-mail Us your RFQ';
}
div.banner-second #email:hover:after{
	text-transform: lowercase;
    content:'contact@batteryspecialties.com';
} 
#hoz-links, #more-links, #hamburger {
	padding-top: 15px;
}
#hamburger {
	position: absolute;
	right: 3em;
}
#more-links {
	float:right;
}
li#more-links i.myBtn:hover {
	cursor: pointer;
}
footer li {
padding-top: 0;
color: black;
font-size: 12px;
margin: 0;
max-width: 75ch;
}
footer li a {
	cursor: pointer;
	border-bottom: 0;
	box-shadow: none;
	font-size: 1rem;
	display: block;
	padding: 5px 10px;
	text-decoration: none;
	color: black;
}
footer li a:visited {
	color: black;
}
div.footer {
height:fit-content;
}
footer {
	border-top: 1px solid lightgray
}