* {
	box-sizing: border-box;

}
body {
	font-family: Arial;
	padding: 10px;
	background: #f1f1f1;
}

/*Header*/
.header {
	padding: 0px;
	text-align: right;
	/*background: url("logo.gif");*/
	background-color: pink;
	background-repeat: none;
	height: 120px;
}

.header h1 {
	font-size: 50px;
}

/*top nav bar*/
.topnav {
	overflow: hidden;
	background-color: black;
	top: 0px;
	position: sticky;

}

.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 10px 14px;
	text-decoration: none;
}

.topnav a:hover {
	background-color: gray;
	color: white;
}

.footernav {
	overflow: hidden;
	text-align: center;
	padding: 20px;
	margin: 30px;

}

.footernav a {
	float: center;
	display: inline-block;
	color: gray;
	padding: 0px 14px;
	text-decoration: none;
	border-left: 2px solid gray;
	text-align: center;
}

.footernav a:hover {
	color: black;
}

/*dropdown menu*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: black;
	
}

li {
	float: left;
}

li a, .dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 10px 14px;
	text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
	background-color: pink;
	color: black;

}

li.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: pink;
}

.dropdown:hover .dropdown-content {
	display: block;
}

/*Create two unequal colums that floates next to each other*/
.leftcolum {
	float: left;
	width: 75%;
	background-color: #f1f1f1;
	padding: 10px;
}

.rightcolum {
	float: right;
	width: 25%;
	background-color: #f1f1f1;
	padding: 10px;
}

img.header {
	float: left;
	padding: 0px;
	margin: 0px;
	display: block;
}

.services caption {
	font-size: 28px;
	padding: 5px 10px 0px 10px;

}

.services table {
	padding: 15px 10px 0px 10px;
}

.services th, td {
	padding: 8px;
}

.services img, tr:nth-child(even){
	background-color: pink;
}
.services tr:nth-child(odd){
	background-color: white;
}
.services th{
	background-color: gray;
	color: white;
}

img {
	background-color: pink;
	padding: 5px;
	border-radius: 10px;
}

.shape-sample img{
	width: 120px;
	height: auto;
	padding: 5px;
}

.side-img img {
	width: 250px;
	height: auto;
	padding: 5px;
}
#shape-sample img{
	width: 115px;
}

.card {
	background-color: white;
	padding: 10px;
	margin-top: 10px;
	border-radius: 5px;
}

.card td {
	vertical-align: top;
}

.address-card {
	background-color: pink;
	padding: 5px 20px;
	display: inline-block;
	margin: 5x 20px;
	font-size: 12px;
	border-radius: 5px;
	vertical-align: bottom;
}

.sticky-card {
	background-color: white;
	padding: 10px;
	margin-top: 10px;
	border-radius: 5px;
	top: 0px;
	position: sticky;
}

/*clear floats after the colums*/
.row:after {
	content: "";
	display: table;
	clear: both;
}

.footer {
	padding: 20px;
	text-align: center;
	background: #ddd;
	margin-top: 20px;
}

/* When the screen is less that 800px wide, two to one colum*/
@media screen and (max-width: 800px){
	.leftcolum, .rightcolum {
		width: 100%;
		padding: none;
	}
}

/* when screen is less than 400 px, stack the menu*/
@media screen and (max-width: 400px){
	.topnav a{
		float: none;
		width: 100px;
	}
}