/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 100%;	border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 20px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 10px; }
	nav a{ text-decoration: none; padding: 5px; color: green; }
	
	.cars{ width: 95%; margin: 0 auto; clear: both; display: grid; justify-content: center; }
	.top{float: left; margin-top: 5px;  border-top: 1.5px solid gold; background-color: lightyellow;}
	.middle{margin: 0 auto; border-top: 1.5px dotted gold; border-bottom: 1.5px dotted gold; background-color: khaki; //background-color: #e7debe;}
	.bottom{ float: left; border-bottom: 1.5px solid gold; background-color: lightyellow;}
	
	div{ float: left; //border: 1.5px solid green; }
	.small{ width: 350px; margin: 10px 10px 10px 20px; padding-right: 0px; padding-top: -10px; }
	#tpbl, #tpbr, #btml, #btmr{ border-left: 1px solid darkgreen; }
	#midt, #midb{ border-right: 1px solid darkgreen; text-align: right; margin-right: -20px; }
	.large{ width: 350px; margin: 10px; //border-top: 1px solid green;  }
	.large p{ margin-top: 30px;  border-top: thin solid green; border-bottom: 1.5px solid gold;   }
	.small p{ margin-top: 30px; border-top: thin solid green; border-bottom: thin solid gold; }
	h4{ margin-top: 10px; text-shadow: 0 0 1px gold; }
	a{ text-decoration: none; }
	
	.circle-container {
	  width: 150px;
	  height: 150px;
	  border-radius: 50%;
	  overflow: hidden; /* Clips the image into a circle */
	  border: 3px solid #eee; /* Optional border */
	  margin-top: 20px;
	  margin-left: 20px;
	  margin-right: 5px;
	  float: left;
	  shape-outside: circle();
	}
	#midt .circle-container, #midb .circle-container, #right .circle-container{ float: right; margin-right: 20px;}
	//#midt, #midb{ text-align: right; margin-right: -20px; }	
	
	#left{ border-left: 1px solid darkgreen; }
	#right{ border-right: 1px solid darkgreen; text-align: right; }

	.circle-container img { width: 100%; height: 100%; object-fit: cover; }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (max-width: 600px) {*/
@media only screen and (min-width: 600px) and (max-width: 768px){
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 100%;	border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 20px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 10px; }
	nav a{ text-decoration: none; padding: 5px; color: green; }
	
	.cars{ width: 95%; margin: 0 auto; clear: both; display: grid; justify-content: center; }
	.top{float: left; margin-top: 5px;  border-top: 1.5px solid gold; background-color: lightyellow;}
	.middle{margin: 0 auto; border-top: 1.5px dotted gold; border-bottom: 1.5px dotted gold; background-color: khaki; //background-color: #e7debe;}
	.bottom{ float: left; border-bottom: 1.5px solid gold; background-color: lightyellow;}

	div{ float: left; }
	.small{ width: 350px; margin: 20px; padding-right: 8px; padding-top: -10px; }
	#tpbl{ border-left: 1px solid darkgreen; }
	#tpbr{ border-right: 1px solid darkgreen; float: right; text-align: right; margin-top: -375px; }
	#midt{ margin-top: 200px; margin-left: -170px; //border: thin solid green;}
	#midb{ margin-left: -170px; text-align: right;}
	#btml{ border-left: 1px solid darkgreen; margin-top: 200px; }
	#btmr{ border-right: 1px solid darkgreen; float: right; text-align: right; margin-top: -15px;}
	.large{ width: 380px; margin: 20px; //border-top: 1px solid green;  }
	.large p{ margin-top: 30px;  border-top: thin solid green; border-bottom: 1.5px solid gold;   }
	.small p{ margin-top: 30px; border-top: thin solid green; border-bottom: thin solid gold; }
	#midt p{ border-top: thin solid green; border-bottom: thin solid gold; }
	h4{ margin-top: 10px; text-shadow: 0 0 1px gold; }

	a{ text-decoration: none; }

	.circle-container {
	  width: 150px;
	  height: 150px;
	  border-radius: 50%;
	  overflow: hidden; /* Clips the image into a circle */
	  border: 3px solid #eee; /* Optional border */
	  margin-top: 20px;
	  margin-left: 20px;
	  margin-right: 5px;
	  float: left;
	  shape-outside: circle();
	}
	
	#tpbr .circle-container{ float: right; margin-right: 10px; }
	.large .circle-container { width: 220px; height: 220px;	}
	#left{ border-left: 1px solid black; }
	#right{ float: right; border-right: 1px solid black; text-align: right; }
	#right .circle-container{ float: right; margin-right: 20px; }
	#midb .circle-container{ float: right; margin-right: 10px; }
	#btmr .circle-container{ float: right; margin-right: 10px; }

	.circle-container img { width: 100%; height: 100%; object-fit: cover; }
	
}

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (max-width: 768px) {*/
@media only screen and (min-width: 768px) and (max-width: 992px) {
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 100%;	border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 20px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 10px; }
	nav a{ text-decoration: none; padding: 5px; color: green; }
	
	.cars{ clear: both; width: 95%; margin: 0 auto; display: grid; justify-content: center; }
	.top{float: left; margin-top: 5px;  border-top: 1.5px solid gold; background-color: lightyellow;}
	.middle{margin: 0 auto; border-top: 1.5px dotted gold; border-bottom: 1.5px dotted gold; background-color: khaki; //background-color: #e7debe;}
	.bottom{ float: left; border-bottom: 1.5px solid gold; background-color: lightyellow;}

	div{ float: left; }
	.small{ width: 350px; margin: 20px; padding-right: 8px; padding-top: -10px; }
	#tpbl{ border-left: 1px solid darkgreen; }
	#tpbr{ border-right: 1px solid darkgreen; float: right; text-align: right; margin-top: -375px; }
	#midt{ margin-top: 200px; margin-left: -170px; //border: thin solid green;}
	#midb{ margin-left: -170px; text-align: right;}
	#btml{ border-left: 1px solid darkgreen; margin-top: 200px; }
	#btmr{ border-right: 1px solid darkgreen; float: right; text-align: right; margin-top: -15px;}
	.large{ width: 380px; margin: 20px; //border-top: 1px solid green;  }
	.large p{ margin-top: 30px;  border-top: thin solid green; border-bottom: 1.5px solid gold;   }
	.small p{ margin-top: 30px; border-top: thin solid green; border-bottom: thin solid gold; }
	#midt p{ border-top: thin solid green; border-bottom: thin solid gold; }
	h4{ margin-top: 10px; text-shadow: 0 0 1px gold; }

	a{ text-decoration: none; }

	.circle-container {
	  width: 150px;
	  height: 150px;
	  border-radius: 50%;
	  overflow: hidden; /* Clips the image into a circle */
	  border: 3px solid #eee; /* Optional border */
	  margin-top: 20px;
	  margin-left: 20px;
	  margin-right: 5px;
	  float: left;
	  shape-outside: circle();
	}
	
	#tpbr .circle-container{ float: right; margin-right: 10px; }
	.large .circle-container { width: 220px; height: 220px;	}
	#left{ border-left: 1px solid black; }
	#right{ float: right; border-right: 1px solid black; text-align: right; }
	#right .circle-container{ float: right; margin-right: 20px; }
	#midb .circle-container{ float: right; margin-right: 10px; }
	#btmr .circle-container{ float: right; margin-right: 10px; }

	.circle-container img { width: 100%; height: 100%; object-fit: cover; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	*{ //border: thin solid black; margin: 0;}
	body{ margin: 0 auto; width: 1000px; border-left: 1.5px solid gold; border-right: 1.5px solid gold; }
	header{ text-align: center; padding-top: 10px;  background-color: gold; color: black;}
	h1{ letter-spacing: 30px; text-shadow:  0px 0px 5px green; }
	nav { text-align: center; display: block; padding-bottom: 20px; }
	nav a{ text-decoration: none; padding: 10px; color: green; }

	.cars{ clear: both; display: grid; justify-content: center; }
	.top{float: left; margin-top: 5px;  border-top: 1.5px solid gold; background-color: lightyellow;}
	.middle{margin: 0 auto; border-top: 1.5px dotted gold; border-bottom: 1.5px dotted gold; background-color: khaki; //background-color: #e7debe;}
	.bottom{ float: left; border-bottom: 1.5px solid gold; background-color: lightyellow;}

	div{ float: left; }
	.small{ width: 280px; margin: 20px; padding-right: 8px; padding-top: -10px; }
	.large{ width: 450px; margin: 20px; //border-top: 1px solid green;  }
	.large p{ margin-top: 30px;  border-top: thin solid green; border-bottom: 1.5px solid gold;   }
	.small p{ margin-top: 30px; border-top: thin solid green; border-bottom: thin solid gold; }
	h4{ margin-top: 10px; text-shadow: 0 0 1px gold; }

	a{ text-decoration: none; }

	.circle-container {
	  width: 150px;
	  height: 150px;
	  border-radius: 50%;
	  overflow: hidden; /* Clips the image into a circle */
	  border: 3px solid #eee; /* Optional border */
	  margin-top: 20px;
	  margin-left: 20px;
	  margin-right: 5px;
	  float: left;
	  shape-outside: circle();
	}
	.large .circle-container { width: 250px; height: 250px;	}
	#left{ border-left: 1px solid black; }
	#right{ border-right: 1px solid black; text-align: right; }
	#right .circle-container{ float: right; margin-right: 20px; }

	.circle-container img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
}