/*Style for index.html and other top bars and nav bars and logos*/
#navbar {
	width: 100%;
	text-align: center;
}

li {
	display: inline-block;
	float: none;
}

body {
	background-color: #F8F8F0}
	
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20;
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 25px;
  text-decoration: none;
}


li a:hover {
  background-color: #D8CDB1;
}

#logo {
	margin-bottom: 35px;
	padding-top: 16px;
	transform: scale(2, 2)}

#navbar img {
	width: 100px;
	float: none;
	margin-top: 10px
}	

.text {
    color: black;
}

#topbar {
	width: 100%;
	height: 25px;
	background-color: #1C609C;
	color: #F8F8F0;
	text-align: center;
	margin: -8;
	padding: 10;
	display: inline-block;
}

.pic {
	float: left;
	align: center;
    box-sizing: border-box;
}

#quote {
	font-family: Arial,Helvetica, sans-serif;
	font-size: 4vw;
	display: flex;
	text-align: center;
	padding: 15px;
	float: left;
	box-sizing: border-box;
	flex-direction: column;
}

.qualification {
    font-size: 1.8vw;
    color: grey;
}
.name {
    font-size: 2vw;
    color: grey;
}

@media only screen and (max-width: 620px) {
	/* For mobile phones: */
	.pic {
        width: 90%;
	    margin: 15px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}
	.float-container {
		padding: 0 !important;
	}
	#aboutus, #aboutserenade {
		width: 95% !important;
	}
	.qualification {
        font-size: 3.8vw;
        color: grey;
    }
    .name {
        font-size: 4vw;
        color: grey;
    }
    #quote {
        width: 100%;
        font-size: 5vw;
    }
    #image-container {
        padding-top: 15px !important;
    }
    .me {
        width: 90%;
	    margin: 15px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

}

@media only screen and (min-width: 620px) {
	#quote {
		padding-top: 30px;
		width: 50%;
	}
	.pic {
		width: 50%;
		padding-left: 3vw
	}
	#image-container {
		padding-left: 5vw;
		padding-right: 10vw;
		display: flex;
	}
}

#image-container {
	padding-top: 30px
}

#ad {color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

fieldset {border: 0;
}


#disclaimer {text-align: center;
}

/*style for thanks.html*/

#thanks {
font-family: verdana, sans-serif;
text-align: center;
margin: 30;}

/*Style for contact.html*/


.form {
font-family: verdana, sans-serif;
text-align: center;
}

form {font-family: verdana, sans-serif;
}

#question {
	width: 500;
	height: 100}

#contact {text-align: center;
font-family: verdana, sans-serif;
font-size: 14;
}

#contact input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#contact input[type=textarea], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#contact input[type=submit] {
  width: 100%;
  background-color: #1C609C;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#contact input[type=submit]:hover {
  background-color: #185285;
}

#sub {
	text-align: center;
	color: #A1A1A1;
	width: 100%}

#pick {color: #C7C7C7}

.other {color: black}

/*Style for about.html*/

#about {font-family: verdana, sans-serif;
text-align: center;}

#aboutus {
font-family: verdana, sans-serif;
width: 70%;
margin: auto;
text-align: center;
overflow:overlay}

#aboutserenade {
font-family: verdana, sans-serif;
width: 70%;
margin: auto;
text-align: center;
overflow:overlay}

hr.solid {border-top: 1px solid #E7E8E9;
    color: #E7E8E9;
}

p.about {font-family: gill sans, sans-serif;}

/*Style for products.html*/

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin-right: 30px;
  margin-left: 30px;
  margin-bottom: 30px;
  text-align: center;
  font-family: arial;
  float: left;
  padding: 30px;
}

.carda {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin-right: 30px;
  text-align: center;
  font-family: arial;
  float: left;
  padding: 30px;
}

.cardb {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
  float: left;
  padding: 30px;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.carda button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.cardb button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

.carda button:hover {
  opacity: 0.7;
}

.cardb button:hover {
  opacity: 0.7;
}
.float-container {
    padding: 20px;
}

#shortdivider 
{width: 35%}

/*Style for buy.html*/

.names{
	width: 49%;
	float: left;
	text-align: center;
}

.info {
	width: 49%;
	float: right;
	text-align: center;
}

#buy {text-align: center;}

#buy .info input[type=text], select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#buy .names input[type=text], select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#buy .last input[type=text], select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#buy input[type=submit] {
  width: 100%;
  background-color: #1C609C;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#buy input[type=submit]:hover {
background-color: #185285;}