@charset "utf-8";

body {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 100%;
	color: #1E1F4F;
}

body a:link {
	color: #1E1F4F;
	text-decoration: none;
}

body a:visited {
	color: #1E1F4F;
	text-decoration: none;
}

body a:hover {
	color: lightblue;
	text-decoration: none;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	color: #1E1F4F;
  text-align: justify;
}

h1 {
	font-style:italic;
	color:#0A88D1;
	font-weight: 700;
	text-transform: uppercase;
  text-align: center;
}

h2 {
	font-size: 3em;
	font-style:italic;
	color:#0A88D1;
	font-weight: 700;
	text-transform: uppercase;
  text-align: center;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 3em;
	font-style:italic;
	color:#0A88D1;
	font-weight: 700;
	text-transform: uppercase;
}

.div-body{
	margin:auto;
	align-content: center;
	text-align: justify;
	width: 1000px;
}

.div-body a{
	align-items: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

/*NavBar*/
.navbar a {
  color: #1E1F4F;
  font-family: 'Merriweather Sans', 'sans-serif';
  font-weight: 700;
  text-align: center;
 }

 .navbar p {
  transform: translateY(10px);
 }

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #1E1F4F;
	
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #1E1F4F;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/*Footer*/
@media (max-width: 1000px) {
  #fContainer {
    background-color: red;
  }
}

.homeImage img{
	transition: transform 330ms ease-in-out;
}

.homeImage img:hover{
	transform: translateX(5px);
}

.homeImage .column {
	float: left;
	width: 50%;
	padding-top: 24px;
}

.homeImage .row::after {
  content: "";
  clear: both;
  display: table;
}

#overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	border-top: 100px solid #555;
	border-right: 100px solid transparent;
	height: 0;
	width: 550px;
}

/*eBike*/
.ebike-container {
	display: flex;
	justify-content: center;
	background-color: white;
}

.ebike-container div {
  width: 1250px;
  margin: 10px;
  text-align: center;
}

.ebike-container td {
    padding: 15px;
}

/*Footer*/
.foot-container {
	display: flex;
	background-color: white;
	border: 2px;
	height: 400px;
	overflow: hidden;
	flex-direction: row;
	justify-content: center;
}

.foot-container > div {
	height: 300px;
	width: 310px;
	background-color: white;
	margin: 5px;
	padding: 15px;
	align-items: center;
}

footer a:link {
	color: #1E1F4F;
	text-decoration: none;
}

footer a:visited {
	color: #1E1F4F;
	text-decoration: none;
}

footer a:hover {
	color: lightblue;
	text-decoration: none;
}

#credit {
	text-align: center;
}

.endrectangle {
  background-color: darkred;
  padding: 20px;
  width: 100%;
}

.aboutbox {
	width: 500px;
	text-align: left;
	vertical-align: top;
	padding: 15px;
}

.aboutflex{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 1140px) {
  .aboutflex {
    flex-direction: column;
  }
  .aboutbox {
  	width: 90%;
    margin: 5%;
  }
}

.aboutbox h4{
	text-align: center;
}

.aboutbox p{
	text-align: left;
}

.aboutbox img {
	width: 300px;
	display:block;
	margin-left:auto;
	margin-right: auto;
	
}

/* /* Contact and Location

.contactFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: White;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.contactFlex > div {
  background-color: #f1f1f1;
  width: 30%;
  height: 550px;
  margin: 1.66%;
}

@media (max-width: 1250px) {
  .contactFlex {
    flex-direction: column;
  }
  .contactFlex > div{
  	width: 90%;
    margin: 5%;
  }
}

#map {
  width: 1000px;
}

#hours {
  width: 500px;
  text-align: left; 
  margin-left: 50px;
  background-color: white;
}

@media (max-width: 1250px) {
  #map {
    width: 100%;
  }
  
  #hours {
    width: 100%;
  }
} */

/*Rental Container Stuff*/

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: White;
  width: 100%;
  justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 30%;
  height: 550px;
  margin: 1.66%;
}

@media (max-width: 1140px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container > div{
  	width: 90%;
    margin: 5%;
  }
}

/* .flex-container2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: White;
  width: 100%;
  justify-content: center;
}

.flex-container2 > div {
  background-color: White;
  width: 50%;
  height: 600px;
  margin: 10px;
}

@media (max-width: 1250px) {
  .flex-container2 {
    flex-direction: column;
  }
  .flex-container2 > div{
  	width: 90%;
    margin: 5%;
    height: 50%;
  }
} */

.flex-container-rental {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: White;
  width: 100%;
  justify-content: center;
}

.flex-container-rental > div {
  background-color: #f1f1f1;
  width: 50%;
  height: 800px;
  margin: 0%;
}



@media (max-width: 1140px) {
  .flex-container-rental {
    flex-direction: column;
  }
  .flex-container-rental > div{
  	width: 90%;
    margin: 5%;
  }
}

.rentalmap {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	color: #1E1F4F;
	padding-left: 10px;
}

.rentalmap a:link {
	color: #1E1F4F;
	text-decoration: none;
}

.rentalmap a:visited {
	color: #1E1F4F;
	text-decoration: none;
}

.rentalmap a:hover {
	color: lightblue;
	text-decoration: none;
}